js中call,apply和bind那些事

时间:2020-9-11 作者:admin

call和apply

call

1、用法:foo.call(obj, arg1, arg2, ...)-> 主要用于改变this的指向

function foo(year, place) {
  console.log(this.name+" is "+year+" born from "+place);
}
window.name = 'syz';
const obj = {
  name: 'syc'
}
foo(1995, 'china'); // syz is 1995 born from china
foo.call(obj, 1995, 'china'); // syc is 1995 born from china

首先我们要知道,每个函数中的this是在调用时绑定的,this指向哪里,完全取决于函数的调用位置。比如上面,我们先执行了foo(),基于我们调用这个函数的位置,如果我们在浏览器中运行的话(一般都是),此时this指向的是window,所以这时候this.name = syz;
那如果我们想要让 this.a = obj.name 的话,就可以使用call来显式绑定this的指向。

apply

1、用法:obj.apply(thisObj, [arg1, arg2, ...])-> 主要用于改变this的指向

function foo(year, place) {
  console.log(this.name+" is "+year+" born from "+place);
}
window.name = 'syz';
const obj = {
  name: 'syc'
}
foo(1995, 'china'); // syz is 1995 born from china
foo.apply(obj, [1995, 'china']); // syc is 1995 born from china

apply方法和call方法的区别就是apply中第二个参数接受的是一个数组。当函数的参数数量不明确时就可以使用apply来改变this的指向,有点类似扩展运算符...的效果。

call和apply的作用

1、一个重要的作用就是扩充函数赖以运行的作用域;

window.color = "red";
let o = {
    color: "blue"
};
function sayColor() {
    console.log(this.color);
}
sayColor(); //red
sayColor.call(this); //red 因为在全局环境下调用函数 this默认指向window
sayColor.call(window); //red this指向window
sayColor.call(o); //blue this指向o对象

使用call和apply来扩充作用域的最大好处,就是对象不需要和方法有任何耦合关系,调用者控制this的指向,就可以实现不同的功能。

bind

1、用法:foo.bind(obj, arg1, arg2, ...)-> 返回一个函数,该函数永久地改变this的指向;

function foo(year, place) {
  console.log(this.name+" is "+year+" born from "+place);
}
window.name = 'syz';
const obj = {
  name: 'syc'
}
foo(1995, 'china'); // syz is 1995 born from china
let haha = foo.bind(obj, 1995, 'china'); 
haha(); // syc is 1995 born from china

bind类似于call,但是call和apply会立即执行,而bind是返回绑定this之后的函数(永久地改变this的指向,原函数不变)

apply、call、bind三者的区别

  • 三者都可以改变函数的this的指向;
  • 三者第一个参数都是this要指向的对象,如果没有这个参数或参数为undefined或null,则默认指向全局window。
  • 三者都可以传参,但是call和bind是参数列表,apply是数组。
  • bind是返回绑定this之后的函数,便于稍后调用;apply和call则是立即执行。
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。