資訊專欄INFORMATION COLUMN
摘要：本文章記錄本人在學(xué)習(xí)中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。但是在開發(fā)的過程中，并不是所有的代碼復(fù)用都會(huì)使用到繼承。而且整個(gè)代碼都無法按照預(yù)期來運(yùn)行。為了修復(fù)綁定對(duì)象與方法之間的關(guān)系。
js 中復(fù)用代碼本文章記錄本人在學(xué)習(xí) JavaScript 中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復(fù)習(xí)。
說道代碼復(fù)用，一般都會(huì)涉及到對(duì)象繼承。在js中有許多可以選擇的繼承方法。這些方法對(duì)于學(xué)習(xí)和理解多種不同的模式有很大的好處，因?yàn)樗鼈冇兄谔峁?duì)語言的掌握程度。
但是在開發(fā)的過程中，并不是所有的代碼復(fù)用都會(huì)使用到繼承。其中一部原因在于，事實(shí)上使用的js庫(kù)可能以這樣的或那樣的方式解決了該問題。而另一方面的原因就在于很少需要在js中建立長(zhǎng)而且復(fù)雜的繼承鏈。在靜態(tài)強(qiáng)類型語言中，繼承可以能是唯一復(fù)用代碼的方法。在js中，經(jīng)常有更加簡(jiǎn)潔而且優(yōu)美的方法。包括：借用方法、綁定、復(fù)制屬性以及從多個(gè)對(duì)象中混入屬性等許多方法。
混入混入是針對(duì)通過屬性復(fù)制實(shí)現(xiàn)繼承的思想做進(jìn)一步的擴(kuò)展，mix-in模式并不是復(fù)制一個(gè)完整的對(duì)象，而是從多個(gè)對(duì)象中復(fù)制出任意的成員并將這些成員組合成新的對(duì)象。
實(shí)現(xiàn)mix-in：
function mix() {
var arg, prop, child = {};
for (arg = 0; arg < arguments.length; arg += 1) {
for (prop in arguments[arg]) {
if (arguments[arg].hasOwnProperty(prop)) {
child[prop] = arguemnts[arg][prop];
}
}
}
return child;
}
mix-in實(shí)現(xiàn)非常簡(jiǎn)單，只需要遍歷每個(gè)參數(shù)，并且復(fù)制出傳遞給該函數(shù)的每個(gè)對(duì)象中的每個(gè)屬性。
借用方法有的時(shí)候，我們只需要對(duì)象中的一兩個(gè)方法，但是又不想和對(duì)象形成父-子繼承關(guān)系。只是想是用所需要的方法，而不希望繼承所有那些永遠(yuǎn)用不到的屬性和方法。在這種情況下，可以通過使用借用方法模式來實(shí)現(xiàn)。
而這個(gè)方法是受益于call()和apply()的。js中函數(shù)也是對(duì)象，并且它們自身也存在一些屬性和方法，比如call和apply()。
使用call()和apply()分別借用方法：
// call notmyobj.doStuff.call(myobj, param1, p2, p3); // apply notmyobj.doStuff.apply(myobj, [param1, p2, p3]);
在知道notmyobj對(duì)象上有doStuff方法的情況下，又想不繼承notmyobj來使用doStuff方法。這個(gè)使用call()和apply()就派上用場(chǎng)了。
還有一個(gè)場(chǎng)景是經(jīng)常使用到借用方法的。那就是借用數(shù)組方法。因?yàn)閿?shù)據(jù)具有許多很強(qiáng)大的方法，而且有時(shí)候需要操作arguments的時(shí)候會(huì)用上。但是arguments是一個(gè)偽數(shù)組，不具有原生數(shù)組強(qiáng)大的方法。這個(gè)使用借用方法就派上用場(chǎng)了：
function f() {
var args = [].slice.call(arguemnts, 1, 3);
return args;
}
借用和綁定
考慮到借用方法不是通過調(diào)用call和apply()就是通過簡(jiǎn)單的復(fù)制，在借用方法的內(nèi)部，this所指向的對(duì)象是基于調(diào)用表達(dá)式而確定的，但是有的時(shí)候“鎖定”this的值，或者將其綁定到特定的對(duì)象并且預(yù)先確定該對(duì)象。
舉一栗子：
var one = {
name: "object",
say: function (greet) {
return greet + ", " + this.name;
}
};
// 測(cè)試
one.say("hi"); // hi, object
接著另一對(duì)象two中沒有say()方法，借用one的say()方法：
var two = {
name: "another object"
}
// 測(cè)試
one.say.call(two, "hi"); // hi, another object
在上面的例子中，借用的say()方法的this是指向two的。但是在什么樣的場(chǎng)景中，應(yīng)該將函數(shù)指針賦值給一個(gè)全局變量，或者將該函數(shù)做為回調(diào)函數(shù)來傳遞？在客戶端編程中有許多事件和回調(diào)，因此確實(shí)發(fā)生了許多這樣混淆的事件。
舉一個(gè)栗子：
// 給變量賦值
// this 將指向全局變量
var say = one.say;
say("hello") // hello, undefined
// 作為回調(diào)傳遞
var yetanother = {
name: "yet another object",
method: function (callback) {
return callback("hola");
}
};
// 測(cè)試
yetanother.method(one.say) // holla, undefined
在上面的兩種情況下，say()方法的this值都是指向全局對(duì)象。而且整個(gè)代碼都無法按照預(yù)期來運(yùn)行。為了修復(fù)（綁定）對(duì)象與方法之間的關(guān)系?？梢允褂靡粋€(gè)簡(jiǎn)單的函數(shù)來實(shí)現(xiàn)：
function bind(o, m) {
return function () {
return m.apply(o, [].slice.call(arguments))
}
上面的bind()方法接受兩個(gè)參數(shù)。一個(gè)是對(duì)象o，另一個(gè)是方法m，并將兩者綁定起來。然后返回一個(gè)函數(shù)。
使用bind()來解決問題：
var twosay = bind(two, one.say);
twosay("yo"); // yo another object
ES5 bind()奢侈的擁有綁定所需要輔助的代價(jià)就是額外的閉包的開銷。
在ECMAScript5中給Function.protoype添加了一個(gè)bind()方法，使得bind()與call()、apply()一樣簡(jiǎn)單易用。
但是在不支持ECMAScript5的運(yùn)行環(huán)境下，我們可以自己實(shí)現(xiàn)一個(gè)bind()方法（來自 MDN）：
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis
? this
: oThis || window,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
然后使用自帶的bind()方法來重寫一下上面的栗子：
var twosay = bind(two, one.say);
twosay("Bonjour"); // yo another object
最后，如果文章有什么錯(cuò)誤和疑問的地方，請(qǐng)指出。與sf各位共勉！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/85800.html
摘要：屬性校驗(yàn)隨著應(yīng)用的增長(zhǎng)，確保你的組件正確使用是有必要的?；烊朐诋?dāng)中，組件復(fù)用能夠減少我們的代碼量。官方舉例說明的一種情況一個(gè)組件，每隔一段時(shí)間更新一次。提供了組件生命周期的方法告訴我們組件什么時(shí)候被創(chuàng)建和銷毀。 當(dāng)我們?cè)谠O(shè)計(jì)接口的時(shí)候，將一些常見的設(shè)計(jì)元素（如按鈕、表單、布局等）拆分成有著良好接口的可重用的組件。這樣的話，下次你構(gòu)建UI的時(shí)候只要寫少量的代碼。 屬性校驗(yàn) 隨著應(yīng)用的...
摘要：最近一段時(shí)間在學(xué)習(xí)，由于覺得直接使用它需要加載很多的文件，因此想使用來實(shí)現(xiàn)異步加載，并動(dòng)態(tài)注入控制器。手動(dòng)啟動(dòng)，特別說明此處的不是那個(gè)框架，而是的一個(gè)手動(dòng)啟動(dòng)框架的函數(shù)中完成了各模塊的初始化，并且引入了。 最近一段時(shí)間在學(xué)習(xí)angularjs，由于覺得直接使用它需要加載很多的js文件，因此想使用requirejs來實(shí)現(xiàn)異步加載，并動(dòng)態(tài)注入控制器。簡(jiǎn)單搜索了下發(fā)現(xiàn)好多教程寫的都很復(fù)雜，所...
摘要：注本文首發(fā)于個(gè)人博客學(xué)習(xí)筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學(xué)習(xí)筆記。使用自定義屬性來設(shè)置變量名，并使用特定的來訪問。二學(xué)習(xí)筆記聲明調(diào)用聲明方式變量聲明的方式非常簡(jiǎn)單，如下，聲明了一個(gè)名叫的變量。 注：本文首發(fā)于個(gè)人博客 《CSS Variables學(xué)習(xí)筆記》。 最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學(xué)習(xí)筆記。 ...
摘要：二還有一點(diǎn)也是思想不容易轉(zhuǎn)過彎的一點(diǎn)，就是我在學(xué)習(xí)前端時(shí)，接觸的思想都是需要我們將者分開，方便維護(hù)。但是在學(xué)習(xí)了接觸了單文件組件之后，世界又變了，又讓我們將同一個(gè)組件的放到一個(gè)文件中，這樣又便于維護(hù)和復(fù)用，這一臉的懵那啥。 Vue.js 介紹 官方介紹： Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖...
摘要：第二個(gè)是其值是或，確認(rèn)是否深入監(jiān)聽。一般監(jiān)聽時(shí)是不能監(jiān)聽到對(duì)象屬性值的變化的，數(shù)組的值變化可以聽到第三個(gè)是其值是或，確認(rèn)是否以當(dāng)前的初始值執(zhí)行的函數(shù)?；旌隙x來分發(fā)組件中的可復(fù)用功能結(jié)束，撒花文章已同步我的筆記，歡迎大家加，加后人生更加美好 vue.js記錄 文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后...
閱讀 3058·2023-04-26 00:49
閱讀 3725·2021-09-29 09:45
閱讀 987·2019-08-29 18:47
閱讀 2746·2019-08-29 18:37
閱讀 2728·2019-08-29 16:37
閱讀 3295·2019-08-29 13:24
閱讀 1778·2019-08-27 10:56
閱讀 2349·2019-08-26 11:42
