Js高級編程筆記--面向?qū)ο蟮某绦蛟O計

gclove 發(fā)布于2019-08-23 14:26 / 1728人閱讀

摘要：在沒有必要創(chuàng)建構(gòu)造函數(shù)，只想讓一個對象與另一個對象保持類似的情況下，原型式繼承是完全可以勝任的。方便我們進行面向?qū)ο蟮木幊獭?/p>

理解對象 屬性類型 1.數(shù)據(jù)屬性

特性：

Configurable : 表示能否通過 delete 刪除屬性，能否修改屬性特性，能否把屬性改為訪問器屬性

Enumerable ：表示能否通過 for in 循環(huán)返回

Writable : 表示能否修改屬性的值

Value ：包含屬性的值，讀取或?qū)懭雽嶋H上操作的是這個值

2.訪問器屬性

特性：

Configurable : 表示能否通過 delete 刪除屬性，能否修改屬性特性，能否把屬性改為訪問器屬性

Enumerable ：表示能否通過 for in 循環(huán)返回

Get : 讀取時調(diào)用的參數(shù).默認值為 undefined

Set ：寫入時調(diào)用的參數(shù)。默認值為 undefined

3.注意：

訪問器屬性不能直接定義，必須使用 Object.defineProperty()定義。

修改屬性默認的特性，必須使用 Object.defineProperty()方法

get,set,并不一定要定義，只定義 get 為只讀，只定義 set 為只寫不可讀。

定義多個屬性可以使用 Object.defineProperties()方法

讀取屬性的特性，使用 Object.getOwnPropertyDescriptor()

創(chuàng)建對象 1.工廠模式

定義一個方法接受參數(shù)，用于創(chuàng)建對象，并將其返回

function createPerson(name, age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    return o;
}
var person1 = createPerson("andy_chen", 18);
var person2 = createPerson("andy_chen", 18);

工廠模式可以創(chuàng)建多個相似對象的問題，卻沒解決對象識別的問題。例如person1的類型是什么

2.構(gòu)造函數(shù)模式 :

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function() {
        alert(this.name);
    };
}
var person1 = new Person("andy_chen", 18);
var person2 = new Person("andy_chen", 18);
person1.sayName();
person2.sayName();

使用 new 操作符。實際上有以下 4 個步驟:

創(chuàng)建一個新對象

將構(gòu)造函數(shù)的作用域賦給對象（使 this 指向新對象）

執(zhí)行構(gòu)造方法（為這個對象添加屬性）

返回新對象

構(gòu)造函數(shù)的問題在于，每個方法都要在每個實例中重新創(chuàng)建一遍。即例子中，person1和person2的sayName的不相等的。
但是，完成同樣的功能的方法，卻每個實例都要創(chuàng)建一遍，這顯然不合理，所以，又出現(xiàn)了下面的原型模式

3.原型模式： 理解原型對象

一圖勝千言：

只要創(chuàng)建了一個新函數(shù)，就會根據(jù)一組特定規(guī)則為該函數(shù)創(chuàng)建一個 prototype，這個屬性指向函數(shù)的對象原型。

對象原型中，則默認有一個 constructor 屬性，指向該新函數(shù)。

通過新函數(shù)創(chuàng)建的實例，有一個[[prototype]]屬性（在 chrome，firefox，safari 中該屬性即為proto），指向了新函數(shù)的 prototype。

注意：該屬性僅僅是執(zhí)行構(gòu)造函數(shù)的 prototype，也即是說，他們與構(gòu)造函數(shù)沒有直接聯(lián)系了

讀取某個對象的屬性時，會先在實例上找，如果沒找到，則進一步在實例上的 prototype 屬性上找

為實例添加屬性的時候會屏蔽掉原型上屬性。這個時候即使置為 null 也沒法訪問到原型上的屬性，只有通過 delete 刪掉之后才可以

XXX.prototype.isPrototype(xxx), 可以用這個方法判定對象是否是該實例的原型對象

Object.getPrototypeOf() 用這個可以獲取實例對應的原型對象（ES5 新增方法）

in 操作符

多帶帶使用時： in 操作符可以確定屬性是否存在于對象上（無論是存在于實例上還是原型上）

