apply bind call 详解 和 实际应用

带你深入理解js 中 apply bind call

1. 网上有很多博客写了这方面的文章， 但是最近又重新复习一下，做一下理解
2. 写了几个例子帮助大家理解一下
3. 在项目中的作用

作用

1. 改变函数执行时的上下文
2. 改变函数运行时的this指向

this 永远指向最后调用它的那个对象

来理解一下 this 的作用域

    var name = "window";

    var dog = {
        name : "小黄"
        eat: function () {
            console.log(this.name)
        },
        say: function () {
            setTimeout(  function () {
                // 默认指向window对象,如果在严格模式下, 默认是undefined
                this.eat()
            },100);
        }
    };
    dog.say()   // this.eat is not a function

当 setTimeout 执行的时候 最后调用的 对象是 window, window 没有 eat 的方法所以 出错

在写一个例子理解一下 this 永远指向最后调用它的那个对象 这句话

     var name = "windows";
    var dog = {
        name: "小黄",
        say : function () {
            console.log(this.name);      // windows
        }
    }
    var fn = dog.say;
    fn();

为什么 dog 作用域下 有 name 属性， 还输出了 全局的 name 呢

1. this 永远指向最后调用它的那个对象
2. fn = a.say 并没有执行 当 fn() 执行的时候 是 window 的作用域下

解决以上两个问题

我们这里只拿一个 call修改作用域 解决这个问题

    var name = "window";

    var dog = {
        name : "小黄"
        eat: function () {
            console.log(this.name)
        },
        say: function () {
            setTimeout(  function () {
                this.eat()
            }.call(dog),100);
        }
    };
    dog.say()   // this.eat is not a function

在调用的时候修改 this 的指向手动吧 this 指向 dog 的作用域

现实场景中的应用

1. 构造函数中 方法的公用

       function Animal (name){
           this.name = name
           this.food = food
       }
       Animal.prototype = {
           eay: function(){
               console.log(this.name + 'eat: ' + this.food)
           }
       }
       var dog = new Person('小黄'， '火腿')
       dog.eay()
   

   上面代码会输出 小黄eat: 火腿

       var cat = {
       }
   

   我们定义了一个构造函数 那如果我们有有一个对象也想使用 Animal 原型中 eay 的方法咋办， 不能在重新写一遍 eay 方法吧

       // 1 call
       person.showName.call(cat, '小猫咪'， '鱼');
       // 2 apply
       person.showName.apply(cat, ['小猫咪'， '鱼']);
       // 3 bind
       person.showName.bind(cat, '小猫咪'， '鱼')();
   

   具体的怎么传参， 他们的差别是啥 可以看一下 MDN 上的文档说明

2. 将伪数组转化成 数组 arguments 也是伪数组 我们知道在看 jq 的源码中 经常通过 call apply 的 形式 转换成真正的数组

       var element = {
           0: 'div',
           1: 'p',
           2: 'span',
           length: 3
       }
   

   这里一定要注意（数据结构必须是以数字为下标而且一定要有length属性 且必须是number类型） 大家可以实际看一下 dom 的伪数组

   见证奇迹的时刻

       // slice 可以将 伪数组转换成真正的数组
       var arr = Array.prototype.slice.call(element);
   

3. 求数组中的最大和最小值

       var arr = [34,5,3,6,54,6,-67,5,7,6,-8,687];
       // 数组没有 max 的方法 可以使用 Max 中的方法
       Math.max.apply(Math, arr);
   

4. 判断变量类型

       function isArray(obj){
           return Object.prototype.toString.call(obj) == '[object Array]';
       }
       isArray([]) // true
       isArray('false') // false