call() 、 apply() 、bind()方法的作用和区别!

从一开始,我是在书上看到关于bind()、call() 和 apply(), 不过长久以来,在工作中与网上接触到了很多关于这三个方法的使用场景,对这三个方法也算是比较熟悉了。所以把他们的作用和区别简单阐述一下!

javaScript权威指南上的解释是: call() 、apply()可以看作是某个对象的方法,通过调用方法的形式来间接调用函数。bind() 就是将某个函数绑定到某个对象上。也叫绑定函数

关于call() 和 apply() 在犀牛书上的解释可能比较生涩难懂,我的理解就是,它们的作用是: 让函数在某个指定的对象下执行。

例:

var obj = {x: 1}

function foo() {console.log(this.x)}

foo.call(obj)       //打印结果: 1

call() 和apply()的第一个参数相同,就是指定的对象。这个对象就是该函数的执行上下文。

call()和apply()的区别就在于,两者之间的参数。

call()在第一个参数之后的 后续所有参数就是传入该函数的值。apply() 只有两个参数,第一个是对象,第二个是数组就是该组,这个数组就是该函数的参数。

例1:

var obj = {};
 
function foo(a, b, c) {
  console.log(b);
}
 
foo.call(obj, 1, 2, 3)   //打印结果: 2;

例2:

var obj = {};
 
function foo(a, b, c) {
  console.log(b);
}
 
foo.apply(obj, [1, 2, 3])   打印结果: 2;

bind() 方法和前两者不同在于: bind() 方法会返回执行上下文被改变的函数而不会立即执行,而前两者是直接执行该函数。他的参数和call()相同。

这三个方法的作用都是改变函数的执行上下文!

实现一个简单的bind函数

Function.prototype.bind  = function() {
  var self  = this;
        context = [].shift.call(arguments)  // 需要绑定的this上下文
        args = [].slice.call(arguments)     //剩余的参数转成数组
  return function(){            // 返回一个新的函数
    return selft.applay(context,[].concat.call(args,[].slice.call(arguments));
    //执行新的函数的时候,会把之前传入的context当做新函数体内的this
    //并且组合两次分别传入的参数,作为新函数的参数
  }
}

call,apply,bind的区别
相同点:都是为了改变this指向
call和apply会立即执行,bind不会
call:接收一个或多个参数
接受一个或多个时,第一个参数永远改变原函数的this指向,第一个参数如果是null和undefined时,this指向window
后面的所有参数,会覆盖原函数的参数
apply:接收一个或两个参数
接受一个或两个时,第一个参数永远改变原函数的this指向
第二个参数,必须是数组,这个数组会覆盖原函数的所有参数(arguments)
bind方法,他是直接改变这个函数的this指向并且返回一个新的函数,之后再次调用这个函数的时候this都是指向bind绑定的第一个参数

你可能感兴趣的:(call() 、 apply() 、bind()方法的作用和区别!)