`

JS函数调用中的this

 
阅读更多

          在JS中,函数只定义一次,但是可能被执行或调用任意次数。我们知道,函数的调用主要有四种方法:

          1,方法调用模式

          2,函数调用模式

          3,构造函数调用模式

          4,apply或call调用模式

 

 

1,方法调用

 

var object={
            color : ”蓝色“,
            say:function(){
                    console.log(this.color)
                }
        }
    object.say()//在say方法中,this指向方法中的对象

            

2,函数调用

 

var add=function(a,b){
        console.log(this)//this指向window(全局)
            return a+b;
        }
    var sum=add(3,4);
    console.log(sum);//7

 

3,构造函数调用模式

 

function Robot(name){
    this.name= name;//this指向新生成的实例
    this.say=function(){
                console.log(this.name)
             }
}
var new_name = new Robot('alan');
robot_1.say()        //  打印结果为'alan',this指向alan
var new_names = new Robot('adam');
robot_2.say()        //  打印结果为'adam',this指向adam

 

4,apply或call调用模式

 

若不考虑函数内的this引用的话,对函数调用apply或call方法和类似于 say() 这样的普通调用方式是一样的

 

 

var robot_1 ={
                name:"cup",
                say:function(){
                        console.log(this.name)
                        }
              };
var robot_2 ={ name:"bower" };
robot_1.say.apply(robot_2)
//打印结果为bower,通过apply调用robot_1.say方法.方法内的this引用引用了robot_2
robot_1.say.call(robot_2)
//打印结果为bower,通过call调用robot_1.say方法.方法内的this引用引用了robot_2

 

 

 

apply和call能够强制函数内的this指定某一对象,他们传递的第一个参数没什么不同,但不同的是剩余参数的传递方式。剩下的参数对于apply方法来讲是将参数组合为数组传入,而call方法则原样传递。

 

 

例如

 

 

 

function say(sex,age)
{
    console.log("My name is " + this.name + ",I'm a " + age + "years old " + sex + ".")
}
say.apply({name:"cup"}, [12, "boy"])
// 从第二个参数起,用数组来传参.
say.call({name:"cup"}, 12, "boy")
// 从第二个参数起,参数原样传递.

分享到:
评论

相关推荐

    JavaScript函数的调用以及参数传递

    JavaScript 函数调用 JavaScript 函数有 4 种调用方式。 每种方式的不同方式在于 this 的初始化。 this 关键字 一般而言,在Javascript中,this指向函数执行时的当前对象。 Note 注意 this 是保留关键字,你不能...

    微信小程序Page中data数据操作和函数调用方法

    //index.js Page({ data: { text: This is page data., sliderOffset: 0, sliderLeft: 0, state:{ genre:[], genre_index: 0, model:[], model_index: 0, terminalStatus:'', } }, onLoad: function...

    JavaScript函数的4种调用方法详解

    在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用。函数有四种调用模式,分别是:函数调用形式、方法调用形式、构造器形式、以及apply形式...

    JavaScript 函数调用

    JavaScript 函数调用 JavaScript 函数有 4 种调用方式。 每种方式的不同在于 this 的初始化。 this 关键字 一般而言,在Javascript中,this指向函数执行时的当前对象。 注意 this 是保留关键字,你不能修改...

    JavaScript 函数调用规则

    JavaScript函数调用规则一 (1)全局函数调用: function makeArray( arg1, arg2 ){ return [this , arg1 , arg2 ]; } 这是一个最常用的定义函数方式。相信学习JavaScript的人对它的调用并不陌生。 调用代码如下: ...

    javascript函数的四种调用模式

    1、介绍 先介绍一下函数的调用模式有哪四种: 函数调用模式, 方法调用模式, 构造函数调用模式, 上下文调用模式;...在上述代码中,fn1也就是函数调用模式中的this是指向Window的,而返回值是由return决定。

    Javascript 函数的四种调用模式

     最普通的函数调用 // 声明式函数 function fn1 () { console.log(this); } // 函数表达式函数 var fn2 = function() { console.log(this); }; // 调用 函数中this表示全局对象,在浏览器中就是指window fn1();...

    javascript 函数限制调用代码

    函数: 代码如下: function throttle(fn,ms) { ... } 参数 fn : 传入的函数/方法 参数 ms:每次函数调用时的间隔(毫秒为单位),如输入2000,函数在2秒内不会重复触发。 附一初始化例子 代码如下: document.getElementById

    详解JS构造函数中this和return

    先看一段代码, function Foo(name,age){ this.name=name; this.age=age;...相对于普通函数,构造函数中的this是指向实例的,而普通函数调用中的this是指向windows的。 构造函数中如果加入了return的话

    在vue中使用回调函数,this调用无效的解决

    主要介绍了在vue中使用回调函数,this调用无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    javascript 函数调用的对象和方法

    如果你真正理解Javascript函数是如何调用工作的,那么就可以避免一些bug的发生; 首先让我们创建一个简单的函数,这个函数将在下文中使用,这个函数仅仅返回当前的this的值和两个提供的参数. 代码如下: function make...

    js函数调用常用方法详解

    js的函数调用会免费奉送两个而外的参数就是 this 和 arguments 。arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度。 书上有说4中调用方式: 方法调用模式 函数调用模式 构造器调用...

    javascript函数的解释

    javascript函数的解释,解释了具体函数的功能,一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:...

    JavaScript函数中的this四种绑定形式

     javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this 一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最核心的一点——函数中的this总指向调用它的...

    javascript 中 this 的用法.docx

    通常来说,this 的值是在函数被调用时确定的,其值取决于函数被调用的方 式。本文将介绍 JavaScript 中 this 的用法,从而帮助开发者更好地理解并掌握 this 的使用。 一、在全局作用域中使用 this 在全局作用域中...

    JavaScript中判断函数是new还是()调用的区别说明

    方式1 代码如下: function Person(n,a){ this.name = n; this.age = a;... // –> 函数调用 方式2 代码如下: function Person(n,a){ this.name = n; this.age = a; if(this instanceof arguments.callee){ ale

    js中this的绑定情况以及如何改变this的指向

    如果嵌套函数作为函数调用,其this值不是全局对象就是undefined(非严格模式下是全局对象(即window对象),严格模式下是undefined)。很多人误以为调用嵌套函数时,this会指向调用外层函数的上下文。如果你想访问这...

    JavaScript直接调用函数与call调用的区别实例分析

    本文实例讲述了JavaScript直接调用函数与call调用的区别。分享给大家供大家参考,具体如下: 直接调用 直接调用函数是最常见 最普通的方式,直接以函数附加的对象作为调用者, 在函数后括号内传入参数来调用函数 例如:...

    JavaScript函数的4种调用方法实例分析

    本文实例讲述了JavaScript函数的4种调用方法。分享给大家供大家参考,具体如下: JavaScript 函数有 4 种调用方式: 1. 作为一个函数调用 2. 函数作为方法调用 3. 使用构造函数调用函数 4. 作为函数方法调用函数...

    JS函数的定义与调用方法推荐

    JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式 1. 方法调用模式: 先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来执行方法,this即指当前的my...

Global site tag (gtag.js) - Google Analytics