javascript對象不完全探索記錄02：瘋狂打call！給誰打call？打什么call？

Shimmer 發(fā)布于2019-08-21 17:58 / 3155人閱讀

摘要：注意該方法的作用和方法類似，只有一個(gè)區(qū)別，就是方法接受的是若干個(gè)參數(shù)的列表，而方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。指定的參數(shù)列表。返回值返回值是你調(diào)用的方法的返回值，若該方法沒有返回值，則返回。

溫馨提示：作者的爬坑記錄，對你等大神完全沒有價(jià)值，別在我這浪費(fèi)生命
溫馨提示-續(xù)：打call原本是屬于我們偶像宅文化中的專業(yè)名詞，指的是飯們在看live時(shí)在臺(tái)下配合愛豆演出的節(jié)奏喊口號，舉例：“超絕可愛～TJY！！！”現(xiàn)在被各種濫用，我很蛋疼

在javascript中有兩個(gè)常被提起的神奇函數(shù)，傳說中的call()和apply()先看看文檔中的定義
JavaScript標(biāo)準(zhǔn)庫 - Function.prototype.call()
JavaScript標(biāo)準(zhǔn)庫 - Function.prototype.apply()

call() 方法調(diào)用一個(gè)函數(shù), 其具有一個(gè)指定的this值和分別地提供的參數(shù)(參數(shù)的列表)。
注意：該方法的作用和 apply() 方法類似，只有一個(gè)區(qū)別，就是call()方法接受的是若干個(gè)參數(shù)的列表，而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。

從上面段話，我get到兩點(diǎn)：1.這不是人話 2.貌似整明白call()就約等于整明白apply()了
那我就一條一條攻略吧

call誰？給誰打call？

語法
fun.call(thisArg, arg1, arg2, ...)參數(shù) 
thisArg：
在fun函數(shù)運(yùn)行時(shí)指定的this值。需要注意的是，指定的this值并不一定是該函數(shù)執(zhí)行時(shí)真正的this值，如果這個(gè)函數(shù)處于非嚴(yán)格模式下，則指定為null和undefined的this值會(huì)自動(dòng)指向全局對象(瀏覽器中就是window對象)，同時(shí)值為原始值(數(shù)字，字符串，布爾值)的this會(huì)指向該原始值的自動(dòng)包裝對象。
arg1, arg2, ...：
指定的參數(shù)列表。
返回值 
返回值是你調(diào)用的方法的返回值，若該方法沒有返回值，則返回undefined。

參考文檔中的說明，我們可以這樣理解，call()的作用實(shí)際上就是在改變函數(shù)運(yùn)行的this結(jié)合call的詞面意思來理解，就是喊來thisArg來作為fun的this，直白點(diǎn)可以理解為，老王有洗衣服的這個(gè)方法，他給老張打電話讓他來洗衣服，老張本身是(maybe)不會(huì)洗衣服的，但是因?yàn)檫@通電話他就要去洗了。

這樣就好理解了，call()的兩個(gè)(類)參數(shù)，第一個(gè)是要執(zhí)行函數(shù)／洗衣服的this(對象)／老張，從第二個(gè)開始是這個(gè)函數(shù)的參數(shù)／要洗哪些衣服，而返回值就是這個(gè)方法本身的返回值／涼到陽臺(tái)

再往簡單的理解一下，call()的執(zhí)行，其實(shí)就是在執(zhí)行fun本身，只不過改變了執(zhí)行這個(gè)函數(shù)的對象(this)

怎么call？

弄明白(maybe)call()的定義之后，腦中又浮現(xiàn)出了那個(gè)陰魂不散的題目

var name = "The Window";
var object = {
　　name : "My Object",
　　getNameFunc : function(){
　　　　return function(){
　　　　　　return this.name;
　　　　};
　　}
};
alert(object.getNameFunc()());//The Window

詳情在我的另一片文章javascript對象不完全探索記錄01：this! which？- lskrat中
這題讓人懵逼的原因，就是這里面的this到底是which，出現(xiàn)“The Window”的原因說到底是因?yàn)閳?zhí)行object.getNameFunc()的是Window對象

所以為了能夠得到期待的結(jié)果，是不是可以通過call()喊來object自己來執(zhí)行呢，這就試試！

alert(object.getNameFunc().call(object));//My Object

真是效果拔群到想為call()打call！如此顯著的療效，都能用在哪呢？

打什么call？

我就來試著總結(jié)一下call()都有什么用處吧//本章節(jié)陸續(xù)補(bǔ)充

1.防止懵逼，指定this
這條的來源，看過上文就都知道了，對this目標(biāo)懵逼的同學(xué)們，可以用call()來直接指定this，就讓你來執(zhí)行！
舉例：見上文

2.實(shí)現(xiàn)繼承
繼承，作為面向?qū)ο笳Z言的基礎(chǔ)特性，在javascript中有很多的實(shí)現(xiàn)方式，其中一種就是用call()

function Food(name, price) {
    this.name = name,
    this.price = price,
    this.getPrice = function() {
        console.log("吃一份" + this.name + "需要" + this.price + "塊錢！貧窮使的我保持身材")
    }
}

function RouJiaMo() {
    Food.call(this, "肉夾饃", 5);
}

var rouJiaMo = new RouJiaMo()
rouJiaMo.getPrice();//吃一份肉夾饃需要5塊錢！貧窮使得我保持身材

在創(chuàng)建實(shí)例rouJiaMo時(shí)，將Food()中的this換成了RouJiaMo，這也就在使得rouJiaMo不但可以擁有和Food中一樣的內(nèi)部變量并賦值，并且可以調(diào)用其內(nèi)部函數(shù)，從而形成了繼承