JavaScript之call()理解

W_BinaryTree 發布于2019-08-23 18:05 / 2536人閱讀

摘要：返回值使用調用者提供的值和參數調用該函數的返回值。這個匿名函數的主要目的是給每個數組元素對象添加一個方法，這個方法可以打印出各元素在數組中的正確索引號。嚴格模式下，的值將會是。

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，年輕的前端攻城獅一枚，愛專研，愛技術，愛分享。 
個人筆記，整理不易，感謝閱讀、點贊和收藏。
文章有任何問題歡迎大家指出，也歡迎大家一起交流前端各種問題！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104660.html

學習JavaScript之this,call,apply

摘要：在全局對象中調用，自然讀取的是全局對象的值構造器調用說明作為構造器調用時，指向返回的這個對象。最直觀的表現就是，去看一些優秀框架的源代碼時，不再是被繞的暈乎乎的。學習起因：在之前的JavaScript學習中，this,call,apply總是讓我感到迷惑，但是他們的運用又非常的廣泛。遂專門花了一天，來弄懂JavaScript的this,call,apply。中途參考的書籍也很多，以...

wenhai.he 2019-08-19 17:30 評論0 收藏0
javascript技術難點（三）之this、new、apply和call詳解

摘要：第四點也要著重講下，記住構造函數被操作，要讓正常作用最好不能在構造函數里 4) this、new、call和apply的相關問題講解this指針的原理是個很復雜的問題，如果我們從javascript里this的實現機制來說明this，很多朋友可能會越來越糊涂，因此本篇打算換一個思路從應用的角度來講解this指針，從這個角度理解this指針更加有現實意義。下面我們看看在ja...

ghnor 2019-08-21 10:27 評論0 收藏0
JavaScript之例題中徹底理解this

摘要：最后重點理解結論箭頭函數的，總是指向定義時所在的對象，而不是運行時所在的對象。輸出，箭頭函數不會綁定所以傳入指向無效。原因是，要徹底理解應該是建立在已經大致理解了中的執行上下文，作用域作用域鏈，閉包，變量對象，函數執行過程的基礎上。本文共 2025 字，看完只需 8 分鐘概述前面的文章講解了 JavaScript 中的執行上下文，作用域，變量對象，this 的相關原理，但是我...

Hwg 2019-08-23 12:34 評論0 收藏0
深入理解 Javascript 之 this

摘要：深入淺出的理解問題的由來寫法一寫法二雖然和指向同一個函數，但是執行結果可能不一樣。該變量由運行環境提供。所以，就出現了，它的設計目的就是在函數體內部，指代函數當前的運行環境。深入淺出this的理解問題的由來 var obj = { foo: function(){} } var foo = obj.foo; // 寫法一 obj.foo(); // 寫法二 foo...

OnlyMyRailgun 2019-08-23 10:54 評論0 收藏0
深入淺出JavaScript之call()、apply()方法

摘要：的作用在中，方法和方法都是為了改變函數運行時上下文而存在的，換句話說就是為了改變函數體內部的指向。歡迎前端大牛糾正錯誤，如有錯誤我會及時改正。寫在前面：隔了很長時間了，也不知道寫點什么。最近一直在研究ES6，一直想寫出來的文章能對初學者或者是在學習JS路上有所幫助的。這就是我的初衷。 call、apply的作用在JavaScript中，call()方法和apply()方法都是為了...

Cympros 2019-08-20 14:16 評論0 收藏0