DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 詳解Javascript中prototype屬性(推薦)
詳解Javascript中prototype屬性(推薦)
編輯:關於JavaScript     

在典型的面向對象的語言中,如java,都存在類(class)的概念,類就是對象的模板,對象就是類的實例。但是在Javascript語言體系中,是不存在類(Class)的概念的,javascript中不是基於‘類的',而是通過構造函數(constructor)和原型鏈(prototype chains)實現的。但是在ES6中提供了更接近傳統語言的寫法,引入了Class(類)這個概念,作為對象的模板。通過class關鍵字,可以定義類。基本上,ES6的class可以看作只是一個語法糖,它的絕大部分功能,ES5都可以做到,新的class寫法只是讓原型對象的寫法更加清晰、更像面向對象編程的語法而已。

  按照我的習慣,在寫文章前我會給出文章目錄。

  以下內容會分為如下小節:

  1.構造函數的簡單介紹

  2.構造函數的缺點

  3.prototype屬性的作用

  4.原型鏈(prototype chain)

  5.constructor屬性

    5.1:constructor屬性的作用

  6.instanceof運算符

1.構造函數的簡單介紹

  在我的一篇Javascript 中構造函數與new命令的密切關系文章中,詳細了介紹了構造函數的概念和特點,new命令的原理和用法等,如果對於構造函數不熟悉的同學,可以前往細細品味。以下做一個簡單的回顧。

  所謂構造函數,就是提供了一個生成對象的模板並描述對象的基本結構的函數。一個構造函數,可以生成多個對象,每個對象都有相同的結構。總的來說,構造函數就是對象的模板,對象就是構造函數的實例。

  構造函數的特點有:

    a:構造函數的函數名首字母必須大寫。

    b:內部使用this對象,來指向將要生成的對象實例。

    c:使用new操作符來調用構造函數,並返回對象實例。

  看一個最簡單的一個例子。

 function Person(){
 this.name = 'keith';
} 
 var boy = new Person();
console.log(boy.name); //'keith'

2.構造函數的缺點

  所有的實例對象都可以繼承構造函數中的屬性和方法。但是,同一個對象實例之間,無法共享屬性。

 function Person(name,height){
 this.name=name;
 this.height=height;
 this.hobby=function(){
 return 'watching movies';
}
 } 
var boy=new Person('keith',180);
 var girl=new Person('rascal',153); 
 console.log(boy.name); //'keith'
 console.log(girl.name); //'rascal'
 console.log(boy.hobby===girl.hobby); //false

 上面代碼中,一個構造函數Person生成了兩個對象實例boy和girl,並且有兩個屬性和一個方法。但是,它們的hobby方法是不一樣的。也就是說,每當你使用new來調用構造函數放回一個對象實例的時候,都會創建一個hobby方法。這既沒有必要,又浪費資源,因為所有hobby方法都是童顏的行為,完全可以被兩個對象實例共享。

  所以,構造函數的缺點就是:同一個構造函數的對象實例之間無法共享屬性或方法。

3.prototype屬性的作用

  為了解決構造函數的對象實例之間無法共享屬性的缺點,js提供了prototype屬性。

  js中每個數據類型都是對象(除了null和undefined),而每個對象都繼承自另外一個對象,後者稱為“原型”(prototype)對象,只有null除外,它沒有自己的原型對象。

  原型對象上的所有屬性和方法,都會被對象實例所共享。

  通過構造函數生成對象實例時,會將對象實例的原型指向構造函數的prototype屬性。每一個構造函數都有一個prototype屬性,這個屬性就是對象實例的原型對象。

 function Person(name,height){
 this.name=name;
 this.height=height;
 } 
 Person.prototype.hobby=function(){
 return 'watching movies';
 }
 var boy=new Person('keith',180);
 var girl=new Person('rascal',153); 
 console.log(boy.name); //'keith'
 console.log(girl.name); //'rascal'
 console.log(boy.hobby===girl.hobby); //true

  上面代碼中,如果將hobby方法放在原型對象上,那麼兩個實例對象都共享著同一個方法。我希望大家都能理解的是,對於構造函數來說,prototype是作為構造函數的屬性;對於對象實例來說,prototype是對象實例的原型對象。所以prototype即是屬性,又是對象。

  原型對象的屬性不是對象實例的屬性。對象實例的屬性是繼承自構造函數定義的屬性,因為構造函數內部有一個this關鍵字來指向將要生成的對象實例。對象實例的屬性,其實就是構造函數內部定義的屬性。只要修改原型對象上的屬性和方法,變動就會立刻體現在所有對象實例上。

 Person.prototype.hobby=function(){
 return 'swimming';
 }
 console.log(boy.hobby===girl.hobby); //true
 console.log(boy.hobby()); //'swimming'
