JavaScript的原型(prototype、__proto__、constructor)
構造函數:function Foo() {};
實例對象: let f1 = new Foo;
let o1 = new Foo;
(全文的proto指兩個下劃線中間proto)
- 一般函數都有
prototype
屬性,除了window.Math
和Function.prototype.bind()
(該屬性指向原型)等 - 一般對象都有
proto
屬性,除了Object.create(null)
等,該屬性指向了創建該對象的構造函數的原型。其實這個屬性指向了[[prototype]
,但是[[prototype]]
是內部屬性,我們並不能訪問到,所有采用proto
來訪問。總之,對象可以通過proto
來訪問不屬於該對象的屬性,proto
將對象連接起來組成了原型鏈。
概念:
- 構造函數:用來初始化新創建的對象的函數是構造函數。上例中,
Foo()
函數是構造函數。 - 實例對象:通過構造函數的
new
操作創建的對象是實例對象。(可以用一個構造函數,構造多個實例對象)
function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false
3.原型對象及prototype
:構造函數有一個prototype
屬性,指向對應實例對象的原型對象。通過同一個構造函數實例化的多個對象具有相同的原型對象。這個屬性可以用來實現繼承。
function Foo(){};
Foo.prototype.a = 1;
var f1 = new Foo;
var f2 = new Foo;
console.log(Foo.prototype.a);//1
console.log(f1.a);//1
console.log(f2.a);//1
4.constructor
:原型對象有一個constructor
屬性,指向該原型對象對應的構造函數。由於實例對象可以繼承原型對象的屬性,所以實例對象也擁有constructor
屬性,同樣指向原型對象對應的構造函數。
console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
5.ptoto
:實例對象有一個proto
屬性,指向該實例對象對應的原型對象。
console.log(f1.__proto__ === Foo.prototype);//true
第一部分:Foo
1、實例對象f1
是通過構造函數Foo()
的new
操作創建的。構造函數Foo()
的原型對象是Foo.prototype
;實例對象f1通過proto
屬性也指向原型對象Foo.prototype
。
console.log(f1.__proto === Foo.prototype);//true
2、實例對象f1
本身並沒有constructor
屬性,但它可以繼承原型對象Foo.prototype
的constructor
屬性
console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty('constructor'));//false
實例對象f1
的控制檯效果
第二部分:Object
1、Foo.prototype
是f1
的原型對象,同時它也是實例對象。實際上,任何對象都可以看做是通過Object()
構造函數的new
操作實例化的對象 所以,Foo.prototype
作爲實例對象,它的構造函數是Object()
,原型對象是Object.prototype
。相應地,構造函數Object()
的prototype
屬性指向原型對象Object.prototype
;實例對象Foo.prototype
的proto
屬性同樣指向原型對象Object.prototype
。
console.log(Foo.prototype.__proto__ === Object.prototype);//true
2、實例對象Foo.prototype
本身具有constructor
屬性,所以它會覆蓋繼承自原型對象Object.prototype
的constructor
屬性。
console.log(Foo.prototype.constructor === Foo);//true
console.log(Object.prototype.constructor === Object);//true
console.log(Foo.prototype.hasOwnProperty('constructor'));//true
下圖是實例對象Foo.prototype
的控制檯效果
3、Object.prototype
作爲實例對象的話,其原型對象是null。
console.log(Object.prototype.__proto__ === null);//true
第三部分:Function
1、前面已經介紹過,函數也是對象,只不過是具有特殊功能的對象而已。任何函數都可以看做是通過Function()
構造函數的new
操作實例化的結果。如果把函數Foo
當成實例對象的話,其構造函數是Function()
,其原型對象是Function.prototype
;類似地,函數Object
的構造函數也是Function()
,其原型對象是Function.prototype
。
console.log(Foo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true
2、原型對象Function.prototype
的constructor
屬性指向構造函數Function()
;實例對象Object
和Foo
本身沒有constructor
屬性,需要繼承原型對象Function.prototype
的constructor
屬性。
console.log(Function.prototype.constructor === Function);//true
console.log(Foo.constructor === Function);//true
console.log(Foo.hasOwnProperty('constructor'));//false
console.log(Object.constructor === Function);//true
console.log(Object.hasOwnProperty('constructor'));//false
3、所有的函數都可以看成是構造函數Function()
的new
操作的實例化對象。那麼,Function
可以看成是調用其自身的new
操作的實例化的結果。所以,如果Function
作爲實例對象,其構造函數是Function
,其原型對象是Function.prototype
。
console.log(Function.__proto__ === Function.prototype);//true
console.log(Function.prototype.constructor === Function);//true
console.log(Function.prototype === Function.prototype);//true
4、如果Function.prototype
作爲實例對象的話,其原型對象是什麼呢?和前面一樣,所有的對象都可以看成是Object()
構造函數的new
操作的實例化結果。所以,Function.prototype
的原型對象是Object.prototype
,其原型函數是Object()
。
console.log(Function.prototype.__proto__ === Object.prototype);//true
總結:
1、函數(Function
也是函數)是new Function
的結果,所以函數可以作爲實例對象,其構造函數是Function()
,原型對象是Function.prototype
;
2、對象(函數也是對象)是new Object
的結果,所以對象可以作爲實例對象,其構造函數是Object()
,原型對象是Object.prototype
;
3、Object.prototype
的原型對象是ull
。