資訊專欄INFORMATION COLUMN
摘要：通過實現(xiàn)鏈?zhǔn)秸{(diào)用來理解鏈?zhǔn)秸{(diào)用是我們平常經(jīng)常會用到，比如中的還有中的。直接用一個匿名函數(shù)返回一個的對象，然后賦值給并掛載到全局上，這樣就實現(xiàn)了一個的鏈?zhǔn)秸{(diào)用了。
通過實現(xiàn)鏈?zhǔn)秸{(diào)用來理解
?? 鏈?zhǔn)秸{(diào)用是我們平常經(jīng)常會用到，比如JQuery中的$("id").eq(0), 還有l(wèi)odash中的_.chain().push()。 這些都是平常會用到的，但是都是已經(jīng)封裝好的，我們知道用起來很方便卻不知道實現(xiàn)的原理是什么。
?? 其實呢它并沒有很神秘，只不過是一種語法招數(shù)，它能讓你通過重用一個初始操作來達到用少量代碼表達復(fù)雜操作的目的。
通過例子來分析鏈?zhǔn)秸{(diào)用
??其實鏈?zhǔn)秸{(diào)用就是讓一個類的每個方法都返回this值，從而達到鏈?zhǔn)秸{(diào)用
??首先創(chuàng)建一個構(gòu)造函數(shù),把那些元素作為數(shù)組保存在一個實例屬性中，并把所有定義在構(gòu)造器函數(shù)的 prototype屬性指向?qū)ο笾械姆椒ǘ挤祷赜靡哉{(diào)用方法的那個實例的引用，那么它就具有了進行鏈?zhǔn)秸{(diào)用的能力
我們來看一下這段例子
$("div")
.eq(0)
.css("width", "200px")
.show();
這其實就是一段簡單JQuery代碼，選擇第一個div設(shè)置css樣式，然后將它顯示出來。
function JQuery(selector) {
this.elements = document.querySelectorAll(selector);
}
JQuery.prototype = {
eq: function(index) {
this.elements = [this.elements[index]]
return this;
},
css: function(prop, value) {
this.elements.forEach(function(el) {
// 動態(tài)設(shè)置屬性
el.style[prop] = value;
})
return this;
},
show: function() {
this.css("display", "block")
return this;
},
}
這段代碼很明顯在prototype上的三個函數(shù)都返回了this，在函數(shù)中實現(xiàn)對應(yīng)的功能也是直接使用this來獲取值，然后修改this中的值再返回this，這樣在下次調(diào)用的時候還是JQuery對象，從而實現(xiàn)了鏈?zhǔn)秸{(diào)用。
??既然函數(shù)都是在原型鏈上，那么肯定需要創(chuàng)建一個對象才能去調(diào)用函數(shù)吧，而我們并沒看到new JQuery，而且也沒有看見$符號，那怎么才能使用呢。
window.$ = function(selector) {
return new JQuery(selector);
}
$("div")
.eq(0)
.css("width", "200px")
.show();
直接用一個匿名函數(shù)返回一個new JQuery()的對象，然后賦值給$并掛載到全局上，這樣就實現(xiàn)了一個JQuery的鏈?zhǔn)秸{(diào)用了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99672.html
摘要：相信很多小伙伴在面試的過程中都被問過鏈?zhǔn)秸{(diào)用的原理，甚至有些面試官還會讓你用其實現(xiàn)例如加法操作，舉例第一次看到這個題目時，或許你沒有什么頭緒，不要緊，讓我們慢慢來首先，大家還是否記得在使用時，我們會經(jīng)常這樣去操作一個節(jié)點這是怎么做到的原理很 相信很多小伙伴在面試的過程中都被問過js鏈?zhǔn)秸{(diào)用的原理，甚至有些面試官還會讓你用其實現(xiàn)例如加法操作，舉例： add(1)(2)(3) //6...
摘要：本回內(nèi)容介紹上一回，聊了聊狀態(tài)模式，并介紹了一下介一回，聊鏈?zhǔn)骄幊蹋M一下，再模擬一下封裝一個庫。這一回，主要聊了鏈?zhǔn)秸{(diào)用，模擬了，尤其是，希望大家能喜歡這次代碼分享。下一回，聊一聊的策略模式。 本回內(nèi)容介紹 上一回，聊了聊狀態(tài)模式（State），并介紹了一下vue.js；介一回，聊鏈?zhǔn)骄幊蹋M一下jQuery，再模擬一下underscore.js,封裝一個庫。 1. 鏈?zhǔn)秸{(diào)用 (...
摘要：單體模式在多種設(shè)計模式中，單體模式是最簡單，也是最基礎(chǔ)的設(shè)計模式。和之前說到的下劃線表示私用成員方法比較起來，最大的優(yōu)點就是可以創(chuàng)建真正的私用成員，使其不會在構(gòu)造函數(shù)之外被隨意修改。 單體模式 在多種Javascript設(shè)計模式中，單體模式是最簡單，也是最基礎(chǔ)的設(shè)計模式。它基礎(chǔ)到似乎不太像是一種設(shè)計模式，因為我們在編寫代碼的過程中隨時都會用到，并不需要過多思考，這是它簡單的一面。同時...
摘要：最后畫幾張粗糙的圖，簡單描述一下這個執(zhí)行的過程因為是鏈?zhǔn)秸{(diào)用，所以在鏈上的都會入棧然后執(zhí)行，額，執(zhí)行棧少畫了和。。。 前言：昨天在群里討(jin)論(chui)技(niu)術(shù)(pi)，有位老鐵發(fā)了一道他面的某公司面試題，順手保存了。今早花了一點時間把這題做了出來，發(fā)現(xiàn)挺有意思的，決定在今天認真工（hua)作(shui)前，與大家分享我的解題方案和思考過程。 題目如下（可以自己先思考一會...
摘要：鏈?zhǔn)侥Ｊ酵ㄟ^在對象方法中將當(dāng)前對象返回，實現(xiàn)對同一個對象多個方法的鏈?zhǔn)秸{(diào)用。我們試著修改上面的函數(shù)然后執(zhí)行為什么會報錯呢因為這里，因為這里返回的指向的是，而不是的上并沒有這個方法。 ??鏈?zhǔn)侥Ｊ剑和ㄟ^在對象方法中將當(dāng)前對象返回，實現(xiàn)對同一個對象多個方法的鏈?zhǔn)秸{(diào)用。從而簡化對該對象的多個方法的多次調(diào)用，對該對象的多次引用。 ??jquery是基于原型繼承，每個原型下的方法都返回當(dāng)前對象...
閱讀 2538·2023-04-26 00:57
閱讀 911·2021-11-25 09:43
閱讀 2221·2021-11-11 16:55
閱讀 2207·2019-08-30 15:53
閱讀 3592·2019-08-30 15:52
閱讀 1459·2019-08-30 14:10
閱讀 3379·2019-08-30 13:22
閱讀 1209·2019-08-29 11:18
