JavaScript之call()理解

Function.prototype.call()

概念

call()方法使用一個指定的this值和單獨給出的一個或多個參數來調用一個函數。

注意：該方法的語法和做用與 apply()方法相似，只有一個區別，就是call()方法接受的是 一個參數列表，而apply()方法接受的是 一個包含多個參數的數組。
JavaScript中的每個Function對象都有一個apply()方法和一個call()方法，它們的語法分別爲：

JavaScript Demo: Function.call()

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);    // 輸出: cheese

淺顯易懂的理解，示例中表達式 Product.call(this, name, price)就等價於

this.Product(name, price)

this在此處顯然指向對象Food，進一步代入this指向對象和參數爲

Food.Product('cheese', 5)

語法

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

語法我的理解爲：
fun.call(thisArg, arg1, arg2, …) 就至關於 thisArg.fun(arg1, arg2, …)
而不論this.Arg初始指向對的是否爲對象

參數：

thisArg
在fun函數運行時指定的this值。須要注意的是，指定的this值並不必定是該函數執行時真正的this值，若是這個函數在 [非嚴格模式]的this值會自動指向全局對象（瀏覽器中就是 window 對象），同時值爲原始值（數字，字符串，布爾值）的this會指向該原始值的自動包裝對象。

arg1, arg2, …
指定的參數列表。

返回值：

使用調用者提供的this值和參數調用該函數的返回值。若該方法沒有返回值，則返回undefined。

描述：

call()容許爲不一樣的對象分配和調用屬於一個對象的函數/方法。
    
call()提供新的this值給當前調用的函數/方法。你可使用call來實現繼承：寫一個方法，而後讓另一個新的對象來繼承它（而不是在新對象中再寫一次這個方法）。

示例

使用call方法調用父構造函數
在一個子構造函數中，你能夠經過調用父構造函數的call方法來實現繼承，相似於Java中的寫法。下例中，使用Food和Toy構造函數建立的對象實例都會擁有在Product構造函數中添加的name屬性和price屬性,但category屬性是在各自的構造函數中定義的。

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

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

使用call方法調用匿名函數
在下例中的for循環體內，咱們建立了一個匿名函數，而後經過調用該函數的call方法，將每一個數組元素做爲指定的this值執行了那個匿名函數。這個匿名函數的主要目的是給每一個數組元素對象添加一個print方法，這個print方法能夠打印出各元素在數組中的正確索引號。固然，這裏不是必須得讓數組元素做爲this值傳入那個匿名函數（普通參數就能夠），目的是爲了演示call的用法。

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方法調用函數而且指定上下文的 'this'
在下面的例子中，當調用greet方法的時候，該方法的this值會綁定到obj對象。

function greet() {
  var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
  console.log(reply);
}

var obj = {
  animal: 'cats', sleepDuration: '12 and 16 hours'
};

greet.call(obj);  // cats typically sleep between 12 and 16 hours

使用call方法調用函數而且不指定第一個參數（argument
在下面的例子中，咱們調用了display方法，但並無傳遞它的第一個參數。若是沒有傳遞第一個參數，this的值將會被綁定爲全局對象。

var sData = 'Wisen';

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

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

此處的理解是：display.call() 就至關於 this.display() ，非嚴格模式下，此處this顯然指向全局window，也就等價於window.dispaly() ，也就是調用了display()。
嚴格模式下，this的值將會是undefined。見下文。

'use strict';

var sData = 'Wisen';

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

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

---

推薦閱讀：
2019年前端面試題-01
2019年前端面試題-02
2019年前端面試題-03
2019年前端筆試題

---

我是Cloudy，年輕的前端攻城獅一枚，愛專研，愛技術，愛分享。
我的筆記，整理不易，感謝閱讀、點贊和收藏。
文章有任何問題歡迎你們指出，也歡迎你們一塊兒交流前端各類問題！