轉載：https://www.cnblogs.com/douyage/p/8630529.html
在典型的面向對象的語言中，如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操作符來調用構造函數，並返回對象實例。
看一個最簡單的一個例子。
|
1
2
3
4
5
|
function
Person(){
this
.name =
'keith'
;
}
var
boy =
new
Person();
console.log(boy.name);
//'keith'
|
2.構造函數的缺點
所有的實例對象都可以繼承構造函數中的屬性和方法。但是，同一個對象實例之間，無法共享屬性。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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屬性，這個屬性就是對象實例的原型對象。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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關鍵字來指向將要生成的對象實例。對象實例的屬性，其實就是構造函數內部定義的屬性。只要修改原型對象上的屬性和方法，變動就會立刻體現在所有對象實例上。
上面代碼中，當修改了原型對象的hobby方法之后，兩個對象實例都發生了變化。這是因為對象實例其實是沒有hobby方法，都是讀取原型對象的hobby方法。也就是說，當某個對象實例沒有該屬性和方法時，就會到原型對象上去查找。如果實例對象自身有某個屬性或方法，就不會去原型對象上查找。
|
1
2
3
4
5
|
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：一級級向上在原型鏈尋找某個屬性，對性能是有影響的。所尋找的屬性在越上層的原型對象，對性能的影響越大。如果尋找某個不存在的屬性，將會遍歷整個原型鏈。
看概念可能比較晦澀，我們來看一個例子。但是理解了概念真的很重要。
上面代碼中，定了一個數組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對象分別有什么屬性和方法。
|
1
2
3
4
|
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對象所在的構造函數。
要注意的是，prototype是構造函數的屬性，而constructor則是構造函數的prototype屬性所指向的那個對象，也就是原型對象的屬性。注意不要混淆。
由於constructor屬性是定義在原型（prototype）對象上面，意味着可以被所有實例對象繼承。
|
1
2
3
4
|
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：分辨原型對象到底屬於哪個構造函數
|
1
2
3
4
|
function
A(){};
var
a=
new
A();
console.log(a.constructor===A)
//true
console.log(a.constructor===Array)
//false
|
上面代碼表示，使用constructor屬性，確定實例對象a的構造函數是A，而不是Array。
b：從實例新建另一個實例
|
1
2
3
4
|
function
A() {};
var
a =
new
A();
var
b =
new
a.constructor();
console.log(b
instanceof
A);
//true
|
上面代碼中，a是構造函數A的實例對象，可以從a.constructor間接調用構造函數。
c：調用自身的構造函數成為可能
|
1
2
3
|
A.prototype.hello =
function
() {
return
new
this
.constructor();
}
|
d：提供了一種從構造函數繼承另外一種構造函數的模式
|
1
2
3
4
5
|
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運算符返回一個布爾值，表示指定對象是否為某個構造函數的實例。
因為instanceof對整個原型鏈上的對象都有效，所以同一個實例對象，可能會對多個構造函數都返回true。
注意，instanceof對象只能用於復雜數據類型（數組，對象等），不能用於簡單數據類型（布爾值，數字，字符串等）。
此外，null和undefined都不是對象，所以instanceof 總是返回false。
利用instanceof運算符，還可以巧妙地解決，調用構造函數時，忘了加new命令的問題。
上面代碼中，使用了instanceof運算符來判斷函數體內的this關鍵字是否指向構造函數Keith的實例，如果不是，就表明忘記加new命令，此時構造函數會返回一個對象實例，避免出現意想不到的結果。
因為限於篇幅的原因，暫時介紹到這里。
我會在下次的分享中談談原型（prototype）對象的一些原生方法，如Object.getPrototypeOf()，Object.setPrototypeOf()等，並且介紹獲取原生對象方法的比較。
以上所述是小編給大家介紹的詳解Javascript中prototype屬性(推薦)的相關知識，希望對大家有所幫助