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

李義發布于2019-08-19 17:54 / 858人閱讀

摘要：對象是由構造函數創建而成的，所以它的指向原型鏈圖對象的原型鏈圖對象屬性引用的匿名函數的原型鏈圖

Object模式

創建一個Object實例，再為其添加屬性和方法。

這是創建自定義對象最簡單的方式。

1.創建對象

// 創建person對象
var person = new Object();
person.name = "Mike";
person.age = 20;
person.job = "student";
person.showName = function(){    
    console.log("this.name = " + this.name);
};

person.consThis = function(){
    console.log("this = ");    
    console.log(this);    // this指向person對象    
    console.log(this === person);
};

person.showName();
person.consThis();

輸出如圖：

2.觀察下person.showName屬性引用的函數

// person.showName引用的是一個匿名函數，其name屬性為""
console.log("person.showName.name=");
console.log(person.showName.name);
console.log(person.showName.name === "")
console.log("-----分割線-----");

// showName引用的匿名函數的prototype屬性指向其原型對象
console.log("person.showName.prototype=");
console.log(person.showName.prototype);
console.log(person.showName.prototype === Function.prototype);        //不是Function構造函數的原型對象
console.log("-----分割線-----");

//其原型對象的constructor屬性指向showName引用的匿名函數
console.log("person.showName.prototype.constructor=");        
console.log(person.showName.prototype.constructor);        
console.log("-----分割線-----");

// 此匿名函數的原型對象的__proto__屬性指向Object構造函數的原型對象
console.log("person.showName.prototype.__proto__=");
console.log(person.showName.prototype.__proto__);
console.log(person.showName.prototype.__proto__ === Object.prototype);
console.log("-----分割線-----");

// showName引用的匿名函數的__proto__屬性指向Function.prototype
console.log("person.showName.__proto__=");        //showName引用的是一個匿名函數，匿名函數本質上是由構造函數Function生成的
console.log(person.showName.__proto__);        //showName引用的是一個匿名函數，匿名函數本質上是由構造函數Function生成的
// 驗證
console.log(person.showName.__proto__ === Function.prototype);    //true
console.log("-----分割線-----");

showName屬性引用的匿名函數信息：

輸出如圖：

3.觀察person對象涉及到的原型鏈

Object構造函數的原型鏈

// prototype屬性指向Object構造函數的原型對象
console.log("Object.prototype=");
console.log(Object.prototype);
// Object構造函數的原型對象的constructor屬性指向其本身
console.log("Object.prototype.constructor=");
console.log(Object.prototype.constructor);
console.log("-----分割線-----");

//所有構造函數（內置及自定義）的__proto__屬性都指向Function構造函數的原型對象
// __proto__指向Function構造函數的原型對象，即Function.prototype
console.log("Object.__proto__=");
console.log(Object.__proto__);    
console.log(Object.__proto__ === Function.prototype);    
console.log("-----分割線-----");

person對象的原型鏈

// person是對象，非函數，所以沒有prototype屬性
console.log("person.prototype=");
console.log(person.prototype);
console.log("-----分割線-----");

// 所有對象的__proto__都指向其構造器的prototype
// person的__proto__屬性指向構造函數的原型對象，即Object構造函數的原型對象
console.log("person.__proto__=");
console.log(person.__proto__);
// 驗證
console.log(person.__proto__ === Object.prototype)    //true
console.log("-----分割線-----");

構造函數的原型對象的類型

// Function.prototype的類型為function
console.log("typeof Function.prototype:");
console.log(typeof Function.prototype);    
// 除了Function構造函數的原型對象為function，其他構造函數的原型對象類型為object
// Object.prototype的類型為object
console.log("typeof Object.prototype:");
console.log(typeof Object.prototype);
// Array.prototype的類型為object
console.log("typeof Array.prototype:");
console.log(typeof Array.prototype);
console.log("-----分割線-----");

Function構造函數的原型對象和Object構造函數的原型對象的關系

// Function.prototype.__proto指向Objcet.prototype
console.log("Function.prototype.__proto__=");
console.log(Function.prototype.__proto__);
// 驗證
console.log(Function.prototype.__proto__ === Object.prototype);    //true
// 這說明所有的構造器也都是一個普通JS對象，可以給構造器添加/刪除屬性等。同時它也繼承了Object.prototype上的所有方法：toString、valueOf、hasOwnProperty等。
console.log("-----分割線-----");

// Object.prototype.__proto指向null
console.log("Object.prototype.__proto__=");
console.log(Object.prototype.__proto__);
// 原型鏈到頂了，為null。

原型分析

所有構造器/函數的_ proto _都指向Function.prototype

所有對象的_ proto _都指向其構造器的prototype

除了Function構造函數的原型對象為function，其他構造函數的原型對象類型為object

所有的構造器也都是一個普通JS對象，可以給構造器添加/刪除屬性等。同時它也繼承了Object.prototype上的所有方法：toString、valueOf、hasOwnProperty等。

person對象是由Object構造函數創建而成的，所以它的_ proto _指向Object.prototype

原型鏈圖

person對象的原型鏈圖：

person對象showName屬性引用的匿名函數的原型鏈圖：

GPU云服務器云服務器 js 創建對象安全模式對象模式面向對象設計模式原型模式

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

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

JS創建對象模式及其對象原型鏈探究（二）：工廠模式

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

smartlion 2019-08-19 17:55 評論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創建對象模式及其對象原型鏈探究（三）：構造函數模式

摘要：創建對象與工廠模式的區別沒有顯示地創建對象直接將方法和屬性付給了對象沒有語句構造函數應該始終以一個大寫字母開頭。創建構造函數的實例，必須使用操作符。構造函數模式 ECMAScript中的構造函數可用來創建特定類型的對象，像Object和Array這樣的原生構造函數。也可以創建自定義的構造函數，從而定義自定義對象類型的屬性和方法。 1.創建對象 function Person(name...

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

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

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