console.log(girl.hobby()); //'swimming'

  上面代碼中,當修改了原型對象的hobby方法之後,兩個對象實例都發生了變化。這是因為對象實例其實是沒有hobby方法,都是讀取原型對象的hobby方法。也就是說,當某個對象實例沒有該屬性和方法時,就會到原型對象上去查找。如果實例對象自身有某個屬性或方法,就不會去原型對象上查找。

boy.hobby=function(){
 return 'play basketball';
 }
 console.log(boy.hobby()); //'play basketball'
 console.log(girl.hobby()); //'swimming'

  上面代碼中,boy對象實例的hobby方法修改時,就不會在繼承原型對象上的hobby方法了。不過girl仍然會繼承原型對象的方法。

  總結一下:

  a:原型對象的作用,就是定義所有對象實例所共享的屬性和方法。

  b:prototype,對於構造函數來說,它是一個屬性;對於對象實例來說,它是一個原型對象。

4.原型鏈(prototype chains)

  對象的屬性和方法,有可能是定義在自身,也有可能是定義在它的原型對象。由於原型對象本身對於對象實例來說也是對象,它也有自己的原型,所以形成了一條原型鏈(prototype chain)。比如,a對象是b對象的原型,b對象是c對象的原型,以此類推。所有一切的對象的原型頂端,都是Object.prototype,即Object構造函數的prototype屬性指向的那個對象。

  當然,Object.prototype對象也有自己的原型對象,那就是沒有任何屬性和方法的null對象,而null對象沒有自己的原型。

1 console.log(Object.getPrototypeOf(Object.prototype)); //null

2 console.log(Person.prototype.isPrototypeOf(boy)) //true

  原型鏈(prototype chain)的特點有:

    a:讀取對象的某個屬性時,JavaScript引擎先尋找對象本身的屬性,如果找不到,就到它的原型去找,如果還是找不到,就到原型的原型去找。如果直到最頂層的Object.prototype還是找不到,則返回undefined。

    b:如果對象自身和它的原型,都定義了一個同名屬性,那麼優先讀取對象自身的屬性,這叫做“覆蓋”(overiding)。

    c:一級級向上在原型鏈尋找某個屬性,對性能是有影響的。所尋找的屬性在越上層的原型對象,對性能的影響越大。如果尋找某個不存在的屬性,將會遍歷整個原型鏈。

  看概念可能比較晦澀,我們來看一個例子。但是理解了概念真的很重要。

 var arr=[1,2,3]; 
console.log(arr.length); //3
console.log(arr.valueOf()) //[1,2,3]
console.log(arr.join('|')) //1|2|3

   上面代碼中,定了一個數組arr,數組裡面有三個元素。我們並沒有給數組添加任何屬性和方法,可是卻在調用length,join(),valueOf()時,卻不會報錯。

  length屬性是繼承自Array.prototype的,屬於原型對象上的一個屬性。join方法也是繼承自Array.prototype的,屬於原型對象上的一個方法。這兩個方法是所有數組所共享的。當實例對象上沒有這個length屬性時,就會去原型對象查找。

  valueOf方法是繼承自Object.prototype的。首先,arr數組是沒有valueOf方法的,所以就到原型對象Array.prototype查找。然後,發現Array.prototype對象上沒有valueOf方法。最後,再到它的原型對象Object.prototype查找。

  來看看Array.prototype對象和Object.prototype對象分別有什麼屬性和方法。

 console.log(Object.getOwnPropertyNames(Array.prototype))
//["length", "toSource", "toString", "toLocaleString", "join", "reverse", "sort", "push", "pop", "shift", "unshift", "splice", "concat", "slice", "lastIndexOf", "indexOf", "forEach", "map", "filter", "reduce", "reduceRight", "some", "every", "find", "findIndex", "copyWithin", "fill", "entries", "keys", "values", "includes", "constructor", "$set", "$remove"]
 console.log(Object.getOwnPropertyNames(Object.prototype))
 // ["toSource", "toString", "toLocaleString", "valueOf", "watch", "unwatch", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "__defineGetter__", "__defineSetter__", "__lookupGetter__", "__lookupSetter__", "__proto__", "constructor"]

  我相信,大家看到這裡,對prototype還是似懂非懂的。這很正常,畢竟是js中比較重要又比較抽象的概念,不可能那麼快就掌握,再啃多幾篇,說不定掌握其精髓。在某乎上,有一個活生生的實例,可能也是大家會遇到的問題。可以看看 js構造函數和原型對象。