用于 for 循環(huán)中時，返回的是所有能夠通過對象訪問的，可枚舉的屬性。（IE8 中，如果開發(fā)者自定義 toString 類似的系統(tǒng)不可枚舉的方法，瀏覽器還是不會將它遍歷出來）

ES5：Object.keys() 可以返回一個包含所有可枚舉屬性的字符串數(shù)組
Object.getOwnPropertyNames() 可以返回所有實例屬性，無論是否可枚舉

//原型模式的實現(xiàn)：
function Person() {}

Person.prototype.name = "andy chen";

Person.prototype.sayName = function() {
    alert(this.name);
};

更簡單的原型語法

重寫整個 prototype,不過會導致 constructor 改變。所以需要重新指定 constructor.

//更簡單的原型語法
function Person() {}
Person.prototype = {
    constructor: Person, //因為這種寫法會覆蓋掉原來的Person.prototype,需要重新為constructor賦值
    name: "andy chen",
    sayName: function() {
        alert(this.name);
    }
};
var person1 = new Person();
var person2 = new Person();

原型模式的問題：所有實例都共享一個prototype，類似上面的例子，person1,person2的name屬性是共享的。如果修改其中一個，會導致另一個也受影響。所以，才會出現(xiàn)下面構(gòu)造函數(shù)與原型模式組合使用

4.組合使用構(gòu)造函數(shù)和原型模式

創(chuàng)建自定義類型最常見的方式就是組合使用構(gòu)造函數(shù)和原型模式

構(gòu)造函數(shù)定義實例屬性，而原型模式用于定義方法和共享的屬性. 所以，上面的例子可以改寫成這樣：

function Person(name) {
    this.name = name;
}
Person.prototype = {
    constructor: Person,
    sayName: function() {
        alert(this.name);
    }
};
var person1 = new Person("andy chen");
var person2 = new Person("andy chen");

除了使用組合模式創(chuàng)建對象，還有以下幾種方式，可以針對不同的情況選擇。

5.動態(tài)原型模式

在構(gòu)造方法中，判斷是否是第一次進入使用構(gòu)造方法，如果是，則添加一系列的方法到原型上

6.寄生構(gòu)造函數(shù)模式

類基本思想是創(chuàng)建一個函數(shù)，該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼然后再返回新創(chuàng)建的對象。

7.穩(wěn)妥構(gòu)造函數(shù)模式： 穩(wěn)妥對象

指的是沒有公共屬性，而且其方法也不引用 this 對象。最適合用于一些安全的環(huán)境或者在防止數(shù)據(jù)被其他程序改動時使用

穩(wěn)妥構(gòu)造函數(shù)

遵循與寄生構(gòu)造函數(shù)類似的模式，但有兩點不同：

新創(chuàng)建的對象實例不引用 this.

不使用 new 操作符調(diào)用構(gòu)造函數(shù)

繼承

OO 語言一般擁有兩種繼承方式：接口繼承（只繼承方法簽名）以及實現(xiàn)繼承（繼承實際方法）
ES 無法像其他 OO 語言一樣支持接口繼承，只能依靠原型鏈實現(xiàn) 實現(xiàn)繼承

1. 原型鏈 要了解原型鏈的概念，先回顧一下構(gòu)造函數(shù)，原型和實例之間的關(guān)系（參考圖 6-1）

每個構(gòu)造函數(shù)都有一個原型對象，原型對象包含一個指向構(gòu)造函數(shù)的指針.

每個實例都包含一個指向原型對象的內(nèi)部指針的內(nèi)部屬性（在 chrome 中一般為proto屬性）

那么，如果我們有個新的構(gòu)造函數(shù)，并讓它的原型對象等于另一個類型的實例，結(jié)果會怎樣.

對于這個新的構(gòu)造函數(shù)，它的原型對象就變成了另一個類型的實例，而這個實例中，又包含一個內(nèi)部屬性，指向了另一個原型對象（該原型對象內(nèi)部 constructor 指向另一個構(gòu)造函數(shù)），如果這個原型對象又是另一個類型的實例，則它又包含了一個內(nèi)部屬性，繼續(xù)指向上層的原型對象。這樣層層遞進，就形成了原型鏈。

如下圖：

特點

在實例中搜索屬性的時候，便是基于原型鏈來搜索的，先搜索實例，再在原型鏈上一層層往上搜，直到找到或者到原型鏈末端才會停下來

