apply

概念

概念：方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。 语法：function.call(thisArg, [argsArray]) 参数： thisArg：可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。 返回值：使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

原理

分析： 他们改变的this指向的原理：

  • 其实就是通过在 某个对象上添加这样一个方法，
  • 然后拿到参数，
  • 再去调用这个对象的这个方法(符合this指向调用者。) 。
  • 得到结果后，再在这个对象上删去这个属性方法。

  • 最后返回结果。(想一想，其实很简单是不是)

    实现

    call

  • 首先 context 为可选参数，

  • 如果不传的话默认上下文为 window 接下来给 context 创建一个 fn 属性，并将值设置为需要调用的函数
  • 因为 apply 传参是数组传参，所以取得数组，将其剥离为顺序参数进行函数调用
  • 然后调用函数并将对象上的函数删除
  1. function Animal(name,color){
  2.   this.name = name||'动物';
  3.   this.color = color||'颜色';
  4.   this.say=function(){
  5.     console.log(`Animal:${this.name},${this.color}`)
  6.   }
  7. }
  8. function Dog(name,color){
  9.   Animal.apply(this,[name,color]);
  10.   this.say=function(){
  11.     console.log(`Dog:${this.name},${this.color}`)
  12.   }
  13. }
  14. let newDog = new Dog('小狗','棕色');
  15. let newDog2 = new Dog();
  16. newDog.say()
  17. newDog2.say();
  19. Function.prototype.myApply=function(context){
  20.   // 判断调用者是否为函数
  21.   if (typeof this !== 'function') {
  22.     throw new TypeError('Error')
  23.   }
  24.   //如果不传默认window
  25.   context = context || window;
  26.   // 新增 fn 属性,将值设置为需要调用的函数
  27.   context.fn = this;
  28.   // 返回执行结果
  29.   let result;
  30.   //判断是否有参数传入
  31.   if(arguments[1]){
  32.     result = context.fn(...arguments[1])
  33.   }else{
  34.     result = context.fn();
  35.   }
  36.   // 删除函数
  37.   delete context.fn;
  38.   return result
  39. }
  40. function Cat(name,color){
  41.   Animal.myApply(this,[name,color]);
  42.   this.say=function(){
  43.     console.log(`Cat:${this.name},${this.color}`)
  44.   }
  45. }
  46. let newCat = new Cat('小猫','棕色');
  47. let newCat2 = new Cat();
  48. newCat.say()
  49. newCat2.say();

image.png

示例

  1. 用 apply 将数组各项添加到另一个数组
  2. 使用apply和内置函数
  3. 使用apply来链接构造器