javascript中的call、apply和bind的用法

最新推荐文章于 2022-06-19 19:20:47 发布

原创最新推荐文章于 2022-06-19 19:20:47 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript中的call、apply和bind的用法

Javascript 同时被 2 个专栏收录

24 篇文章

订阅专栏

javascript

21 篇文章

订阅专栏

本文详细介绍了JavaScript中call、apply和bind三个方法的功能与用法，包括如何改变函数内部this的指向、实现方法绑定及继承，并附有示例代码。

call和apply

call、apply和bind都可以改变this的指向，call和apply绑定对象之后会立即执行，而bind绑定的方法需要调用才能执行。

obj.call(thisObj, arg1, arg2, ...);
obj.call(thisObj, [arg1, arg2, ...]);

两者的作用一致，都是把obj（即this）绑定到thisObj，这个时候thisObj具备了obj的属性和方法，也可以说thisObj继承了obj的属性和方法。绑定后会立即执行函数。

区别：apply接受的是类数组参数，call接受的是连续参数。

示例：

function add(a, b){
    return a + b;
}
function sub(a, b){
    return a - b;
}

在控制台中运行如下：

add(5,3); //8
add.call(sub, 5, 3); //8
add.apply(sub, [5, 3]); //8

sub(5, 3); //2
sub.call(add, 5, 3); //2
sub.apply(add, [5, 3]); //2

调用原生对象的方法：

let a = {0:1, 1:"yjc", length: 2}; 

a.slice(); //TypeError: a.slice is not a function

Array.prototype.slice.call(a);//[1, "yjc"]

对象a类似Array，但是不具备array的slice等方法。使用call绑定就可以调用slice方法。

call和apply实现继承
通过call和apply，我们可以实现继承。

let Parent = function(){
    this.name = 'Lenhart';
    this.age = 25;
}

let child = {};
console.log(child); //Object {}
Parent.call(child);
console.log(child);

child继承了Parent的属性。

bind的使用

obj.bind(thisObj, arg1, arg2,...);

把obj绑定到了thisObj上，此时thisObj具备了obj的属性和方法。与call和apply不同的是，bind绑定后需要调用才能执行。

add.bind(sub, 5, 3); //仅仅绑定没有调用
add.bind(sub, 5, 3)(); //8

如果bind的第一个参数是null或者undefined，等于将this绑定到全局对象。