1、原型對象（原型）、原型鏈

　　先放一張在網上看到的關于原型和原型鏈的圖，非常不錯。

　　如果你能看懂，那就對原型鏈有了一定了解，如果看不懂，對照下面這幾點來看圖：

js中所有函數都有一個prototype屬性，這個屬性引用了一個對象（fun.prototype），即原型對象，也簡稱為原型（下面都稱原型）

所有原型都有constructor屬性和__proto__屬性

constructor屬性指向原函數（方法）

__proto__屬性指向自己的繼承父類 （即它的構造函數的原型）

第四點得到的結果，又回到了第二點，這樣就構成了原型鏈。

js中一切皆對象，而對象都有一個__proto__屬性，這也解釋了原型為什么有這個屬性。

Object.prototype的_proto_指向null（最頂級的原型對象），所有原型鏈的最頂層都是Object.prototype

補充：

instanceof 運算符：A instanceof B ?檢查 A的原型鏈上是否存在B.prototype。 console.log([1,2,3] instanceof Array); // true console.log([1,2,3] instanceof Object); // true

深入了解instanceof ：?JavaScript instanceof 運算符深入剖析

Function是最頂層的構造方法，所有對象都由Function方法構造，包括Object方法，Function方法。 console.log(Object instanceof Function); 　　　　 //true console.log(Function instanceof Function); 　　//true （上圖可以看出三個函數對象的__proto__都指向了Function.prototype）

Object對象和Function方法是相互依賴的 alert(Function instanceof Object); // true

?和2對比，可以看出。

原型鏈只有在檢索值的時候才會用到，如果我們嘗試去獲取對象的某個屬性值，但該對象沒有此屬性值，那么js就會在其原型對象中找，如果還沒有，那么再從它的原型中找，直到Object.prototype，如果該對象原型鏈中也沒有找到，則返回undefined。

　　　Object.create方法

　　　　內部原理：

　　　　 if(typeof Object.beget !== 'function') {Object.create = function(o) {var F = function () {};F.prototype = o;return new F();}}

?

　　這個方法創建一個使用原對象作為其原型的新對象。

　　　　 var obj = {'a': 'a','b': 'b'}var obj1 = Object.create(obj);obj1.__proto__.c = 'c';
　　　　　console.log(obj);　　　　　　　　　　　　// {a:'a',b:'b',c:'c'}　　　　可以看出obj1使用obj作為其構造函數原型

　　用途：在工廠函數中，將相同的屬性和方法放在構造函數的原型鏈中，不同的放在構造函數中。

?

?

2、構造函數

function Foo() {} var foo = new Foo();

　　1、構造函數也是函數，未了區分，構造函數的函數名首字母大寫。（不是必須，但最好）

　　2、new的內部實現原理：（建議理解原型和原型鏈，在返回來看這個）

var foo = {};foo.__proto__ = Foo.prototype;Foo.call(foo);

　　通過上面的代碼可以看出：通過實例化構造函數，所生成的對象，它的繼承父類（foo.__proto__）就是構造函數的原型（Foo.prototype）。

function Foo () {this.a = 'a';this.b = 'b'; } var obj1 = new Foo(); var obj2 = {a: 'a',b: 'b' } console.log(‘obj1的構造函數是： ’ + obj1.__proto__.constructor);　　　　　　　　// obj1的構造函數是： function Foo () { this.a = 'a'; this.b = 'b';} console.log(‘obj2的構造函數是： ’ + obj2.__proto__.constructor);　　　　　　　　// obj2的構造函數是： function Object() { [native code] }

??我的博客

轉載于:https://www.cnblogs.com/seeks/p/7724444.html

總結

以上是生活随笔為你收集整理的javascript原型对象、原型链、构造函数的全部內容，希望文章能夠幫你解決所遇到的問題。

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