国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

快速理解JavaScript中apply()和call()的用法和用途

chenjiang3 / 1155人閱讀

摘要：在學(xué)習(xí)之前，我們必須對的作用和使用方法有所了解，可以參考我前一篇文章快速理解中的用法與陷阱。和的作用十分相似，只是參數(shù)類型上的差別，以適應(yīng)不同的使用場景。

在學(xué)習(xí)apply()之前，我們必須對this的作用和使用方法有所了解，可以參考我前一篇文章《快速理解JavaScript中this的用法與陷阱》。當(dāng)然如果你已經(jīng)熟悉this的相關(guān)知識，那么請直接往下看。

call()和apply()的作用十分相似，只是參數(shù)類型上的差別，以適應(yīng)不同的使用場景。它們都是為了改變函數(shù)運行時的 context（上下文）而存在的，再說的直白一點，就是為了改變函數(shù)內(nèi)部 this 的指向。

恩？什么？我似乎聽到你說改變this的指向？？那就是說。。。

沒錯！這樣就可以實現(xiàn)繼承啦！Exciting！

看下面的代碼：

以下代碼必須看過《瘋狂動物城》才可看懂（逃）

function animal(name,food) {
   this.name = name,
    this.food = food,
   this.say = function() {
        console.log(name +" likes " + this.food + ".");
   }
}

function rabbit(name,food) {
   animal.call(this,name,food);
}

var Judy = new rabbit("Judy","carrot");

Judy.say();// >>> Judy likes carrot.

可以看出，我們聲明了一個叫Judy的對象，我們并沒有在rabbit對象里添加任何屬性和方法，但是我們使用call()繼承了原本屬于animal的屬性和方法。就可以做到animal函數(shù)所有能做到的事情。

這到底是怎么做到的呢？讓我們來看看call()的參數(shù)：
第一個是一個對象，這個對象將代替Function類里原本的this對象，我們傳入的是this，記住，這個this在rabbit函數(shù)里指的是未來將要實例化這個函數(shù)的對象（我知道這有些拗口），當(dāng)聲明了Judy的時候，這個this指的就是Judy。
除了第一個參數(shù)，后面所有的參數(shù)都是傳給父函數(shù)本身使用的參數(shù)。

而apply()和call()功能幾乎一樣，唯一的區(qū)別就是apply()第二個參數(shù)只能是數(shù)組，這個數(shù)組將作為參數(shù)傳給原函數(shù)的參數(shù)列表arguments。

其實在實際開發(fā)中，JS 繼承的方法并不止這一種，使用原型鏈繼承是更加常用的方式，此外還有構(gòu)造函數(shù)繼承，這里不展開。而apply使用的場景，更多的使用在這樣一個場景：

需要將數(shù)組轉(zhuǎn)化為參數(shù)列表。

apply()的這個把數(shù)組轉(zhuǎn)化為參數(shù)列表的特性，可以讓它做一些有趣的事情。

例如，push()方法的參數(shù)只能是一個或者多個參數(shù)，而不能是一個數(shù)組，當(dāng)我們想要將數(shù)組B拼接到數(shù)組A后面時，傳統(tǒng)的做法是遍歷數(shù)組B，每循環(huán)一次就push進數(shù)組A后面，這樣就浪費了push()可以傳多個參數(shù)的功能。
我們可以這樣做：

var list1 = [0,1,2];
var list2 = [3,4,5];
[].push.apply(list1,list2);

console.log(list1);// >>> [0,1,2,3,4,5]

看起來有點糊涂嗎？可以這樣理解：
list1調(diào)用了屬于數(shù)組對象的push方法，這個push方法需要傳入一個參數(shù)列表，而恰好我們有了list2這個數(shù)組類型的參數(shù)列表，實現(xiàn)了拼接操作。
第三行就相當(dāng)于：

list1.push(3,4,5);

看，apply多么神奇！同樣的，Math對象下的max()和min()等方法都只支持參數(shù)列表而不是數(shù)組，能做什么事情，你應(yīng)該猜到了吧？

此外還有許多地方apply()的這個特性帶來很多便利：比如函數(shù)式編程中的currying（柯里化），apply()都有著不可或缺的作用。

既然說到這，那下一篇文章我就帶大家認(rèn)識函數(shù)柯里化。今天有點晚了，先休息啦~

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78874.html

相關(guān)文章

  • JavaScript 函數(shù)作用域、執(zhí)行環(huán)境(this)、call、apply、bind 的用法

    摘要：什么是函數(shù)的作用域函數(shù)作用域在中，作用域為可訪問變量，對象，函數(shù)的集合。函數(shù)作用域作用域在函數(shù)內(nèi)修改。與函數(shù)又有什么關(guān)系呢對象是在運行時基于函數(shù)的執(zhí)行環(huán)境綁定的。 什么是函數(shù)的作用域 函數(shù)作用域：在 JavaScript 中，作用域為可訪問變量，對象，函數(shù)的集合。JavaScript 函數(shù)作用域: 作用域在函數(shù)內(nèi)修改。 this 與函數(shù)又有什么關(guān)系呢？ this對象是在運行時基于函數(shù)的...

    1fe1se 評論0 收藏0

  • JavaScript也玩私人訂制——玩轉(zhuǎn)函數(shù)柯里化

    摘要：而柯里化是一個屬于函數(shù)式編程的一個常見的技巧。簡單來說，函數(shù)柯里化就是對高階函數(shù)的降階處理。讓你意外的是，這就是柯里化的基本思想，簡單地讓人猝不及防。 函數(shù)式編程是一種被部分JavaScript程序員推崇的編程風(fēng)格，更別說 Haskell 和 Scala 這種以函數(shù)式為教義的語言。原因是因為其能用較短的代碼實現(xiàn)功能，如果掌握得當(dāng)，能達到代碼文檔化（代碼本身具有很高可讀性甚至可以代替文檔...

    MRZYD 評論0 收藏0

  • 「前端面試題系列6」理解函數(shù)的柯里化

    摘要：原題如下寫一個方法，當(dāng)使用下面的語法調(diào)用時，能正常工作這道題要考察的，就是對函數(shù)柯里化的理解。當(dāng)參數(shù)只有一個的時候，進行柯里化的處理。這其實就是函數(shù)柯里化的簡單應(yīng)用。 showImg(https://segmentfault.com/img/bVbopGm?w=620&h=350); 前言 這是前端面試題系列的第 6 篇，你可能錯過了前面的篇章，可以在這里找到： ES6 中箭頭函數(shù)的...

    liaorio 評論0 收藏0

  • Know this, use this! (總結(jié) this 的常見用法)

    摘要：而當(dāng)做普通函數(shù)調(diào)用的話，實際上即第種情況下，對函數(shù)普通調(diào)用，此時的指向這是正常情況下，會正確返回并且指向該對象，但是在構(gòu)造函數(shù)當(dāng)中，如果返回了一個對象，那么會指向返回的那個對象。 this應(yīng)該是一個討論了很久的話題了。其中，關(guān)于this的文章，在很多的博客當(dāng)中也有很多介紹，但是，以前我都是一知半解的去了解它，就是看博客當(dāng)中，只介紹了一些情況下的 this 的使用方式，但是也并沒有自己去...

    zorro 評論0 收藏0

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

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

    wenhai.he 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<