javascript call与apply关键字的作用

发布日期：2018-02-09    浏览次数：885

apply接受两个参数。第一个参数指定函数体内this对象的指向，第二个参数为一个带下标的集合。

call则是apply的语法糖，如果参数数量固定，则可以不用带下标的集合传第二个参数。

1
2
3
4
5
6
var func = function(a,b,c)
{
    alert(a + b + c);
}
func.apply(null,[1,2,3]);//弹出6
func.call(null,1,2,3);//弹出6

当apply与call传入的第一个参数为null时，函数体内的this会指向window。

call与apply的用途

1、改变this的指向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj1 = {
    name = '刘备'
}
 
var obj2 = {
    name = '曹操'
}
var getName = function(){
    alert(this.name);
}
 
window.name = '三国';
getName();//弹出"三国"
getName.call(obj1);//弹出"刘备"
getName.call(obj2);//弹出"曹操"

所以，当在一些情况下this被莫名改变指向之后，可以使用call或apply来进行修正this的指向。

1
2
3
4
5
6
7
document.getElementById('div1').onclick = function(){
    alert(this.id);//div1
    var fun1 = function(){
        alert(this.id);//window.id 即undefined
    }
    fun1();//普通函数的方式调用，this指代window,相当于window.id 即 undefined
}

由于是普通函数的方式调用，所以上面的例子中，this已经变成了window。下面看看如何使用call进行修正。

1
2
3
4
5
6
7
document.getElementById('div1').onclick = function(){
    alert(this.id);
    var fun1 = function(){
        alert(this.id);
    }
    fun1.call(this);//强制函数内的this为外层的this，
}

2、调用其他对象的函数

示例1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

示例2：借用构造函数实现类似继承的效果

1
2
3
4
5
6
7
8
9
10
11
12
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());

来源：javascript call与apply关键字

0

上一篇： javascript 闭包最简单理解

下一篇： javascript this关键字指向详解

本文网址：https://www.wyxxw.cn/blog-detail-1-4-311.html

返回列表

非特殊说明，本文版权归原作者所有，转载请注明出处

提示：本站所有资源仅供学习与参考，请勿用于商业用途。图片来自互联网~如侵犯您的权益，请联系QQ：1067507709.

提示：转载请注明来自：http://www.cnblogs.com/kissdodog/p/5519912.html 。 转载人：momo