資訊專欄INFORMATION COLUMN
摘要：構(gòu)造函數(shù)模式問題每個方法都要在每個實例上重新創(chuàng)建一遍。構(gòu)造函數(shù)在不返回值的情況下，默認(rèn)會返回新對象實例。在默認(rèn)情況下，所有原型對象都會自動獲得一個構(gòu)造函數(shù)屬性，這個屬性是一個指向?qū)傩运诤瘮?shù)的指針。。
創(chuàng)建對象的方式
1、工廠模式
在函數(shù)里，new 一個 Object，然后根據(jù)傳入的參數(shù)給該對象添加屬性，最后返回該對象。問題：無法知道一個對象的類型。
2、構(gòu)造函數(shù)模式
問題：每個方法都要在每個實例上重新創(chuàng)建一遍。解決：在全局作用域中定義全局函數(shù)。當(dāng)然，這會導(dǎo)致封裝性很差。
3、原型模式
每個函數(shù)都有一個 prototype（原型）屬性，這個屬性是一個指針，指向一個對象(指向該函數(shù)的原型對象)，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。如果按照字面意思來理解，那么 prototype 就是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個對象實例的原型對象。使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法。
缺點：原型中所有屬性是被很多實例共享的，這種共享對于函數(shù)非常合適。但是對于包含引用類型值的屬性問題就突出了。
4、組合使用構(gòu)造函數(shù)模式和原型模式
構(gòu)造函數(shù)模式用于定義實例屬性，而原型模式用于定義方法和共享的屬性。
結(jié)果，每個實例都會有自己的一份實例屬性的副本，但同時又共享著對方法的引用，最大限度地節(jié)省了內(nèi)存。另外，這種混成模式還支持向構(gòu)造函數(shù)傳遞參數(shù)；可謂是集兩種模式之長。
5、動態(tài)原型模式
在構(gòu)造函數(shù)中這么寫共享的方法和屬性：
// 方法
if (typeof this.sayName != "function") {
Person.prototype.sayName = function() {
alert(this.name);
};
}
6、寄生構(gòu)造函數(shù)模式
基本思想：創(chuàng)建一個函數(shù)，該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼，然后再返回新創(chuàng)建的對象。
function Person(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
alert(this.name);
};
return o;
}
var friend = new Person("Amy", 18, "student");
friend.sayName(); // Amy
構(gòu)造函數(shù)在不返回值的情況下，默認(rèn)會返回新對象實例。而通過在構(gòu)造函數(shù)的末尾添加一個 return 語句，可以重寫調(diào)用構(gòu)造函數(shù)時返回的值。
用法：這個模式可以在特殊的情況下用來為對象創(chuàng)建構(gòu)造函數(shù)。假設(shè)我們想創(chuàng)建一個具有額外方法的特殊數(shù)組。由于不能直接修改 Array 構(gòu)造函數(shù)，因此可以使用這個模式。
function SpecialArray() {
// 創(chuàng)建數(shù)組
var values = new Array();
// 添加值
values.push.apply(values, arguments);
// 添加方法
values.toPipedString = function() {
return this.join("|");
};
// 返回數(shù)組
return values;
}
var colors = new SpecialArray("red", "green", "blue");
alert(colors.toPipedString()); // red|green|blue
關(guān)于寄生構(gòu)造函數(shù)模式，有一點需要說明：
首先，返回的對象與構(gòu)造函數(shù)或者與構(gòu)造函數(shù)的原型屬性之間沒有關(guān)系；也就是說，構(gòu)造函數(shù)返回的對象與在構(gòu)造函數(shù)外部創(chuàng)建的對象沒有什么不同。為此，不能依賴 instanceof 操作符來確定對象類型。
1 創(chuàng)建一個新對象；
2 將構(gòu)造函數(shù)的作用域賦給新對象（因此 this 就指向了這個新對象）；
3 執(zhí)行構(gòu)造函數(shù)中的代碼（為這個新對象添加屬性）；
4 返回新對象。
理解原型對象所有函數(shù)都有一個 prototype 屬性，這個屬性指向函數(shù)的原型對象。
在默認(rèn)情況下，所有原型對象都會自動獲得一個 constructor (構(gòu)造函數(shù))屬性，這個屬性是一個指向 prototype 屬性所在函數(shù)的指針。
eg. Person.prototype.constructor => Person。
當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個新實例后，該實例的內(nèi)部將包含一個指針（內(nèi)部屬性[[Prototype]]），指向構(gòu)造函數(shù)的原型對象。注意：這個連接存在于實例與構(gòu)造函數(shù)的原型對象之間，而不是存在于實例與構(gòu)造函數(shù)之間。實例 => 構(gòu)造函數(shù)的原型對象
判斷某個實例的原型指針是否指向某個函數(shù)的原型對象：
Person.prototype.isPrototypeOf(person1) // true Object.getPrototypeOf(person1) === Person.protype // true
hasOwnProperty() 方法：檢測一個屬性是存在于實例中，還是存在于原型中。只有存在于實例中時，才返回 true。
in 操作符：實例和原型中的屬性都能訪問到。
同時使用 hasOwnProperty() 方法和 in 操作符，就可以確定該屬性到底是存在于對象中，還是存在于原型中。
Object.keys() 方法：取得對象上所有可枚舉的實例屬性。 Object.getOwnPropertyNames() 方法：得到所有實例屬性（包括不可枚舉屬性）。重寫原型會怎么樣？
Person.prototype = {…}：
我們將 Person.prototype 設(shè)置為等于一個以對象字面量形式創(chuàng)建的新對象。 最終結(jié)果相同，但有一個例外：constructor 屬性不再指向 Person 了。前面曾經(jīng)介紹過，每創(chuàng)建一個函數(shù)，就會同時創(chuàng)建它的 prototype 對象，這個對象也會自動獲得 constructor 屬性。而我們在這里使用的語法，本質(zhì)上完全重寫了默認(rèn)的 prototype 對象，因此 constructor 屬性也就變成了新對象的 constructor 屬性（指向 Object 構(gòu)造函數(shù)），不再指向 Person 函數(shù)。此時，盡管 instanceof 操作符還能返回正確的結(jié)果，但通過 constructor 已經(jīng)無法確定對象的類型了。
1、原型鏈繼承
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95130.html
摘要：前言最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎(chǔ)試題主要考察前端技基礎(chǔ)是否扎實，是否能夠?qū)⑶岸酥R體系串聯(lián)。 前言 最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎(chǔ)試題: 主要考察前端技基礎(chǔ)是否扎實，是否能夠?qū)⑶岸酥R體系串聯(lián)。一種是開放式問題: 考察業(yè)務(wù)積累，是否有自己的思考，思考問題的方式，這類問題沒有標(biāo)準(zhǔn)答案。 基礎(chǔ)題 題目的答...
摘要：筆者作為一位，將工作以來用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續(xù)更新… 一、...
摘要：筆者作為一位，將工作以來用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續(xù)更新… 一、...
平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
閱讀 3498·2021-11-18 10:02
閱讀 3749·2021-09-13 10:25
閱讀 1950·2021-07-26 23:38
閱讀 2612·2019-08-30 15:44
閱讀 2311·2019-08-30 13:51
閱讀 1255·2019-08-26 11:35
閱讀 2298·2019-08-26 10:29
閱讀 3474·2019-08-23 14:56
