為什么需要prototype

0xE7A38A 發布于2019-08-21 12:27 / 1403人閱讀

摘要：但要講原型就必須講構造函數，講構造函數就必須講對象。所以我們是無法容忍這么愚蠢的事情發生的，因此就有了構造函數，跟類有點相似，但我們這里不討論類。

首先，上一篇文章詳細分析了原型屬性和自身屬性的區別，但為了讓大家更明白一點，所以這里講一下為什么需要原型。但要講原型就必須講構造函數，講構造函數就必須講對象。首先來看看對象。

新建一個對象的方法： 1.new Object:


var newObj = new Object;
newObj.name = "keti";
newObj.color = "red";
newObj.changeColor = function(color){
    newObj.color = color;
}

這種方法看上去很蠢，所以我們找到另一種方法：使用literal直接創建，看上去要優雅得多：

2.literal


var newObj = {
    name: "keti";
    color: "red";
    changeColor: function(color){
        newObj.color = color;
    }
}

使用literal來常見對象似乎很不錯，比較直觀，兩個卷括號括起來就是個對象嘛，多清晰明了。但是如果你要創建一系列結構類似的對象，難道要這樣一個個寫嗎？作為程序員我們的遵循的理念就是盡可能減少重復，也就是著名的DRY(Don"t Repeat Youself)。所以我們是無法容忍這么愚蠢的事情發生的，因此就有了構造函數，跟類有點相似，但我們這里不討論類。構造函數就是建立一個模板，不綁定數據，只提供架構，你只需把相關數據填充到模板里就可以生成一個新的對象了：

3.構造函數

function NewObj(name,color){
    this.name = name;
    this.color = color;
    this.changeColor = function(c){
        this.color = c;
    }
}
var newObj1 = new NewObj("keti","red");

上面代碼中，new是一個構造器，NewObj是我們創建好的模板，填入數據，賦給變量newObj1，ok，新的對象就這樣生成了。

到此創建對象的方法似乎已經很不錯了，但仔細觀察我們還發現了新的問題：對于changeColor()這個方法事實上對所有instance來說是相同的，也就是說可以共享，不像name和color那樣需要綁定給每個instance。而構造函數這種形式每次都會把自身的屬性全部copy一份給每個instance，這就造成了不必要的浪費；并且，當我們想修改這個方法時，就必須重新生成所有的instance才能獲得更新，比如說：


function NewObj(name,num){
    this.name = name;
    this.num = num;
    this.changNum = function(c){
        this.num = c;
    }
}
var newObj1 = new NewObj("kemi",10);
newObj1.changNum(100);
newObj1.num; //很明顯是100

我現在想修改changNum()這個函數：


function NewObj(name,num){
    this.name = name;
    this.num = num;
    this.changNum = function(c){
        this.num = c*2;
    }
}
newObj1.changNum(100);
newObj1.num; //依然是100，也就是說這個對象并不受我們修改的模板影響到

怎么解決這個問題呢？有一個原型對象。原型對象里的屬性和方法并不是像構造函數自身屬性一樣copy給每個instance，而是“引用”，也可以理解為給每個instance提供一個指向該原型對象的指針，這樣每個instance就能找到原型對象里的屬性，而很明顯，這是一種共享，也就是說，當你修改了這個原型里的屬性，那么所有共享該屬性的instance都能獲得這個修改。因此，原型恰好解決了上面提到的兩個問題。


function NewObj(name,num){
    this.name = name;
    this.num = num;
}
NewObj.prototype.changNum = function(c){
        this.num = c;
        }
var newObj1 = new NewObj("kemi",10);
newObj1.changNum(100);
newObj1.num; //很明顯是100
NewObj.prototype.changNum = function(c){
        this.num = c*2;
        }//我們重新修改一下這個方法
newObj1.changNum(100);
newObj1.num; //變成200了。

為什么一般情況下會把屬性直接寫在構造函數內，而方法通過prototype添加呢？這兩種方式的區別上面其實已經有所展現了：大部分的instance的屬性都是不同的，比如說name，因此在構造函數內通過this直接綁定給instance無疑是個好方案，而方法通常是通用的，使用prototype可以讓每個instance共享同一個方法，而不用每個都copy一次，又能實現實時更新。

云服務器 GPU云服務器 prototype是什么 PROTOTYPING Prototypal Prototypes

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

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

再談JavaScript面向對象思想及繼承

摘要：面向對象中有三大特征，封裝，繼承，多態。這不僅無法做到數據共享，也是極大的資源浪費，那么引入對象實例對象的屬性指向其構造函數，這樣看起來實例對象好像繼承了對象一樣。實例對象的原型指向其構造函數的對象構造器的指向。前言為什么說是再談呢，網上講解這個的博客的很多，我開始學習也是看過，敲過就沒了，自以為理解了就結束了，書到用時方恨少啊。實際開發中一用就打磕巴，于是在重新學習了之后分享出來...

svtter 2019-08-21 17:19 評論0 收藏0
js繼承從入門到理解

摘要：問題修改實例的，即修改了構造函數的原型對象的共享屬性到此處，涉及到的內容大家可以再回頭捋一遍，理解了就會覺得醍醐灌頂。開場白大三下學期結束時候，一個人跑到帝都來參加各廠的面試，免不了的面試過程中經常被問到的問題就是JS中如何實現繼承，當時的自己也是背熟了實現繼承的各種方法，回過頭來想想卻不知道__proto__是什么，prototype是什么，以及各種繼承方法的優點和缺點，想必有好...

不知名網友 2019-08-23 12:09 評論0 收藏0
Javascript之bind

摘要：返回的函數可以作為構造函數使用被用作構造函數時，應指向出來的實例，同時有屬性，其指向實例的原型。判斷當前被調用時，是用于普通的還是用于構造函數從而更改指向。運算符用來測試一個對象在其原型鏈中是否存在一個構造函數的屬性。寫在最前最近開始重新學習一波js，框架用久了有些時候覺得這樣子應該可以實現發現就真的實現了，但是為什么這么寫好像又說不太清楚，之前讀了LucasHC以及冴羽的兩篇關于...

王巖威 2019-08-21 18:39 評論0 收藏0
我來重新學習 javascript 的面向對象（part 2）

摘要：先來說其實構造函數也有，原型對象有，實例有也有，或者更加籠統的說，所有對象都是有的。構造函數的原型對象上的會指向構造函數。由于屬性是可以變更的，所以未必真的指向對象的構造函數，只是一個提示。續上一集內容，通過構造函數的方式，成功地更新了生產技術，老板笑呵呵，工人少奔波，只是問題總比辦法多，又遇到一個新問題，就是會造成一些資源的重復和浪費，那么經過工程師們的智慧交流，他們產生了一個新技...

silvertheo 2019-08-26 12:19 評論0 收藏0
初探js中的對象原型（Prototype）

摘要：在中，萬物皆對象。在日常中，我們除了經常聽到原型這個詞之外，還經常會聽到原型鏈這個詞，那么這兩個詞到底有什么關系呢，下面我們就來探究一下。指向的對象往往被稱為函數的原型。很簡單，委托實際上就是原型鏈。在JavaScript中，萬物皆對象。每個對象都有一個特殊的內部屬性，[[Prototype]]（原型）。它是對于其他對象的引用，也就是說它關聯到別的對象（如果它不為空）。在日常中，我...

fizz 2019-08-22 15:41 評論0 收藏0
【翻譯】javascript中的prototype

摘要：構造函數就是一個具有屬性的方法，該屬性被稱作標識具有一個屬性，但是沒有用戶定義它。然而，構造函數的屬性可以被改變，并且將影響用這個原型創建的對象。原文地址：http://dailyjs.com/2012/05/20/js101-prototype/ 在花費了很多年研究面向對象編程之后，想在javascript使用是令人失望的。主要是從根源上缺少一個class這樣的關鍵詞。然而，jav...

lentrue 2019-08-22 10:50 評論0 收藏0