在典型的面向?qū)ο蟮恼Z言中，如java，都存在類（class）的概念，類就是對象的模板，對象就是類的實(shí)例。但是在Javascript語言體系中，是不存在類（Class）的概念的，javascript中不是基于‘類的'，而是通過構(gòu)造函數(shù)（constructor）和原型鏈（prototype chains）實(shí)現(xiàn)的。但是在ES6中提供了更接近傳統(tǒng)語言的寫法，引入了Class（類）這個概念，作為對象的模板。通過class關(guān)鍵字，可以定義類?；旧?，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓原型對象的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。

　　按照我的習(xí)慣，在寫文章前我會給出文章目錄。

　　以下內(nèi)容會分為如下小節(jié)：

　　1.構(gòu)造函數(shù)的簡單介紹

　　2.構(gòu)造函數(shù)的缺點(diǎn)

　　3.prototype屬性的作用

　　4.原型鏈（prototype chain）

　　5.constructor屬性

　　　　5.1：constructor屬性的作用

　　6.instanceof運(yùn)算符

1.構(gòu)造函數(shù)的簡單介紹

　　在我的一篇Javascript 中構(gòu)造函數(shù)與new命令的密切關(guān)系文章中，詳細(xì)了介紹了構(gòu)造函數(shù)的概念和特點(diǎn)，new命令的原理和用法等，如果對于構(gòu)造函數(shù)不熟悉的同學(xué)，可以前往細(xì)細(xì)品味。以下做一個簡單的回顧。

　　所謂構(gòu)造函數(shù)，就是提供了一個生成對象的模板并描述對象的基本結(jié)構(gòu)的函數(shù)。一個構(gòu)造函數(shù)，可以生成多個對象，每個對象都有相同的結(jié)構(gòu)?？偟膩碚f，構(gòu)造函數(shù)就是對象的模板，對象就是構(gòu)造函數(shù)的實(shí)例。

　　構(gòu)造函數(shù)的特點(diǎn)有：

　　　　a：構(gòu)造函數(shù)的函數(shù)名首字母必須大寫。

　　　　b：內(nèi)部使用this對象，來指向?qū)⒁傻膶ο髮?shí)例。

　　　　c：使用new操作符來調(diào)用構(gòu)造函數(shù)，并返回對象實(shí)例。

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

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

2.構(gòu)造函數(shù)的缺點(diǎn)

　　所有的實(shí)例對象都可以繼承構(gòu)造函數(shù)中的屬性和方法。但是，同一個對象實(shí)例之間，無法共享屬性。

 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

　上面代碼中，一個構(gòu)造函數(shù)Person生成了兩個對象實(shí)例boy和girl，并且有兩個屬性和一個方法。但是，它們的hobby方法是不一樣的。也就是說，每當(dāng)你使用new來調(diào)用構(gòu)造函數(shù)放回一個對象實(shí)例的時(shí)候，都會創(chuàng)建一個hobby方法。這既沒有必要，又浪費(fèi)資源，因?yàn)樗衕obby方法都是童顏的行為，完全可以被兩個對象實(shí)例共享。

　　所以，構(gòu)造函數(shù)的缺點(diǎn)就是：同一個構(gòu)造函數(shù)的對象實(shí)例之間無法共享屬性或方法。

3.prototype屬性的作用

　　為了解決構(gòu)造函數(shù)的對象實(shí)例之間無法共享屬性的缺點(diǎn)，js提供了prototype屬性。

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

　　原型對象上的所有屬性和方法，都會被對象實(shí)例所共享。

　　通過構(gòu)造函數(shù)生成對象實(shí)例時(shí)，會將對象實(shí)例的原型指向構(gòu)造函數(shù)的prototype屬性。每一個構(gòu)造函數(shù)都有一個prototype屬性，這個屬性就是對象實(shí)例的原型對象。

 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方法放在原型對象上，那么兩個實(shí)例對象都共享著同一個方法。我希望大家都能理解的是，對于構(gòu)造函數(shù)來說，prototype是作為構(gòu)造函數(shù)的屬性；對于對象實(shí)例來說，prototype是對象實(shí)例的原型對象。所以prototype即是屬性，又是對象。

　　原型對象的屬性不是對象實(shí)例的屬性。對象實(shí)例的屬性是繼承自構(gòu)造函數(shù)定義的屬性，因?yàn)闃?gòu)造函數(shù)內(nèi)部有一個this關(guān)鍵字來指向?qū)⒁傻膶ο髮?shí)例。對象實(shí)例的屬性，其實(shí)就是構(gòu)造函數(shù)內(nèi)部定義的屬性。只要修改原型對象上的屬性和方法，變動就會立刻體現(xiàn)在所有對象實(shí)例上。

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

　　上面代碼中，當(dāng)修改了原型對象的hobby方法之后，兩個對象實(shí)例都發(fā)生了變化。這是因?yàn)閷ο髮?shí)例其實(shí)是沒有hobby方法，都是讀取原型對象的hobby方法。也就是說，當(dāng)某個對象實(shí)例沒有該屬性和方法時(shí)，就會到原型對象上去查找。如果實(shí)例對象自身有某個屬性或方法，就不會去原型對象上查找。

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

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

