在Javascript不存在類（Class）的概念，javascript中不是基于類的，而是通過構造函數（constructor）和原型鏈（prototype chains）實現的。但是在ES6中引入了Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。基本上，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓原型對象的寫法更加清晰、更像面向對象編程的語法而已。

?

1.構造函數的簡單介紹

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

　　構造函數的特點有：

　　　　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屬性。

函數有一個特有的屬性——原型屬性（prototype），這個屬性是一個指針，指向一個對象，這個對象的用途就是包含所有實例共享的屬性和方法（我們把這個對象叫做原型對象）。通過prototype定義的屬性及方法能被所有對象實例所共享，這就是prototype的意義。

通過構造函數生成對象實例時，會將對象實例的原型指向構造函數的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）。比如，b對象是a對象的原型，c對象是b對象的原型，以此類推。所有一切的對象的原型頂端，都是Object.prototype，即Object構造函數的prototype屬性指向的那個對象。

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

console.log(Object.getPrototypeOf(Object.prototype)); //null 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"]

?

5.constructor屬性

對象實例的constructor屬性返回對象實例的構造函數。

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

constructor 屬性實際上是原型對象的屬性，這個屬性包含了一個指針，指回原構造函數，它被所有實例對象繼承。

function A(){}; var a = new A(); console.log(A.prototype.constructor === A) //true 通過原型對象訪問constructor屬性返回的是原型對象所處的構造函數 console.log(a.constructor === A.prototype.constructor);//true

?

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

5.1：constructor屬性的作用

　　a：判斷對象實例的構造函數

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

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

function A() {}; var a = new A(); var b = new a.constructor(); //從a.constructor間接調用構造函數。 console.log(b instanceof A); //true

?

6.instanceof運算符

instanceof 判斷對象是否為某個構造函數的實例。

function A() {}; var a = new A(); console.log(a instanceof A); //true console.log(a instanceof Object); //true 對整個原型鏈上的對象都有效

?

注意，instanceof對象只能用于復雜數據類型（數組，對象等），不能用于簡單數據類型（布爾值，數字，字符串等）。而且?null 和 undefined 都不是對象，所以instanceof 總是返回false。

console.log([1] instanceof Array); //true console.log({} instanceof Object); //true console.log(true instanceof Boolean); //false console.log('aaa' instanceof String); //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; }

?

7、__proto__屬性（注意兩邊都是兩個_符號）

屬性 __proto__ 返回對象實例的原型對象，通過該屬性可以訪問原型對象的所有方法。

var Person = function(name){this.name = name; } var a = new Person('jack'); console.log(a.__proto__ === Person.prototype); //true 同理，Person也有原型對象，通過Person的 __proto__ 屬性也可以訪問到它的原型對象，以此類推，可以實現原型鏈的向上追溯。

可以通過 __proto__ 屬性繼承其他對象的屬性，但非常不建議這么做，對性能影響非常大。詳情查看：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

var Person = function (name) {this.name = name; } var a = new Person('jack'); console.log(a.name); //jack var b = {age: 10 } a.__proto__ = b; console.log(a.name,a.age); //jack 10

相對于通過 __proto__ 屬性繼承其他對象的屬性而言，Object.create() 方法是一個更加值得推薦的方法。該方法接收一個對象作為參數，返回一個以該對象為原型對象的新對象，即繼承了作為參數的對象的屬性及方法。

let b = {age: 10 } let a = Object.create(b); console.log(a.age); //10

8、Function.prototype和Object.prototype

Function 和 Object 其實就是一個構造函數。

function Person(a,b){this.a = a;this.b = b; } let man = new Person('a','b'); console.log(Person.constructor); //? Function() { [native code] } console.log(Person.constructor.constructor); //? Function() { [native code] } console.log(Function == Person.constructor); //true console.log(Function.prototype == Person.__proto__); //true let obj = {} console.log(obj.constructor); //? Object() { [native code] } console.log(Object == obj.constructor); //true console.log(Object.prototype == obj.__proto__); //true

面試題：是否所有的對象都繼承 Object

不是，js中不是所有對象都繼承Object，也有特例，null 和 undefined 不是繼承自 Object。

?

轉載于:https://www.cnblogs.com/wenxuehai/p/10178865.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JS中关于构造函数、原型链、prototype、constructor、instanceof、__proto__属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。