5.constructor屬性

  prototype對象有一個constructor屬性,默認指向prototype對象所在的構造函數。

 function A(){};
 console.log(A.prototype.constructor===A) //true

  要注意的是,prototype是構造函數的屬性,而constructor則是構造函數的prototype屬性所指向的那個對象,也就是原型對象的屬性。注意不要混淆。

console.log(A.hasOwnProperty('prototype')); //true
 console.log(A.prototype.hasOwnProperty('constructor')); //true

  由於constructor屬性是定義在原型(prototype)對象上面,意味著可以被所有實例對象繼承。

function A(){};
 var a=new A(); 
 console.log(a.constructor); //A()
console.log(a.constructor===A.prototype.constructor);//true

  上面代碼中,a是構造函數A的實例對象,但是a自身沒有contructor屬性,該屬性其實是讀取原型鏈上面的

A.prototype.constructor屬性。

  5.1:constructor屬性的作用

   a:分辨原型對象到底屬於哪個構造函數

 function A(){};
 var a=new A(); 
 console.log(a.constructor===A) //true
 console.log(a.constructor===Array) //false

    上面代碼表示,使用constructor屬性,確定實例對象a的構造函數是A,而不是Array。

    b:從實例新建另一個實例

 function A() {};
 var a = new A();
var b = new a.constructor();
console.log(b instanceof A); //true

    上面代碼中,a是構造函數A的實例對象,可以從a.constructor間接調用構造函數。

    c:調用自身的構造函數成為可能

 A.prototype.hello = function() {
 return new this.constructor();
 }

    d:提供了一種從構造函數繼承另外一種構造函數的模式

 function Father() {} 
 function Son() {
Son.height.constructor.call(this);
 } 
 Son.height = new Father();

    上面代碼中,Father和Son都是構造函數,在Son內部的this上調用Father,就會形成Son繼承Father的效果。

    e:由於constructor屬性是一種原型對象和構造函數的關系,所以在修改原型對象的時候,一定要注意constructor的指向問題。

    解決方法有兩種,要麼將constructor屬性指向原來的構造函數,要麼只在原型對象上添加屬性和方法,避免instanceof失真。

6.instanceof運算符

  instanceof運算符返回一個布爾值,表示指定對象是否為某個構造函數的實例。

 function A() {};
var a = new A();
console.log(a instanceof A); //true

  因為instanceof對整個原型鏈上的對象都有效,所以同一個實例對象,可能會對多個構造函數都返回true。

 function A() {};
 var a = new A(); 
console.log(a instanceof A); //true
console.log(a instanceof Object); //true

 注意,instanceof對象只能用於復雜數據類型(數組,對象等),不能用於簡單數據類型(布爾值,數字,字符串等)。

 var x = [1];
 var o = {};
 var b = true;
 var c = 'string';
 console.log(x instanceof Array); //true
console.log(o instanceof Object); //true
 console.log(b instanceof Boolean); //false
console.log(c instanceof String); //false

  此外,null和undefined都不是對象,所以instanceof 總是返回false。

console.log(null instanceof Object); //false console.log(undefined instanceof Object); //false

  利用instanceof運算符,還可以巧妙地解決,調用構造函數時,忘了加new命令的問題。

 function Keith(name,height) {
 if (! this instanceof Keith) {
 return new Keith(name,height);
 }
 this.name = name;
 this.height = height;
}

  上面代碼中,使用了instanceof運算符來判斷函數體內的this關鍵字是否指向構造函數Keith的實例,如果不是,就表明忘記加new命令,此時構造函數會返回一個對象實例,避免出現意想不到的結果。

  因為限於篇幅的原因,暫時介紹到這裡。

  我會在下次的分享中談談原型(prototype)對象的一些原生方法,如Object.getPrototypeOf(),Object.setPrototypeOf()等,並且介紹獲取原生對象方法的比較。

以上所述是小編給大家介紹的詳解Javascript中prototype屬性(推薦)的相關知識,希望對大家有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved