JavaScript之call()理解

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

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

Function.prototype.call() 概念

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

注意：該方法的語(yǔ)法和作用與apply()方法類(lèi)似，只有一個(gè)區(qū)別，就是call()方法接受的是一個(gè)參數(shù)列表，而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。
JavaScript中的每一個(gè)Function對(duì)象都有一個(gè)apply()方法和一個(gè)call()方法，它們的語(yǔ)法分別為：

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)就等價(jià)于

this.Product(name, price)

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

Food.Product("cheese", 5)

語(yǔ)法

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

語(yǔ)法個(gè)人理解為：
fun.call(thisArg, arg1, arg2, …) 就相當(dāng)于 thisArg.fun(arg1, arg2, …)
而不論this.Arg初始指向?qū)Φ氖欠駷閷?duì)象

參數(shù)：

thisArg
在fun函數(shù)運(yùn)行時(shí)指定的this值。需要注意的是，指定的this值并不一定是該函數(shù)執(zhí)行時(shí)真正的this值，如果這個(gè)函數(shù)在 [非嚴(yán)格模式]的this值會(huì)自動(dòng)指向全局對(duì)象（瀏覽器中就是 window 對(duì)象），同時(shí)值為原始值（數(shù)字，字符串，布爾值）的this會(huì)指向該原始值的自動(dòng)包裝對(duì)象。

arg1, arg2, …
指定的參數(shù)列表。

返回值：

使用調(diào)用者提供的this值和參數(shù)調(diào)用該函數(shù)的返回值。若該方法沒(méi)有返回值，則返回undefined。

描述：

call()允許為不同的對(duì)象分配和調(diào)用屬于一個(gè)對(duì)象的函數(shù)/方法。
    
call()提供新的this值給當(dāng)前調(diào)用的函數(shù)/方法。你可以使用call來(lái)實(shí)現(xiàn)繼承：寫(xiě)一個(gè)方法，然后讓另外一個(gè)新的對(duì)象來(lái)繼承它（而不是在新對(duì)象中再寫(xiě)一次這個(gè)方法）。

示例

使用call方法調(diào)用父構(gòu)造函數(shù)
在一個(gè)子構(gòu)造函數(shù)中，你可以通過(guò)調(diào)用父構(gòu)造函數(shù)的call方法來(lái)實(shí)現(xiàn)繼承，類(lèi)似于Java中的寫(xiě)法。下例中，使用Food和Toy構(gòu)造函數(shù)創(chuàng)建的對(duì)象實(shí)例都會(huì)擁有在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)建了一個(gè)匿名函數(shù)，然后通過(guò)調(diào)用該函數(shù)的call方法，將每個(gè)數(shù)組元素作為指定的this值執(zhí)行了那個(gè)匿名函數(shù)。這個(gè)匿名函數(shù)的主要目的是給每個(gè)數(shù)組元素對(duì)象添加一個(gè)print方法，這個(gè)print方法可以打印出各元素在數(shù)組中的正確索引號(hào)。當(dāng)然，這里不是必須得讓數(shù)組元素作為this值傳入那個(gè)匿名函數(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方法的時(shí)候，該方法的this值會(huì)綁定到obj對(duì)象。

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ù)并且不指定第一個(gè)參數(shù)（argument
在下面的例子中，我們調(diào)用了display方法，但并沒(méi)有傳遞它的第一個(gè)參數(shù)。如果沒(méi)有傳遞第一個(gè)參數(shù)，this的值將會(huì)被綁定為全局對(duì)象。

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，也就等價(jià)于window.dispaly() ，也就是調(diào)用了display()。
嚴(yán)格模式下，this的值將會(huì)是undefined。見(jiàn)下文。

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

GPU云服務(wù)器云服務(wù)器 javascript call 深入理解webrtc之a(chǎn)ec javascript理解如何理解javascript

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104660.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

W_BinaryTree

男|高級(jí)講師

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

TA的文章

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

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

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

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

閱讀 2464·2019-08-30 13:49
區(qū)塊鏈筆記（4）用JS寫(xiě)個(gè)簡(jiǎn)單的區(qū)塊鏈原型

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gò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ā)表評(píng)論

0條評(píng)論

W_BinaryTree

男|高級(jí)講師

TA的文章

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

禪道軟件的使用

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

前端開(kāi)發(fā)清單

區(qū)塊鏈筆記（4）用JS寫(xiě)個(gè)簡(jiǎn)單的區(qū)塊鏈原型

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