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

Ajian 發布于2019-08-20 18:57 / 2432人閱讀

摘要：所以一句話理解的運算規則為檢測左側的原型鏈上，是否存在右側的原型。

上文,通過基本的對象創建問題了解了構造函數，本文，我們接著上文繼續了解構造函數的基本特性，以及優缺點.

每個對象上面都有一個constructor屬性( 嚴格意義上來說，是原型上的，對象是通過查找到原型找到 constructor屬性 ).后面講到原型的時候，我會用示意圖的方式說明

 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         console.log( obj1.constructor === CreateObj ); //true
10         console.log( obj2.constructor === CreateObj ); //true

默認情況下，對象的constructor等于實例化對象的構造函數, constructor最初的作用是用來標識對象的，但是并不是特別準確，因為constructor能被修改,

識別對象一般用instanceof關鍵字.

什么是instanceof？

要理解這個關鍵字，需要搞清楚原型鏈，這里，我提前把他放出來

//假設instanceof運算符左邊是L，右邊是R
L instanceof R 
//instanceof運算時，通過判斷L的原型鏈上是否存在R.prototype
L.__proto__.__proto__ ..... === R.prototype ？
//如果存在返回true 否則返回false
注意：instanceof運算時會遞歸查找L的原型鏈，即L.__proto__.__proto__.__proto__.__proto__...直到找到了或者找到頂層為止。

所以一句話理解instanceof的運算規則為：

instanceof檢測左側的__proto__原型鏈上，是否存在右側的prototype原型。

console.log( obj1 instanceof Object ); //true
console.log( obj2 instanceof Object ); //true
console.log( obj1 instanceof CreateObj ); //true
console.log( obj2 instanceof CreateObj ); //true

obj1,obj2之所以是Object的實例，因為所有對象繼承自Object

借用構造函數

一個空對象，可以借用現有的構造函數，完成屬性和方法的復制

 1         function CreateObj(uName) {
 2             this.userName = uName;
 3             this.showUserName = function () {
 4                 return this.userName;
 5             }
 6         }
 7         var obj = new Object();
 8         CreateObj.call( obj, "ghostwu" );
 9         console.log( obj.userName ); //ghostwu
10         console.log( obj.showUserName() ); //ghostwu

構造函數的優點與缺點

優點就是能夠通過instanceof識別對象，缺點是每次實例化一個對象，都會把屬性和方法復制一遍

1         var obj1 = new CreateObj("ghostwu");
2         var obj2 = new CreateObj("衛莊");
3 
4         console.log( obj1.showUserName === obj2.showUserName ); //false

從以上執行結果，可以看出obj1.showUserName和obj.showUserName不是同一個【在js中，引用類型比較的是地址, 函數是一種引用類型】，而是存在兩個不同
的內存地址，因為每個對象的屬性是不一樣的，這個沒有什么問題，但是方法執行的都是一樣的代碼，所以沒有必要復制，存在多份，浪費內存.這就是缺點

怎么解決構造函數的方法復制多次的問題？

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

把對象的方法指向同一個全局函數showUserName, 雖然解決了多次復制問題，但是全局函數非常容易被覆蓋，也就是大家經常說的污染全局變量.

比較好的解決方案？

通過原型(prototype)對象，把方法寫在構造函數的原型對象上

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

GPU云服務器云服務器 spark實戰高手之路 JS構造函數云服務器的基本構造組成有哪些 ava類中的構造函數

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

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

[js高手之路]原型對象(prototype)與原型鏈相關屬性與方法詳解

摘要：一，檢測左側的原型鏈上，是否存在右側的原型我在之前的兩篇文章高手之路構造函數的基本特性與優缺點高手之路一步步圖解的原型對象原型鏈已經分享過了衛莊二如果隱式原型指向調用方法的對象原型那么這個方法就返回，如衛莊因為的隱式原型指向的都是，有朋友可一，instanceof： instanceof檢測左側的__proto__原型鏈上，是否存在右側的prototype原型. 我在之前的兩篇文章 ...

svtter 2019-08-20 19:02 評論0 收藏0
[js高手之路] es6系列教程 - 新的類語法實戰選項卡

摘要：其實的面向對象很多原理和機制還是的，只不過把語法改成類似和老牌后端語言中的面向對象語法一用封裝一個基本的類是不是很向和中的類其實本質還是原型鏈，我們往下看就知道了首先說下語法規則中的就是類名，可以自定義就是構造函數，這個是關鍵字，當實例化對其實es6的面向對象很多原理和機制還是ES5的，只不過把語法改成類似php和java老牌后端語言中的面向對象語法. 一、用es6封裝一個基本的類 ...

yintaolaowanzi 2019-08-21 16:17 評論0 收藏0
[js高手之路]使用原型對象(prototype)需要注意的地方

摘要：原型對象的共享特性，可以很方便的為一些內置的對象擴展一些方法，比如，數組去重復但是，不要隨便往內置的對象上面擴展方法，在多人協作開發，很容易產生覆蓋，以及污染我們先來一個簡單的構造函數+原型對象的小程序 1 function CreateObj( uName, uAge ) { 2 this.userName = uName; 3 ...

chnmagnus 2019-08-20 19:06 評論0 收藏0
[js高手之路]搞清楚面向對象,必須要理解對象在創建過程中的內存表示

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

binta 2019-08-20 18:56 評論0 收藏0
[js高手之路]this知多少

摘要：關鍵字在中的變化非常的靈活，如果用的不好就非常惡心，用的好程序就非常的優雅，靈活，飄逸所以掌握的用法，是每一個前端工程師必知必會的而且這個也是一些大公司筆試中常見的考察項第一種單獨的，指向的是這個對象注當前的執行環境是所以指向了第二種全局函 this關鍵字在javascript中的變化非常的靈活，如果用的不好就非常惡心，用的好,程序就非常的優雅，靈活，飄逸.所以掌握this的用法，是每...

APICloud 2019-08-20 19:07 評論0 收藏0