JS創(chuàng)建對象模式及其對象原型鏈探究（三）：構造函數(shù)模式

Martin91 發(fā)布于2019-08-19 17:56 / 1835人閱讀

摘要：創(chuàng)建對象與工廠模式的區(qū)別沒有顯示地創(chuàng)建對象直接將方法和屬性付給了對象沒有語句構造函數(shù)應該始終以一個大寫字母開頭。創(chuàng)建構造函數(shù)的實例，必須使用操作符。

構造函數(shù)模式

ECMAScript中的構造函數(shù)可用來創(chuàng)建特定類型的對象，像Object和Array這樣的原生構造函數(shù)。
也可以創(chuàng)建自定義的構造函數(shù)，從而定義自定義對象類型的屬性和方法。

1.創(chuàng)建對象

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.showName = function(){
        console.log("name = " + this.name);
    };

}

var p1 = new Person("Mike", 20, "student");
var p2 = new Person("Tom", 23, "student");

console.log(p1);
console.log(p2);

與工廠模式的區(qū)別：

沒有顯示地創(chuàng)建對象

直接將方法和屬性付給了this對象

沒有return語句

構造函數(shù)應該始終以一個大寫字母開頭。

創(chuàng)建構造函數(shù)的實例，必須使用new操作符。以這種方式調(diào)用構造函數(shù)，會經(jīng)歷以下4個步驟：

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

將構造函數(shù)中的作用域賦給新對象（this就指向了這個對象）

執(zhí)行構造函數(shù)中的代碼（為這個新對象添加屬性）

返回新對象

對象有一個constructor用來標識對象類型。p1和p2對象，都有一個constructor（構造函數(shù)）屬性，該屬性指向Person。

console.log("p1.constructor=");
console.log(p1.constructor);
console.log("p1.constructor === Person:");
console.log(p1.constructor === Person);
console.log("p2.constructor=");
console.log(p2.constructor);
console.log("p2.constructor === Person:");
console.log(p2.constructor === Person);

但是，提到檢測對象類型，還是instanceof操作符要更可靠些。Person構造函數(shù)創(chuàng)建的所有對象，既是Object的實例，也是Person的實例。

console.log("p1 instanceof Object:");
console.log(p1 instanceof Object);
console.log("p1 instanceof Person:");
console.log(p1 instanceof Person);
console.log("p2 instanceof Object:");
console.log(p2 instanceof Object);
console.log("p2 instanceof Person:");
console.log(p2 instanceof Person);

2.觀察Person構造函數(shù)涉及到的原型鏈

console.log("Person.prototype=");
console.log(Person.prototype);
console.log("Person.prototype === Function.prototype;");    
console.log(Person.prototype === Function.prototype);    //false
console.log("-----分割線-----");

console.log("Person.prototype.constructor === Person:");    //true
console.log(Person.prototype.constructor === Person);    //true
console.log("-----分割線-----");

