bind call apply 的区别和使用

bind call apply 的区别和使用：https://www.jianshu.com/p/015f9f15d6b3

在讲这个之前要理解一些概念，这些概念很重要，有人说过学会了javascript 的this 就基本会了一半的javascript

在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

JavaScript 的一大特点是函数存在：

定义时上下文
运行时上下文
上下文是可以改变

如果要深入理解这个知识要开个javascript 内存管理机制和运行原理了，这里就不做过多的介绍了。

function Fruits() {}

Fruits.prototype = {
    color: "red",
    printf: function() {
        console.log("My color is " + this.color);
    }
}

var apple = new Fruits;
apple.printf();    //My color is red

// 改变this
banana = {
    color: "yellow"
}
apple.printf.call(banana);     //My color is yellow
apple.printf.apply(banana);    //My color is yellow
// 通过call apply这两个来改变上下文的this指向

call ，apply 方法是一样的只是传递的参数不同而已，call（obj,args1，args2）
apply(obj,[args1,args2]) ，这样很明显看出区别了吧！

数组追加

var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
// 这样子优雅的解决了push 方法子传递一个参数的问题了。当然数组合并有contact 方法来合并的

// 比较数组的大小，使用 apply 作为传递数组的必选方法。
var  numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers),   //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

// 判断是否是数组 前提是toString  方法没有被重写。
functionisArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

// 将伪数组转成数组
// ES6 有方法 Array.from(args) 转化
var dom = Array.prototype.slice.call(document.getElementsByTagName("div"));
// 这样 domNodes 就可以使用pop() ,push() 等方法了。

深入理解call apply

封装console.log 方法

function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2
// 这是一道面试题这样的方法可以说是最优雅的了
// 我也是今天才知道他们两能力这么大

function log(){
  var args = Array.prototype.slice.call(arguments);
 var tim = new Date.getTime()
  args.unshift(tim);
  console.log.apply(console, args);
};
// 这个就可以优雅的给log 方法带上一个时间搓的前缀啦，是不是非常的棒。函数的不定参 arguments 是伪数组来的
//写了这么多相信各位已经明白了，我现在才知道这两个方法的强大，以前一直认为只是改变this这么简单，其实也改变this啊！

bind 的详细方法

再来说说bind。bind() 方法与 apply 和 call 很相似，也是可以改变函数体内 this 的指向。

我的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

直接来看看具体如何使用，在常见的单体模式中，通常我们会使用 _this , that , self 等保存 this ，这样我们可以在改变了上下文之后继续引用到它。 像这样：

var foo = {
    bar : 1,
    eventBind: function(){
        var _this = this;
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(_this.bar);     //1
        });
    }
}

// 使用 bind 方法
var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));
    }
}
// 多个bind
var bar = function(){
    console.log(this.x);
}
var foo = {
    x:3
}
var sed = {
    x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?

var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //3  第一个值，第二个失效了

bind 兼容写法

Function.prototype.bind= function(obj){
      if (Function.prototype.bind)
      return Function.prototype.bind;
      var _self = this, args = arguments;
      return function() {
      _self.apply(obj, Array.prototype.slice.call(args, 1));
      }
}
// 可能大家会有疑惑，这里为什么return 一个函数回去，因为bind()不是调用就执行的所以在这里返回一个函数。

// MDN的方法
if (!Function.prototype.bind) {
 Function.prototype.bind = function(oThis) {
   if (typeof this !== 'function') {
     // closest thing possible to the ECMAScript 5
     // internal IsCallable function
     throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
   }

   var aArgs   = Array.prototype.slice.call(arguments, 1),
       fToBind = this,
       fNOP    = function() {},
       fBound  = function() {
         return fToBind.apply(this instanceof fNOP
                ? this
                : oThis,
                 // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
                aArgs.concat(Array.prototype.slice.call(arguments)));
       };

    // 维护原型关系
   if (this.prototype) {
     // Function.prototype doesn't have a prototype property
     fNOP.prototype = this.prototype;
   }
   fBound.prototype = new fNOP();

   return fBound;
 };
}
// 也就是加了比较严格的判断。

从bind 的源码中可以看出跟 call ，apply 的却别了吧！
bind调用完成后不执行，call，apply是马上执行。相互之间是互通的
bind不兼容（IE5，6，7，8）

参考文献：
https://www.cnblogs.com/coco1s/p/4833199.html
https://blog.csdn.net/u012443286/article/details/78633540

 

 

5人点赞

 

javaScript