JS創建對象模式及其對象原型鏈探究（三）：構造函數模式

Martin91 發布于2019-08-19 17:56 / 1766人閱讀

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

構造函數模式

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

1.創建對象

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);

與工廠模式的區別：

沒有顯示地創建對象

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

沒有return語句

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

創建構造函數的實例，必須使用new操作符。以這種方式調用構造函數，會經歷以下4個步驟：

創建一個新對象；

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

執行構造函數中的代碼（為這個新對象添加屬性）

返回新對象

對象有一個constructor用來標識對象類型。p1和p2對象，都有一個constructor（構造函數）屬性，該屬性指向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構造函數創建的所有對象，既是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構造函數涉及到的原型鏈

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屬性引用的函數

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 創建對象安全模式構造函數模式對象模式面向對象設計模式

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

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

JS創建對象模式及其對象原型鏈探究（一）：Object模式

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

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

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

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

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

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

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

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

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

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