javascript 中的call 和apply

来源:互联网 发布:日本娱乐圈黑料 知乎 编辑:程序博客网 时间:2024/05/29 02:43

Javascript的每个Function对象中有一个apply方法:

function.apply([thisObj[,argArray]])
还有一个类似功能的call方法:
function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])

各自的定义:

apply:应用某一对象的一个方法,用另一个对象替换当前对象。
call:调用一个对象的一个方法,以另一个对象替换当前对象。

它们的共同之处:

都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。” 参数thisObj指定函数体内this对象的指向,如果为null,则表示指向window.

var func = function(a,b,c){ console.log(this === window);//true alert(a + b + c);}func.apply(null,[1,2,3]);//弹出6func.call(null,1,2,3);//弹出6//此时this都指向window 

它们的不同之处:

apply:新this对象和一个数组 argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。

call:传递的是直接的参数列表,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针。

更简单地说,apply和call功能一样,只是传入的参数列表形式不同:如 func.call(func1,var1,var2,var3)   对应的apply写法为:func.apply(func1,[var1,var2,var3]),也就是说:call调用的为单个,apply调用的参数为数组

作用:

1.call和apply可以改变函数中this的指向:
var obj1 = {    name = '刘备'} var obj2 = {    name = '曹操'}var getName = function(){    alert(this.name);} window.name = '三国';getName();//弹出"三国",普通的函数调用方式,则表示在getName方法里面this指的是window对象,索引this.name就是window的name.getName.call(obj1);//弹出"刘备",表示在getName方法里面的thi指的是obj1对象,所以this.name就是obj1的name.getName.call(obj2);//弹出"曹操"表示在getName方法里面的thi指的是obj2对象,所以this.name就是obj2的name. 

document.getElementById('div1').onclick = function(){    alert(this.id);    var fun1 = function(){        alert(this.id);    }    fun1.call(this);//强制函数内的this为外层的this,}

2.调用其他对象的函数:

var obj1 = {    a:1,    b:2,    add:function()    {        return this.a + this.b;    }}var obj2 = {    a:1,    b:2,}var result = obj1.add.call(obj2);//用obj1的函数来计算obj2的两个属性的和alert(result);//输出3
3.借用构造函数实现类似继承的效果:

var A = function(name){    this.name = name;};var B = function(){    A.apply(this,arguments)}B.prototype.getName = function(){    return this.name;}var b = new B('刘备');alert(b.getName())