學習JavaScript的原型筆記

JavaScript的原型(prototype、proto、constructor)

構造函數:function Foo() {}; 實例對象: let f1 = new Foo; let o1 = new Foo;javascript

(全文的proto指兩個下劃線中間proto)java

  • 通常函數都有prototype屬性,除了window.MathFunction.prototype.bind()(該屬性指向原型)等
  • 通常對象都有proto屬性,除了Object.create(null)等,該屬性指向了建立該對象的構造函數的原型。其實這個屬性指向了[[prototype],可是[[prototype]]是內部屬性,咱們並不能訪問到,全部採用proto來訪問。總之,對象能夠經過proto來訪問不屬於該對象的屬性,proto將對象鏈接起來組成了原型鏈。

概念:

  1. 構造函數:用來初始化新建立的對象的函數是構造函數。上例中,Foo()函數是構造函數。
  2. 實例對象:經過構造函數的new操做建立的對象是實例對象。(能夠用一個構造函數,構造多個實例對象)
function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false
複製代碼
  1. 原型對象及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
複製代碼
  1. constructor:原型對象有一個constructor屬性,指向該原型對象對應的構造函數。因爲實例對象能夠繼承原型對象的屬性,因此實例對象也擁有constructor屬性,一樣指向原型對象對應的構造函數。
console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
複製代碼
  1. ptoto:實例對象有一個proto屬性,指向該實例對象對應的原型對象。
console.log(f1.__proto__ === Foo.prototype);//true
複製代碼

第一部分:Foo

一、實例對象 f1是經過構造函數 Foo()new操做建立的。構造函數 Foo()的原型對象是 Foo.prototype;實例對象f1經過 proto屬性也指向原型對象 Foo.prototype

console.log(f1.__proto === Foo.prototype);//true
複製代碼

二、實例對象f1自己並無constructor屬性,但它能夠繼承原型對象Foo.prototypeconstructor屬性函數

console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty('constructor'));//false
複製代碼

實例對象f1的控制檯效果ui

第二部分:Object

一、 Foo.prototypef1的原型對象,同時它也是實例對象。實際上,任何對象均可以看作是經過 Object()構造函數的 new操做實例化的對象 因此, Foo.prototype做爲實例對象,它的構造函數是 Object(),原型對象是 Object.prototype。相應地,構造函數 Object()prototype屬性指向原型對象 Object.prototype;實例對象 Foo.prototypeproto屬性一樣指向原型對象 Object.prototype

console.log(Foo.prototype.__proto__ === Object.prototype);//true
複製代碼

二、實例對象Foo.prototype自己具備constructor屬性,因此它會覆蓋繼承自原型對象Object.prototypeconstructor屬性。spa

console.log(Foo.prototype.constructor === Foo);//true
console.log(Object.prototype.constructor === Object);//true
console.log(Foo.prototype.hasOwnProperty('constructor'));//true
複製代碼

下圖是實例對象Foo.prototype的控制檯效果prototype

三、 Object.prototype做爲實例對象的話,其原型對象是null。

console.log(Object.prototype.__proto__ === null);//true
複製代碼

第三部分:Function

一、前面已經介紹過,函數也是對象,只不過是具備特殊功能的對象而已。任何函數均可以看作是經過 Function()構造函數的 new操做實例化的結果。若是把函數 Foo當成實例對象的話,其構造函數是 Function(),其原型對象是 Function.prototype;相似地,函數 Object的構造函數也是 Function(),其原型對象是 Function.prototype

console.log(Foo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true
複製代碼

二、原型對象Function.prototypeconstructor屬性指向構造函數Function();實例對象ObjectFoo自己沒有constructor屬性,須要繼承原型對象Function.prototypeconstructor屬性。3d

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
複製代碼

三、全部的函數均可以當作是構造函數Function()new操做的實例化對象。那麼,Function能夠當作是調用其自身的new操做的實例化的結果。因此,若是Function做爲實例對象,其構造函數是Function,其原型對象是Function.prototypecode

console.log(Function.__proto__ === Function.prototype);//true
console.log(Function.prototype.constructor === Function);//true
console.log(Function.prototype === Function.prototype);//true
複製代碼

四、若是Function.prototype做爲實例對象的話,其原型對象是什麼呢?和前面同樣,全部的對象均可以當作是Object()構造函數的new操做的實例化結果。因此,Function.prototype的原型對象是Object.prototype,其原型函數是Object()cdn

console.log(Function.prototype.__proto__ === Object.prototype);//true
複製代碼

總結:

一、函數(Function也是函數)是new Function的結果,因此函數能夠做爲實例對象,其構造函數是Function(),原型對象是Function.prototype; 二、對象(函數也是對象)是new Object的結果,因此對象能夠做爲實例對象,其構造函數是Object(),原型對象是Object.prototype; 三、Object.prototype的原型對象是ull對象

歡迎關注
相關文章
相關標籤/搜索