作用: call，apply，bind可以动态改变传入函数的this

使用： f.call(o,para1,para2…)

f.apply(o,[para1,para2…])

应用：

借用方法

  2.         var xm = {
  3.             name: '小明',
  4.             food: '饺子',
  5.             cook: function() {
  6.                 console.log("我把" + this.food + "做好了");
  7.             }
  8.         }
  9.         var xl = {
  10.             name: '小李',
  11.             food: '方便面'
  12.         }
  13.         xm.cook();
  14.         xm.cook.call(xl);
  15.         xm.cook.apply(xl);

实现继承

  2. function Animal(name) {
  3.       this.name = name;
  4.       this.showName = function() {
  5.         alert(this.name);
  6.       }
  7.     }
  9.     function Cat(name) {
  10.       Animal.apply(this, [name]);
  11.       //Animal.call(this, name);
  12.     }
  14.     var cat = new Cat("咕咕");
  15.     cat.showName();

区别

  2. call 和 apply 第一个参数都是一样的，这个参数将代表this指向的对象
  3. call 接收的参数 需要 一个个的 枚举出来
  4. apply 接收的参数， 可以直接是一个数组,也可以是类数组对象(arguments)

手写call

  1.  let obj1 = {
  2.         value: 1
  3.     }
  4.     let obj2 = {
  5.         value: 2,
  6.         getValue(name, age) {
  7.             return {
  8.                 value: this.value,
  9.                 name: name,
  10.                 age: age
  12.             }
  13.         }
  14.     }
  15. Function.prototype.myCall = function () {
  16.       const fn = Symbol('fn')    //用symbole声明一个独有的属性，防止覆盖已有属性
  17.       let ctx = arguments[0] || window // 如果没有this传入，默认绑定window对象
  18.       ctx.fn = this // 函数赋值(改变this执行);可以再次输出this，查看效果
  19.       let args = [...arguments].slice(1) // 获取传入的参数。这里为了下面方便判断，所以截去第一个参数(this)，并且把剩余参数变为数组; 
  20.       let result = args.length > 0  ? ctx.fn(...args) : ctx.fn() // 执行当前函数
  21.       delete ctx.fn // 删除我们改写的fn属性。因为不能改变原有对象，我们只是改变this，执行完就删除
  22.       retun result // 返回结果
  23. }
  25. // 调用
  26. console.log('call方法改写', obj2.myCall(obj1,'小明',12))

步骤分解

语义分解： 上面函数调用call函数，内部代码就变成了这样

  2. 1. 会先判断当前是否有this，也就是是否是{}。
  3. 2. 声明一个独有的属性，方便调用
  4. 3. 改变this指向(函数赋值)
  5. 4. 根据当前传入的参数个数，来判断执行函数所带的参数
  6. 5. 删除改变的fn属性
  7. 6. 返回结果
  8. // 调用前
  9. // let obj1 = {
  10. //       value: 1
  11. //    }
  12. // 调用后 
  13.  let obj1 = {
  14.        value: 1,
  15.        getValue(name, age) {
  16.             return {
  17.                 value: this.value,
  18.                 name: name,
  19.                 age: age
  21.             }
  22.         }
  23.     }
  25. ++++++++++++++++++++++++++++
  26.     let obj2 = {
  27.         value: 2,
  28.         getValue(name, age) {
  29.             return {
  30.                 value: this.value,
  31.                 name: name,
  32.                 age: age
  34.             }
  35.         }
  36.     }

代码分解

  2. 1. const fn = Symbol('fn')//  Symbol 作为对象的属性名，可以保证属性不重名
  4. 2. arguments: 任意一个函数的内部，都有一个arguments对象
  5. arguments作用：获取传递来的所有实参，他是一个类数组，类数组。l
  6. 3. 类数组转化为数组的方法  [...argument]  Array.from(arguments)   Array.prototype.
  7.     slice.call(arguments)

手写apply

  2.  let obj1 = {
  3.         value: 1
  4.     }
  5.     let obj2 = {
  6.         value: 2,
  7.         getValue(name, age) {
  8.             return {
  9.                 value: this.value,
  10.                 name: name,
  11.                 age: age
  13.             }
  14.         }
  15.     }
  16.  Function.prototype.myApply = function () {
  17.    const fn = Symbol('fn')
  18.    let ctx = arguments[0] || window
  19.    ctx.fn = this
  20.    let args = [...arguments].slice(1)
  21.    let result = args.length > 0 ? ctx.fn(...args) : ctx.fn()
  22.    delete ctx.fn
  23.    return result
  25.  }
  27. // 调用
  28. console.log('call方法改写', obj2.myApplyl(obj1,'小明',12))

bind返回一个新的函数 ,所以需要重新调用一次