-
call 与 apply 是什么
call
方法应用于Function
对象。语法为call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数 解释 `thisObj` 可选项。将被用作当前对象的对象。 `arg1, arg2, , argN` 可选项。将被传递方法参数序列。 说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数对象的上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply和call两者在作用上是相同的,但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。如func.call(func1,var1,var2,var3)
对应的 apply 写法为:func.apply(func1,[var1,var2,var3])
。本文以 `call` 为例。上面的文字应该可以很好的理解。但是想真正的掌握
call
还是得认真地研究一下才行。来看例子:在 call 传入对象
var sayName = function () { alert(this.name); } var peter = { name: "peter" } sayName.call(peter); //peter
上面这个例子可以很直观地理解
call
的工作原理。也就是说,当在函数中调用call
这个方法时,函数内部的this
对象会自动指向call
方法中的第一个参数。在上面这个例子中也就是peter
这个对象了。所以在执行sayName.call(peter)
时,函数内部的this.name
则会自动指向peter.name
。故最终结果为peter
。这是一个非常好理解的例子。接下来来看较为复杂的情况。function Person1 () { this.name = "person1"; this.sayName = function () { alert(this.name); } } function Person2 () { this.name = "person2"; } var sam = new Person2(); Person1.call(sam); sam.sayName(); //person1
以上例子中,最关键的是
Person1.call(sam)
这一步。我们来看看在里面究竟发生了什么事。当调用call
这个方法时,函数Person1
内部的this
指向sam
这个对象。相当于,给sam
这个对象执行这两条语句:this.name = "person1"; this.sayName = function () { alert(this.name) }
故在此重写了原来
sam
对象中的name
属性。而且获得了一个新的方法。所以可以成功的调用sam.sayName()
而且结果返回person1
。在 call 中传入函数
function class1 () { this.message = "yeah"; } function class2 () { this.sayMessage = function () { alert(this.message); } } class2.call(class1); alert(class1.sayMessage); class1.sayMessage(); //undefined
上述例子中,我们调用了
class2
函数的call
方法,传入了class1
这个函数。结果class1
拥有了sayMessage
这个方法。但是直接调用这个方法返回的结果却是undefined
而不是我们期望的yeah
。这是为什么呢?为了搞清楚这里面的this
指向,我们作如下修改:var message = "hi"; function class1 () { this.message = "yeah"; } function class2 () { this.message = "hello"; this.sayMessage = function () { alert(this.message); } } class2.call(class1); alert(class1.sayMessage); class1.sayMessage(); // hello class1.message = "msg"; class1.sayMessage(); //msg
第一次调用
sayMessage
方法,返回hello
。我们再来看一下class2.call(class1)
这个过程。当执行这个方法时,class1
获得class2
的message
属性和sayMessage
方法。所以此时有class1.message = "hello"
,class1.sayMessage = function () {alert(this.message)}
。因此执行sayMessage
时返回hello
。当我们手动修改class1.message
时,再调用这个方法,返回的值为我们修改的值。这证明了我们上面的推理是正确的。我们再来看前一个例子。
function class1 () { this.message = "yeah"; } function class2 () { this.sayMessage = function () { alert(this.message); } } class2.call(class1); alert(class1.sayMessage); class1.sayMessage(); //undefined
这个例子中并没有定义
class1.message
这个属性。所以执行sayMessage
方法时,返回为未定义。有个比较容易混淆的地方是,class1
中定义的this.message
并不是class1.message
。而是class1
的实例才拥有这个message
属性。类似的例子还有下面这个:
function Class1(){ this.showTxt = function(){alert(this.name)} } function Class2(){ this.name = 'class2'; } var class1 = new Class1(); class1.showTxt.call(Class2);//undefined alert(Class2.showTxt);//undefined
原因与上面的例子一样。
Class2
并没有定义name
这个属性。
call和apply的那些事儿
最新推荐文章于 2024-09-05 11:00:53 发布