Javascript 面向對象中的構造函數和原型對象

microcosm1994 發布于2019-08-21 10:33 / 651人閱讀

摘要：每一個對象除外都和另外一個對象相關聯，這個另外一個對象就是我們熟知的原型，每一個對象都從原型繼承屬性和行為方法。兩個構造函數的屬性可能指向同一個原型對象，這時通過調用兩個構造函數創建的實例是屬于同一個類的。

先解釋下原型。每一個Javascript對象(null除外)都和另外一個對象相關聯，這個“另外一個對象”就是我們熟知的原型，每一個對象都從原型繼承屬性和行為(方法)。

var   a = {}; //原型對象為Object.prototype
var   array = new Array()// 原型對象為Array.prototype
var   myInstance = new MyClass;// 原型對象為MyClass.prototype

在Javascript中，類的所有實例對象都從同一個原型對象上繼承屬性，下面先看一個例子

function Range是 Range類的構造函數用以初始化新創建的Range類的對象，構造函數并沒有創建并返回一個對象，僅僅是初始化，并且在構造函數中用this設置的屬性不是每個實例共享的，而是獨享的，this是對當前對象的應用。

function Range(from, to) {
          if(from)
               this.from = from;//對象的自有屬性，在對象中會覆蓋從原型那里繼承來的from值
          if(to)
               this.to = to; 
}

而所有對象實例都會繼承的屬性和行為(方法)都在原型對象里

Range.prototype = {
     includes : function(x) {return this.from <= x && x <= this.to},
     
     foreach : function(f) {
           for(var x = Math.ceil(this.form); x < this.from; x++)  f(x);
    },
    
    toString : function() {return "(" + this.from + "......" + this.to + ")";},
    
    from : 1,

    getBeginning : function() {return this.from}
}

var r = new Range(2, 5);
r.include(3);// true , 3在范圍內
r.foreach(alert);//輸出2 3 4 5
console.log(r)//
r.getBeginng() // 2 因為在構造函數初始化r的時候已經把屬性“from”設置成2了

任何Javascript函數都可以做構造函數，并且用new 關鍵字調用構造函數時是要用到一個prototype屬性的。因此每個javascript函數都會自動擁有一個prototype屬性。比如

Range.prototype.init = function () {}
nr = new Range.prototype.init();// nr 的屬性繼承自Range.prototype.init.prototype

原型對象是類的唯一標示，當且僅當兩個對象繼承自同一個原型對象時，他們才是屬于同一個類的實例，而初始化對象的構造函數則不能作為類的標示。兩個構造函數的prototype屬性可能指向同一個原型對象，這時通過new調用兩個構造函數創建的實例是屬于同一個類的。

上面的例子繼續修改

Range.prototype.init.prototype = Range.prototype;//引用傳遞所以不用擔心循環引用;

這樣通過new Range()和 new Range.prototype.init()創建的對象都是屬于Range類的。

console.log((r instanceof Range)); //true
console.log((nr instanceof Range)); //true

GPU云服務器云服務器 javascript 面向對象 javascript面向對象 javascript面向對象編程 javascript面向對象編程指南

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

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

JS對象(1)重新認識面向對象

摘要：對象重新認識面向對象面向對象從設計模式上看，對象是計算機抽象現實世界的一種方式。除了字面式聲明方式之外，允許通過構造器創建對象。每個構造器實際上是一個函數對象該函數對象含有一個屬性用于實現基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向對象 date: 2016-10-05 tags: JavaScript 0x00 面向對象從設計模式上看，對象是...

superw 2019-08-21 11:17 評論0 收藏0
面向對象的 JavaScript

摘要：是完全的面向對象語言，它們通過類的形式組織函數和變量，使之不能脫離對象存在。而在基于原型的面向對象方式中，對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格，導致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向對象的語言，或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意，從對語言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0
重新認識JavaScript面向對象: 從ES5到ES6

摘要：基于原型的面向對象在基于原型的語言中如并不存在這種區別它只有對象不論是構造函數，實例，原型本身都是對象。允許動態地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題，提供了構造函數創建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認識面向對象 1. JavaScript...

VishKozus 2019-08-30 13:56 評論0 收藏0
重新認識JavaScript面向對象: 從ES5到ES6

摘要：基于原型的面向對象在基于原型的語言中如并不存在這種區別它只有對象不論是構造函數，實例，原型本身都是對象。允許動態地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題，提供了構造函數創建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認識面向對象 1. JavaScript...

用戶83 2019-08-26 11:38 評論0 收藏0
淺談JavaScript面向對象

摘要：不必在構造函數中定義對象實例的信息。其次，按照一切事物皆對象的這餓極本的面向對象的法則來說，類本身并不是一個對象，然而原型方式的構造函數和原型本身也是個對象。第二個問題就是在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。前言對象(Object)應該算是js中最為重要的部分，也是js中非常難懂晦澀的一部分。更是面試以及框架設計中各出沒。寫這篇文章，主要參考與JavaScrip...

cyixlq 2019-08-21 17:15 評論0 收藏0