JavaScript之call()理解

W_BinaryTree 發(fā)布于2019-08-23 18:05 / 2566人閱讀

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

Function.prototype.call() 概念

call()方法使用一個指定的this值和多帶帶給出的一個或多個參數(shù)來調(diào)用一個函數(shù)。

注意：該方法的語法和作用與apply()方法類似，只有一個區(qū)別，就是call()方法接受的是一個參數(shù)列表，而apply()方法接受的是一個包含多個參數(shù)的數(shù)組。
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

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

this.Product(name, price)

this在此處顯然指向?qū)ο驠ood，進(jìn)一步代入this指向?qū)ο蠛蛥?shù)為

Food.Product("cheese", 5)

語法

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

語法個人理解為：
fun.call(thisArg, arg1, arg2, …) 就相當(dāng)于 thisArg.fun(arg1, arg2, …)
而不論this.Arg初始指向?qū)Φ氖欠駷閷ο?/pre>
參數(shù)：
thisArg
在fun函數(shù)運(yùn)行時指定的this值。需要注意的是，指定的this值并不一定是該函數(shù)執(zhí)行時真正的this值，如果這個函數(shù)在 [非嚴(yán)格模式]的this值會自動指向全局對象（瀏覽器中就是 window 對象），同時值為原始值（數(shù)字，字符串，布爾值）的this會指向該原始值的自動包裝對象。

arg1, arg2, …
指定的參數(shù)列表。
    
返回值：
使用調(diào)用者提供的this值和參數(shù)調(diào)用該函數(shù)的返回值。若該方法沒有返回值，則返回undefined。
    
描述：
call()允許為不同的對象分配和調(diào)用屬于一個對象的函數(shù)/方法。
    
call()提供新的this值給當(dāng)前調(diào)用的函數(shù)/方法。你可以使用call來實(shí)現(xiàn)繼承：寫一個方法，然后讓另外一個新的對象來繼承它（而不是在新對象中再寫一次這個方法）。
    

示例
使用call方法調(diào)用父構(gòu)造函數(shù)
在一個子構(gòu)造函數(shù)中，你可以通過調(diào)用父構(gòu)造函數(shù)的call方法來實(shí)現(xiàn)繼承，類似于Java中的寫法。下例中，使用Food和Toy構(gòu)造函數(shù)創(chuàng)建的對象實(shí)例都會擁有在Product構(gòu)造函數(shù)中添加的name屬性和price屬性,但category屬性是在各自的構(gòu)造函數(shù)中定義的。
    
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方法調(diào)用匿名函數(shù)
在下例中的for循環(huán)體內(nèi)，我們創(chuàng)建了一個匿名函數(shù)，然后通過調(diào)用該函數(shù)的call方法，將每個數(shù)組元素作為指定的this值執(zhí)行了那個匿名函數(shù)。這個匿名函數(shù)的主要目的是給每個數(shù)組元素對象添加一個print方法，這個print方法可以打印出各元素在數(shù)組中的正確索引號。當(dāng)然，這里不是必須得讓數(shù)組元素作為this值傳入那個匿名函數(shù)（普通參數(shù)就可以），目的是為了演示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方法調(diào)用函數(shù)并且指定上下文的 "this"
在下面的例子中，當(dāng)調(diào)用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方法調(diào)用函數(shù)并且不指定第一個參數(shù)（argument 
在下面的例子中，我們調(diào)用了display方法，但并沒有傳遞它的第一個參數(shù)。如果沒有傳遞第一個參數(shù)，this的值將會被綁定為全局對象。
var sData = "Wisen";

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

display.call();  // sData value is Wisen
此處的理解是：display.call() 就相當(dāng)于 this.display() ，非嚴(yán)格模式下，此處this顯然指向全局window，也就等價于window.dispaly() ，也就是調(diào)用了display()。
嚴(yán)格模式下，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，年輕的前端攻城獅一枚，愛專研，愛技術(shù)，愛分享。 
個人筆記，整理不易，感謝閱讀、點(diǎn)贊和收藏。
文章有任何問題歡迎大家指出，也歡迎大家一起交流前端各種問題！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104660.html

發(fā)表評論

登陸后可評論

0條評論

W_BinaryTree

男|高級講師

我要關(guān)注我要私信

TA的文章

CTF入門學(xué)習(xí)2->Web基礎(chǔ)了解

閱讀 3369·2021-11-19 11:36
禪道軟件的使用

閱讀 2967·2021-09-27 13:34
云主機(jī)內(nèi)存有什么影響-云主機(jī)的大小是什么概念？

閱讀 2022·2021-09-22 15:17
前端開發(fā)清單

閱讀 2431·2019-08-30 13:49
區(qū)塊鏈筆記（4）用JS寫個簡單的區(qū)塊鏈原型

閱讀 780·2019-08-26 13:58
ES6中對象、函數(shù)、數(shù)組的擴(kuò)展

閱讀 1384·2019-08-26 10:47
JavaScript之call()理解

閱讀 2567·2019-08-23 18:05
JS事件流和事件委托

閱讀 635·2019-08-23 14:25

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript之call()理解

相關(guān)文章

**學(xué)習(xí)JavaScript之this,call,apply**

javascript技術(shù)難點(diǎn)（三）之this、new、apply和call詳解

JavaScript之例題中徹底理解this

**深入理解 Javascript 之 this**

**深入淺出JavaScript之call()、apply()方法**

發(fā)表評論

0條評論

W_BinaryTree

男|高級講師

TA的文章

CTF入門學(xué)習(xí)2->Web基礎(chǔ)了解

禪道軟件的使用

云主機(jī)內(nèi)存有什么影響-云主機(jī)的大小是什么概念？

前端開發(fā)清單

區(qū)塊鏈筆記（4）用JS寫個簡單的區(qū)塊鏈原型

ES6中對象、函數(shù)、數(shù)組的擴(kuò)展