面试必备！JS:call详解以及自己手写call

Posted 2021-06-04 小小码农，可笑可笑

注：本篇文章示例来源于MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

目录

call详解

 call的定义

 call的语法

 call的描述(来源MDN)

 call的示例（干货来了）

使用 call 方法调用父构造函数

使用 call 方法调用匿名函数

使用 call 方法调用函数并且指定上下文的 'this'

使用 call 方法调用函数并且不指定第一个参数（argument）

自己实现call方法

---

不知道各位是否看到大佬写的代码，里面的代码很是简洁，但是this出现的很多，上下文的调用，this的指向我们被绕的头晕，但是大佬却信手拈来，我觉得其中call的作用功不可没，可见想要js进阶，精通call的使用是不可或缺的。那就让我们来解开call的神秘面纱吧。

call详解

---

 call的定义

       PS(很多官方资料叙述的call都是有些抽象的，因为他们必须保证他们语言的严谨性和准确性，但是我就不一样了，咱也不是官方，咱只需要叙述的明白，大家里脊即可。)

       我的理解，call就是为了将本身this指向改变为新对象的值。无论是继承还是添加属性，都是利用了其this指向的变化而起作用的。

       之后我们会通过MDN的几种示例来一一验证。我们先看看它的通用语法。有不理解的不要紧，往下看就行。

 call的语法

function.call(thisArg, arg1, arg2, ...)

1. function就是个方法，我们通过一个类型是function的对象调用call
2. thisArg代表this值，但是这个this值是在function运行时的this值。（反复读，还不理解就向下看，有例子阐述）非严格模式，null和undefined会被替换为全局对象。
3. arg1,arg2,...参数列表
4. 其返回值来源于function最终的返回值，若没有则为undefined

 call的描述(来源MDN)

  call() 允许为不同的对象分配和调用属于一个对象的函数/方法。

  call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

 call的示例（干货来了）

    以下示例很是经典，建议手敲，并在不理解的地方看一看其打印值。

    先看代码，再看我的解释，将你的理解和我的理解对比一下，有问题我们评论区探讨或加下方微信

• 使用 call 方法调用父构造函数

    我们看看下面的代码，这一段代码的目的是给Food构造函数和Toy的属性值赋值，仅通过一个Project的父构造函数，就能将两个不同类型的子构造函数Food和Toy其相同属性赋值，大大减少了冗余代码

   Food和Toy构造函数通过call继承了Project构造函数。大家回想下我最开始说的，call就是改变了其this指向。我们按照代码的执行顺序来看。

1. 先是定义了Project、Food、Toy构造函数。
2. 调用Food、Toy构造函数
3. 重点：  Product.call(this, name, price);  首先明确一点，这里这个this值为Food构造函数，没什么争议的。将其对应到语法中也就是thisArg就是Food构造函数，function就是Project构造函数，则Project的运行时的this值就为Food构造函数。

大家运行后可以看看几个构造函数中的this值是什么，调用call之前和之后的this值变化。

function Product(name, price) {
  console.log('Project构造函数this:',this)
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  console.log('Food构造函数this:',this)
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  console.log('Toy构造函数this:',this)
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

• 使用 call 方法调用匿名函数

下面这段代码，定义了一个匿名函数，该匿名函数调用call，为其animal中的对象增加print方法，并调用。

分析了一个例子，这个就不用那么细了。我们直奔主题。

对比语法，匿名函数就是语法中的function，animals[i],就是该匿名函数中this的值，因此通过循环我们为animals的每个对象增加了print方法。

var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

for (var i = 0; i < animals.length; i++) {
  //匿名函数
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);//调用call
}

• 使用 call 方法调用函数并且指定上下文的 'this'

如果不通过greet.call调用，greet函数中的this指向的是greet函数本身，则this.animal则undefined

依旧是改变this指向。

function greet() {
  var reply = [this.animal, '通常睡', this.sleepDuration].join(' ');
  console.log(reply);
}

var obj = {
  animal: '猫', sleepDuration: '12到16个小时'
};

greet.call(obj);  //其greet函数中的this值为obj

• 使用 call 方法调用函数并且不指定第一个参数（argument）

非严格模式下，若不定义call函数中第一个参数thisArg值，则thisArg值为window（全局对象）

严格模式下，若不定义call函数中第一个参数thisArg值，则thisArg值为undefined

var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call();  // sData value is Wisen

'use strict';

var sData = 'Wisen';

function display() {
  console.log('this',this);
  console.log('sData value is %s ', this.sData);
}

display.call(); 
// this undefined
// Cannot read the property of 'sData' of undefined

自己实现call方法

  下面的代码，基本实现了call方法的作用，一些异常还没做。留给各位小伙伴了。

  call的主要目的是将function中的this指向变为thisArg，因此我们只需要将调用call时的this赋给thisArg就好了。

代码分四步：

1. 解析出参数列表
2. 改变function的this指向为thisArg
3. 释放额外赋予的对象属性
4. 返回结果

Function.prototype.callFn = function(context) {
  //thisArg若为undefined或null，将其设为window全局
  if(context === undefined || context ===null){
    context = window
  }
  //将参数从arguments取出
  var args = []
  for (let i=0;i<arguments.length;i++) {
    if(i!== 0){
      args.push(arguments[i])
    }
  }

  //console.log('callFn_this:',this)//this为Project
  //console.log('callFn_context:',context)//context为Food
  //将context设置为对象，并将this给予context任意一个属性
  context = new Object(context)
  const key = 'key'
  context[key] = this

  //返回结果为thisArg(...args)
  const result = context[key](...args)
  delete context[key]
  return result
}

测试代码：

不做解释了就

Function.prototype.callFn = function(context) {
  //thisArg若为undefined或null，将其设为window全局
  if(context === undefined || context ===null){
    context = window
  }
  //将参数从arguments取出
  var args = []
  for (let i=0;i<arguments.length;i++) {
    if(i!== 0){
      args.push(arguments[i])
    }
  }

  //console.log('callFn_this:',this)//this为Project
  //console.log('callFn_context:',context)//context为Food
  //将context设置为对象，并将this给予context任意一个属性
  context = new Object(context)
  const key = 'key'
  context[key] = this

  //返回结果为thisArg(...args)
  const result = context[key](...args)
  delete context[key]
  return result
}

function Product(name, price) {
  console.log('Product this:',this)
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  console.log('Food_this:',this)
  let newFood = Product.callFn(this, name, price);
  // let newFood = Product.apply(this, [name, price]);
  // let newFood = Product.bind(this, [name, price])();
  console.log(this === newFood)
  this.category = 'food';
}
console.log(new Food('cheese', 5).name);