由于所有引用類型都繼承了 Object，所以原型鏈的最頂層是 Object

使用原型鏈實現(xiàn)繼承時，不能使用對象字面量創(chuàng)建原型方法，因為這樣會重寫原型鏈

原型鏈實現(xiàn)繼承的方式：

function Animal() {
    this.name = "animal";
}
Animal.prototype.getName = function() {
    return this.name;
};

function Cat() {
    this.catName = "cat";
}
Cat.prototype = new Animal();

var cat1 = new Cat();
var cat2 = new Cat();
alert(cat1.getName()); //由于第10行，將Cat的原型指向Animal的實例，因為實例中有指向Animal.prototype的指針。所以，這里可以訪問到getName()

cat1.name = "changed name";
alert(cat2.getName());

原型鏈的問題：

使用原型鏈，由于是使用新的實例作為子類型的原型，實例中卻包含了父類型的屬性，所以原來父類型的屬性，就都到了子類型的原型上了。這就會造成子類型的不同實例會共享同個屬性.如上例子中，第 15 行，改變 cat1 實例的 name 屬性影響到了 cat2 的 name 屬性

創(chuàng)建子類型的時候，不能向父類型傳遞參數(shù)

2. 借用構(gòu)造函數(shù)

由于原型鏈存在問題，所以便出現(xiàn)了借用構(gòu)造函數(shù)的方法
在子類型的構(gòu)造方法中，調(diào)用父類型的構(gòu)造方法:SuperType.call(this); 將父類型的屬性添加到子類型上，并且可以傳遞參數(shù)給父類型

借用構(gòu)造函數(shù)實現(xiàn)繼承的方式：

function Animal() {
    this.name = "animal";
}
function Cat() {
    Animal.call(this);
}
var cat1 = new Cat();
var cat2 = new Cat();
cat1.name = "changed name";
alert(cat1.name); //changed name
alert(cat2.name); //animal //借用構(gòu)造函數(shù)的方式，各實例之間的屬性便不會互相影響

借用構(gòu)造函數(shù)問題：

類似創(chuàng)建對象單純使用構(gòu)造方法一樣，也會造成公有的方法無法公用。所以一般也很少多帶帶使用此方式

3. 組合繼承

組合原型鏈以及借用構(gòu)造函數(shù)

使用原型鏈實現(xiàn)對原型屬性和方法的繼承

借用構(gòu)造函數(shù)來實現(xiàn)對實例中屬性的繼承。

function Animal() {
    this.name = "animal";
}
Animal.prototype.getName = function() {
    return this.name;
};

function Cat() {
    Animal.call(this); //借用構(gòu)造函數(shù)
}
Cat.prototype = new Animal(); //原型鏈方式
Cat.prototype.constructor = Cat;

//這里可以
var cat1 = new Cat();
var cat2 = new Cat();
cat1.name = "changed name";

alert(cat1.getName()); //changed name
alert(cat2.getName()); //animal

組合繼承的問題：

父類的屬性會存在于子類型的原型上，導致被不同實例共享。雖然由于借用構(gòu)造函數(shù)之后，導致實例上又重寫了這些屬性，所以每個實例有各自的屬性。

另外，instanceof 和 isPrototypeOf 能夠識別基于組合繼承創(chuàng)建的對象

**組合繼承，并不完美
因為我們只需要繼承父類型原型上的屬性而已，不需要父類型實例的屬性。
還有更好的方法，但我們首先要先了解一下其他繼承方式**

4. 原型式繼承

//如果o為某個對象的prototype，則object返回的 對象，包含了該對象原型上的所有方法
function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

Es5 新增的 Object.create() ，類似這樣。在沒有必要創(chuàng)建構(gòu)造函數(shù)，只想讓一個對象與另一個對象保持類似的情況下，原型式繼承是完全可以勝任的。不過，包含引用類型值的屬性始終會共享

5. 寄生式繼承

在復制新對象后，繼續(xù)以某種方式增強對象，即為寄生式繼承。

function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
        doSomeThing();
    };
    return clone;
}

在主要考慮對象而不是自定義類型和構(gòu)造函數(shù)的時候，適合使用寄生式繼承

缺點：類似單純的構(gòu)造函數(shù)模式使用，函數(shù)不能復用

6. 寄生組合式繼承

