[js高手之路]搞清楚面向對象,必須要理解對象在創建過程中的內存表示

binta 發布于2019-08-20 18:56 / 2434人閱讀

摘要：面向對象編程方式，對于初學者來說，會比較難懂要學會面向對象以及使用面向對象編程，理解對象的創建在內存中的表示，至關重要首先，我們來一段簡單的對象創建代碼衛莊衛莊上例，我們創建了兩個對象和如果有多個類似對象，我們可以通過函數封裝，這種函數封裝

javascript面向對象編程方式，對于初學者來說，會比較難懂. 要學會面向對象以及使用面向對象編程，理解對象的創建在內存中的表示，至關重要.

首先，我們來一段簡單的對象創建代碼

 1         var obj = new Object();
 2         obj.userName = "ghostwu";
 3         obj.showUserName = function(){
 4             return obj.userName;
 5         };
 6         var obj2 = new Object();
 7         obj2.userName = "衛莊";
 8         obj2.showUserName = function(){
 9             return obj2.userName;
10         };
11 
12         console.log( obj.showUserName() ); //ghostwu
13         console.log( obj2.showUserName() ); //衛莊

上例，我們創建了兩個對象obj和obj2, 如果有多個類似對象，我們可以通過函數封裝，這種函數封裝方式，在設計模式里面叫工廠模式

1         function createObj( uName ){
 2             var obj = new Object();
 3             obj.userName = uName;
 4             obj.showUserName = function(){
 5                 return obj.userName;
 6             }
 7             return obj;
 8         }
 9         var obj1 = createObj( "ghostwu" );
10         var obj2 = createObj( "衛莊" );
11         console.log( obj1.showUserName() ); //ghostwu
12         console.log( obj2.showUserName() ); //衛莊

工廠模式簡化了創建多個類似對象的過程，但是卻不能識別對象的類型，為了識別對象的創建類型，我們可以使用構造函數方式.

什么是構造函數方式？

其實我們js很多創建內存對象的方式都是構造函數方式，如，數組: var arr = new Array ( 5 ), 時間對象: var date = new Date()

函數前面帶上new關鍵字，是構造函數的外在表現

 1         function CreateObj( uName ){
 2             this.userName= uName;
 3             this.showUserName = function(){
 4                 return this.userName;
 5             }
 6         }
 7         var obj1 = new CreateObj( "ghostwu" );
 8         var obj2 = new CreateObj( "衛莊" );
 9 
10         console.log( obj1.showUserName() ); //ghostwu
11         console.log( obj2.showUserName() ); //衛莊

首先，明確幾個事實：

任何函數前面都可以用new關鍵字

如果用了new關鍵字, 函數中的this指向的是創建出來的對象, obj1造出來的時候，this指向的就是obj1,
obj2造出來的時候，this指向的就是obj2.

構造函數把屬性和方法直接賦值給this, 不需要創建一個對象( new Object() )

構造函數會自動return this

每new一個函數, 就會在內存中，生成一個獨立的內存區域，用來存儲當前的對象，以及對象上面的方法和屬性

如果構造函數前面不用new去掉用，函數中的this指向的是window, 相當于給window加屬性和方法，函數沒有返回值，就是undefined

obj1 = CreateObj( "ghostwu" );
obj2 = CreateObj( "衛莊" );

console.log( obj1 ); //undefined
console.log( obj2 ); //undefined

那向下面這樣調用，就會報錯
console.log( obj1.showUserName() ); //報錯
console.log( obj2.showUserName() ); //報錯

因為obj1和obj2都是undefined，showUserName被加到windows對象上了

GPU云服務器云服務器 js 面向對象視頻 js面向對象開發表格 oop面向對象 js js對象存儲過程

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

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

[js高手之路]構造函數的基本特性與優缺點

摘要：所以一句話理解的運算規則為檢測左側的原型鏈上，是否存在右側的原型。上文,通過基本的對象創建問題了解了構造函數，本文，我們接著上文繼續了解構造函數的基本特性，以及優缺點. 每個對象上面都有一個constructor屬性( 嚴格意義上來說，是原型上的，對象是通過查找到原型找到 constructor屬性 ).后面講到原型的時候，我會用示意圖的方式說明 1 functio...

Ajian 2019-08-20 18:57 評論0 收藏0
JavaScript 函數式編程導論

摘要：函數式編程導論從屬于筆者的前端入門與工程實踐。函數式編程即是在軟件開發的工程中避免使用共享狀態可變狀態以及副作用。 JavaScript 函數式編程導論從屬于筆者的Web 前端入門與工程實踐。本文很多地方是講解函數式編程的優勢，就筆者個人而言是認可函數式編程具有一定的好處，但是不推崇徹底的函數式編程化，特別是對于復雜應用邏輯的開發。筆者在應用的狀態管理工具中就更傾向于使用MobX而不是...

forrest23 2019-08-20 13:38 評論0 收藏0
程序員入門學習指南

摘要：程序員的入門規劃我該學習什么語言這個問題困擾了幾乎所有的程序員，比如應用廣好就業，比如入門簡單，和安卓待遇高，和開發效率高，是萬能語言，和前端缺人才等等個人見解先學習難度小，大眾化的編程語言，比如，，，這幾個學哪一種其實差不多，入門以后看自程序員的入門規劃 1.我該學習什么語言？這個問題困擾了幾乎所有的程序員，比如java應用廣好就業，比如php入門簡單，ios和安卓待遇高，rub...

princekin 2019-08-14 15:10 評論0 收藏1
程序員入門學習指南

摘要：程序員的入門規劃我該學習什么語言這個問題困擾了幾乎所有的程序員，比如應用廣好就業，比如入門簡單，和安卓待遇高，和開發效率高，是萬能語言，和前端缺人才等等個人見解先學習難度小，大眾化的編程語言，比如，，，這幾個學哪一種其實差不多，入門以后看自程序員的入門規劃 1.我該學習什么語言？這個問題困擾了幾乎所有的程序員，比如java應用廣好就業，比如php入門簡單，ios和安卓待遇高，rub...

Kahn 2019-08-19 17:24 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0