　　總結(jié)一下：

　　a：原型對象的作用，就是定義所有對象實(shí)例所共享的屬性和方法。

　　b：prototype，對于構(gòu)造函數(shù)來說，它是一個屬性；對于對象實(shí)例來說，它是一個原型對象。

4.原型鏈（prototype chains）

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

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

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

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

　　原型鏈（prototype chain）的特點(diǎn)有：

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

　　　　b：如果對象自身和它的原型，都定義了一個同名屬性，那么優(yōu)先讀取對象自身的屬性，這叫做“覆蓋”（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

 　　上面代碼中，定了一個數(shù)組arr，數(shù)組里面有三個元素。我們并沒有給數(shù)組添加任何屬性和方法，可是卻在調(diào)用length，join()，valueOf()時(shí)，卻不會報(bào)錯。

　　length屬性是繼承自Array.prototype的，屬于原型對象上的一個屬性。join方法也是繼承自Array.prototype的，屬于原型對象上的一個方法。這兩個方法是所有數(shù)組所共享的。當(dāng)實(shí)例對象上沒有這個length屬性時(shí)，就會去原型對象查找。

　　valueOf方法是繼承自O(shè)bject.prototype的。首先，arr數(shù)組是沒有valueOf方法的，所以就到原型對象Array.prototype查找。然后，發(fā)現(xiàn)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中比較重要又比較抽象的概念,不可能那么快就掌握，再啃多幾篇，說不定掌握其精髓。在某乎上，有一個活生生的實(shí)例，可能也是大家會遇到的問題?？梢钥纯?js構(gòu)造函數(shù)和原型對象。

5.constructor屬性

　　prototype對象有一個constructor屬性，默認(rèn)指向prototype對象所在的構(gòu)造函數(shù)。

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

　　要注意的是，prototype是構(gòu)造函數(shù)的屬性，而constructor則是構(gòu)造函數(shù)的prototype屬性所指向的那個對象，也就是原型對象的屬性。注意不要混淆。

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

　　由于constructor屬性是定義在原型（prototype）對象上面，意味著可以被所有實(shí)例對象繼承。

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

　　上面代碼中，a是構(gòu)造函數(shù)A的實(shí)例對象，但是a自身沒有contructor屬性，該屬性其實(shí)是讀取原型鏈上面的

A.prototype.constructor屬性。

　　5.1：constructor屬性的作用

　　　a：分辨原型對象到底屬于哪個構(gòu)造函數(shù)

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

　　　　上面代碼表示，使用constructor屬性，確定實(shí)例對象a的構(gòu)造函數(shù)是A，而不是Array。

　　　　b：從實(shí)例新建另一個實(shí)例

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

　　　　上面代碼中，a是構(gòu)造函數(shù)A的實(shí)例對象，可以從a.constructor間接調(diào)用構(gòu)造函數(shù)。

　　　　c：調(diào)用自身的構(gòu)造函數(shù)成為可能

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

　　　　d：提供了一種從構(gòu)造函數(shù)繼承另外一種構(gòu)造函數(shù)的模式

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

　　　　上面代碼中，F(xiàn)ather和Son都是構(gòu)造函數(shù)，在Son內(nèi)部的this上調(diào)用Father，就會形成Son繼承Father的效果。

　　　　e：由于constructor屬性是一種原型對象和構(gòu)造函數(shù)的關(guān)系，所以在修改原型對象的時(shí)候，一定要注意constructor的指向問題。

　　　　解決方法有兩種，要么將constructor屬性指向原來的構(gòu)造函數(shù)，要么只在原型對象上添加屬性和方法，避免instanceof失真。

6.instanceof運(yùn)算符

　　instanceof運(yùn)算符返回一個布爾值，表示指定對象是否為某個構(gòu)造函數(shù)的實(shí)例。

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

　　因?yàn)閕nstanceof對整個原型鏈上的對象都有效，所以同一個實(shí)例對象，可能會對多個構(gòu)造函數(shù)都返回true。

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

　注意，instanceof對象只能用于復(fù)雜數(shù)據(jù)類型（數(shù)組，對象等），不能用于簡單數(shù)據(jù)類型（布爾值，數(shù)字，字符串等）。

 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運(yùn)算符，還可以巧妙地解決，調(diào)用構(gòu)造函數(shù)時(shí)，忘了加new命令的問題。

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

　　上面代碼中，使用了instanceof運(yùn)算符來判斷函數(shù)體內(nèi)的this關(guān)鍵字是否指向構(gòu)造函數(shù)Keith的實(shí)例，如果不是，就表明忘記加new命令，此時(shí)構(gòu)造函數(shù)會返回一個對象實(shí)例，避免出現(xiàn)意想不到的結(jié)果。

　 因?yàn)橄抻谄脑?，暫時(shí)介紹到這里。

　　我會在下次的分享中談?wù)勗停╬rototype）對象的一些原生方法，如Object.getPrototypeOf()，Object.setPrototypeOf()等，并且介紹獲取原生對象方法的比較。

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

最新評論