通過原型式繼承，繼承父類的原型方法。再通過構(gòu)造函數(shù)方法，繼承父類的屬性。

function Animal() {
    this.name = "animal";
}
Animal.prototype.getName = function() {
    return this.name;
};

function Cat() {
    Animal.call(this); //借用構(gòu)造函數(shù)
}

//原型繼承方式
function object(superProto) {
    function F() {}
    F.prototype = superProto;
    return new F();
}

Cat.prototype = object(Animal.prototype); //通過一個空的函數(shù)作為媒介，將空函數(shù)的原型指向父類型原型，并將子類型的原型指向這個空函數(shù)的實例。便只繼承父類原型上的屬性及方法
Cat.prototype.constructor = Cat;
//這里可以之后添加子類的方法
Cat.prototype.run = function() {
    alert("cat run");
};

var cat1 = new Cat();
var cat2 = new Cat();
cat1.name = "changed name";
alert(cat1.getName()); //changed name
alert(cat2.getName()); //animal

最后，寄生組合式繼承是引用類型最理想的繼承范式。
上述代碼還能再進一步優(yōu)化。

//原型繼承方式
function object(superProto) {
    function F() {}
    F.prototype = superProto;
    return new F();
}
//公用的繼承方法
function inheritPrototype(subType, superType) {
    subType.prototype = object(superType.prototype);
    subType.prototype.constructor = subType;
}

function Animal() {
    this.name = "animal";
}
Animal.prototype.getName = function() {
    return this.name;
};

function Cat() {
    Animal.call(this); //借用構(gòu)造函數(shù)
}

inheritPrototype(Cat, Animal); //調(diào)用此方法繼承原型

//這里可以之后添加子類的方法
Cat.prototype.run = function() {
    alert("cat run");
};
var cat1 = new Cat();
var cat2 = new Cat();
cat1.name = "changed name";
alert(cat1.getName()); //changed name
alert(cat2.getName()); //animal

小結(jié)

這是 js 對象的創(chuàng)建以及繼承，es6 中新增了關(guān)鍵字class和extend。方便我們進行面向?qū)ο蟮木幊獭?/p>

但是理解背后的繼承原理對我們編程過程中也是極有幫助的

：）

喜歡就收藏或者點個贊唄 ??！

GPU云服務器云服務器面向?qū)ο蟮木幊陶Z言面向?qū)ο缶幊?/a> 高級程序設計-筆記面向?qū)ο骿ava編程

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100598.html

發(fā)表評論

登陸后可評論

0條評論

gclove

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2926·2023-04-26 01:02
W3Space：新加坡vps，AMD Ryzen 9 3900，1核/4GB內(nèi)存/100GB NVM

閱讀 1970·2021-11-17 09:38
服務器如何做空間主機-服務器怎么做成網(wǎng)站空間？

閱讀 874·2021-09-22 15:54
什么是虛擬主機服務-服務器與虛擬主機有什么區(qū)別？

閱讀 2956·2021-09-22 15:29
用十種編程語言開發(fā)計算器應用-第四篇-Kotlin

閱讀 954·2021-09-22 10:02
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

閱讀 3615·2019-08-30 15:54
CSS動畫設計專題（一）：字體特效

閱讀 2101·2019-08-30 15:44
《JavaScript高級程序設計》（第3版）讀書筆記第6章面向?qū)ο蟮某绦蛟O計

閱讀 1656·2019-08-26 13:46

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Js高級編程筆記--面向?qū)ο蟮某绦蛟O計

相關(guān)文章

前端面試知識點目錄整理

前端面試知識點目錄整理

SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

發(fā)表評論

0條評論

gclove

男|高級講師

TA的文章

tensorflow

W3Space：新加坡vps，AMD Ryzen 9 3900，1核/4GB內(nèi)存/100GB NVM

服務器如何做空間主機-服務器怎么做成網(wǎng)站空間？

什么是虛擬主機服務-服務器與虛擬主機有什么區(qū)別？

用十種編程語言開發(fā)計算器應用-第四篇-Kotlin

Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

CSS動畫設計專題（一）：字體特效

《JavaScript高級程序設計》（第3版）讀書筆記第6章面向?qū)ο蟮某绦蛟O計

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Js高級編程筆記--面向?qū)ο蟮某绦蛟O計

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！