console.log("Person.prototype.__proto__ === Object.prototype:");    //true
console.log(Person.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割線-----");


console.log("Person.__proto__=");
console.log(Person.__proto__);
console.log("Person.__proto__ === Function.prototype:");
console.log(Person.__proto__ === Function.prototype);    //true
console.log("-----分割線-----");

3.觀察p1實例對象涉及到的原型鏈

console.log("p1.prototype=");
console.log(p1.prototype);
console.log("-----分割線-----");

console.log("p1.__proto__=");
console.log(p1.__proto__);
console.log("p1.__proto__ === Person:");
console.log(p1.__proto__ === Person);        //false
console.log("p1.__proto__ === Person.prototype:");
console.log(p1.__proto__ === Person.prototype);        //true
console.log("-----分割線-----");

console.log("p1.__proto__.constructor === Person:");
console.log(p1.__proto__.constructor === Person);
console.log("-----分割線-----");

console.log("p1.__proto__.__proto__=");
console.log(p1.__proto__.__proto__);
console.log("p1.__proto__.__proto__ === Object.prototype:");
console.log(p1.__proto__.__proto__ === Object.prototype);    //true
console.log("-----分割線-----");

4.觀察下p1.showName屬性引用的函數(shù)

console.log("p1.showName.prototype=");
console.log(p1.showName.prototype);

console.log("p1.showName.prototype  === Function.prototype:");    
console.log(p1.showName.prototype  === Function.prototype);    //false
console.log("-----分割線-----");

console.log("p1.showName.prototype.constructor=");
console.log(p1.showName.prototype.constructor);
console.log("-----分割線-----");

console.log("p1.showName.prototype.__proto__=");
console.log(p1.showName.prototype.__proto__);

console.log("p1.showName.prototype.__proto__ === Object.prototype:");    
console.log(p1.showName.prototype.__proto__ === Object.prototype);    //true
console.log("-----分割線-----");

console.log("p1.showName.__proto__=");
console.log(p1.showName.__proto__);
console.log("p1.showName.__proto__ === Function.prototype：");    
console.log(p1.showName.__proto__ === Function.prototype);    //true
console.log("-----分割線-----");

原型鏈圖

云服務器 GPU云服務器 js 創(chuàng)建對象安全模式構造函數(shù)模式對象模式面向對象設計模式

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

轉載請注明本文地址：http://m.hztianpu.com/yun/78998.html

JS創(chuàng)建對象模式及其對象原型鏈探究（一）：Object模式

摘要：對象是由構造函數(shù)創(chuàng)建而成的，所以它的指向原型鏈圖對象的原型鏈圖對象屬性引用的匿名函數(shù)的原型鏈圖 Object模式創(chuàng)建一個Object實例，再為其添加屬性和方法。這是創(chuàng)建自定義對象最簡單的方式。 1.創(chuàng)建對象 // 創(chuàng)建person對象 var person = new Object(); person.name = Mike; person.age = 20; person.jo...

李義 2019-08-19 17:54 評論0 收藏0
JS創(chuàng)建對象模式及其對象原型鏈探究（五）：組合使用構造函數(shù)模式和原型模式

摘要：組合使用構造函數(shù)模式和原型模式構造函數(shù)模式用于定義實例屬性，原型模式用于定義方法和共享的屬性。創(chuàng)建對象組合使用構造函數(shù)模式和原型模式指向構造函數(shù)，這里要將其恢復為指向構造函數(shù)。另外，這種混合模式，還支持向構造函數(shù)傳遞參數(shù)。組合使用構造函數(shù)模式和原型模式構造函數(shù)模式用于定義實例屬性，原型模式用于定義方法和共享的屬性。創(chuàng)建自定義類型的最常見方式，就是組合使用構造函數(shù)模式和原型模式。 ...

Shimmer 2019-08-19 17:57 評論0 收藏0
JS創(chuàng)建對象模式及其對象原型鏈探究（四）：原型模式

摘要：原型模式定義構造函數(shù)，在構造函數(shù)的原型對象中定義對象的屬性和方法，并通過構造函數(shù)創(chuàng)建對象。，屬性存在于實例對象中，屬性不存在于實例對象中分割線操作符會在通過對象能夠訪問給定屬性時返回，無論該屬性是存在于實例中還是原型中。原型模式定義構造函數(shù)，在構造函數(shù)的原型對象中定義對象的屬性和方法，并通過構造函數(shù)創(chuàng)建對象。 1.創(chuàng)建對象 function Person(){}; Person....

ruicbAndroid 2019-08-19 17:57 評論0 收藏0
JS創(chuàng)建對象模式及其對象原型鏈探究（二）：工廠模式

摘要：工廠模式用函數(shù)來封裝，以特定接口創(chuàng)建對象的細節(jié)。缺點不能知道對象識別的問題對象的類型不知道。復雜的工廠模式定義是將其成員對象的實列化推遲到子類中，子類可以重寫父類接口方法以便創(chuàng)建的時候指定自己的對象類型。工廠模式用函數(shù)來封裝，以特定接口創(chuàng)建對象的細節(jié)。 1.創(chuàng)建對象 function createPerson(name, age, job){ var o = new Obj...

smartlion 2019-08-19 17:55 評論0 收藏0
js知識梳理4.繼承的模式探究

摘要：而且在超類型的原型中定義的方法，對子類型而言也是不可見的，結果所有類型都只能使用構造函數(shù)模式。在主要考慮對象而不是自定義類型和構造函數(shù)的情況下，這個模式也不錯。寫在前面注：這個系列是本人對js知識的一些梳理，其中不少內(nèi)容來自書籍:Javascript高級程序設計第三版和JavaScript權威指南第六版，感謝它們的作者和譯者。有發(fā)現(xiàn)什么問題的，歡迎留言指出。 1.原型鏈將原型鏈作...

wenshi11019 2019-08-26 12:16 評論0 收藏0