學(xué)習(xí)JavaScript的原型筆記

Nino 發(fā)布于2019-08-26 13:28 / 2061人閱讀

摘要：通過同一個(gè)構(gòu)造函數(shù)實(shí)例化的多個(gè)對象具有相同的原型對象。構(gòu)造函數(shù)的原型對象是實(shí)例對象通過屬性也指向原型對象。如果把函數(shù)當(dāng)成實(shí)例對象的話，其構(gòu)造函數(shù)是，其原型對象是類似地，函數(shù)的構(gòu)造函數(shù)也是，其原型對象是。

JavaScript的原型(prototype、__proto__、constructor)

構(gòu)造函數(shù)：function Foo() {};
實(shí)例對象： let f1 = new Foo;
let o1 = new Foo;

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

一般函數(shù)都有prototype屬性，除了window.Math和Function.prototype.bind()（該屬性指向原型）等

一般對象都有proto屬性，除了Object.create(null)等，該屬性指向了創(chuàng)建該對象的構(gòu)造函數(shù)的原型。其實(shí)這個(gè)屬性指向了[[prototype]，但是[[prototype]]是內(nèi)部屬性，我們并不能訪問到，所有采用proto來訪問?？傊瑢ο罂梢酝ㄟ^proto來訪問不屬于該對象的屬性，proto將對象連接起來組成了原型鏈。

概念：

構(gòu)造函數(shù)：用來初始化新創(chuàng)建的對象的函數(shù)是構(gòu)造函數(shù)。上例中，Foo()函數(shù)是構(gòu)造函數(shù)。

實(shí)例對象：通過構(gòu)造函數(shù)的new操作創(chuàng)建的對象是實(shí)例對象。（可以用一個(gè)構(gòu)造函數(shù)，構(gòu)造多個(gè)實(shí)例對象）

function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false

3.原型對象及prototype：構(gòu)造函數(shù)有一個(gè)prototype屬性，指向?qū)?yīng)實(shí)例對象的原型對象。通過同一個(gè)構(gòu)造函數(shù)實(shí)例化的多個(gè)對象具有相同的原型對象。這個(gè)屬性可以用來實(shí)現(xiàn)繼承。

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：原型對象有一個(gè)constructor屬性，指向該原型對象對應(yīng)的構(gòu)造函數(shù)。由于實(shí)例對象可以繼承原型對象的屬性，所以實(shí)例對象也擁有constructor屬性，同樣指向原型對象對應(yīng)的構(gòu)造函數(shù)。

console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true

5.ptoto：實(shí)例對象有一個(gè)proto屬性，指向該實(shí)例對象對應(yīng)的原型對象。

console.log(f1.__proto__ === Foo.prototype);//true

第一部分：Foo

1、實(shí)例對象f1是通過構(gòu)造函數(shù)Foo()的new操作創(chuàng)建的。構(gòu)造函數(shù)Foo()的原型對象是Foo.prototype；實(shí)例對象f1通過proto屬性也指向原型對象Foo.prototype。

console.log(f1.__proto === Foo.prototype);//true

2、實(shí)例對象f1本身并沒有constructor屬性，但它可以繼承原型對象Foo.prototype的constructor屬性

console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty("constructor"));//false

實(shí)例對象f1的控制臺效果

第二部分：Object

1、Foo.prototype是f1的原型對象，同時(shí)它也是實(shí)例對象。實(shí)際上，任何對象都可以看做是通過Object()構(gòu)造函數(shù)的new操作實(shí)例化的對象所以，Foo.prototype作為實(shí)例對象，它的構(gòu)造函數(shù)是Object()，原型對象是Object.prototype。相應(yīng)地，構(gòu)造函數(shù)Object()的prototype屬性指向原型對象Object.prototype；實(shí)例對象Foo.prototype的proto屬性同樣指向原型對象Object.prototype。

console.log(Foo.prototype.__proto__ === Object.prototype);//true

2、實(shí)例對象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

下圖是實(shí)例對象Foo.prototype的控制臺效果

3、Object.prototype作為實(shí)例對象的話，其原型對象是null。

console.log(Object.prototype.__proto__ === null);//true

第三部分：Function

1、前面已經(jīng)介紹過，函數(shù)也是對象，只不過是具有特殊功能的對象而已。任何函數(shù)都可以看做是通過Function()構(gòu)造函數(shù)的new操作實(shí)例化的結(jié)果。如果把函數(shù)Foo當(dāng)成實(shí)例對象的話，其構(gòu)造函數(shù)是Function()，其原型對象是Function.prototype；類似地，函數(shù)Object的構(gòu)造函數(shù)也是Function()，其原型對象是Function.prototype。

console.log(Foo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true

2、原型對象Function.prototype的constructor屬性指向構(gòu)造函數(shù)Function()；實(shí)例對象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、所有的函數(shù)都可以看成是構(gòu)造函數(shù)Function()的new操作的實(shí)例化對象。那么，Function可以看成是調(diào)用其自身的new操作的實(shí)例化的結(jié)果。所以，如果Function作為實(shí)例對象，其構(gòu)造函數(shù)是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作為實(shí)例對象的話，其原型對象是什么呢？和前面一樣，所有的對象都可以看成是Object()構(gòu)造函數(shù)的new操作的實(shí)例化結(jié)果。所以，Function.prototype的原型對象是Object.prototype，其原型函數(shù)是Object()。

console.log(Function.prototype.__proto__ === Object.prototype);//true

總結(jié)：

1、函數(shù)(Function也是函數(shù))是new Function的結(jié)果，所以函數(shù)可以作為實(shí)例對象，其構(gòu)造函數(shù)是Function()，原型對象是Function.prototype；
2、對象(函數(shù)也是對象)是new Object的結(jié)果，所以對象可以作為實(shí)例對象，其構(gòu)造函數(shù)是Object()，原型對象是Object.prototype；
3、Object.prototype的原型對象是ull。

GPU云服務(wù)器云服務(wù)器 javascript學(xué)習(xí)筆記 javascript原型 javascript的學(xué)習(xí) 學(xué)習(xí)javascript的

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/108863.html

發(fā)表評論

登陸后可評論

0條評論

Nino

男|高級講師

我要關(guān)注我要私信

TA的文章

10g.biz九月促銷：美國站群首月半價(jià),香港獨(dú)服1.5折;香港+美國CN2 GIA線路云服務(wù)器$2

閱讀 2139·2021-09-07 10:14
CSS3幀動(dòng)畫

閱讀 1551·2019-08-30 15:53
css--布局

閱讀 2323·2019-08-30 12:43
思否網(wǎng)站隨屏幕大小自動(dòng)發(fā)生變化

閱讀 2920·2019-08-29 16:37
移動(dòng)端網(wǎng)頁布局適配rem方案小結(jié)

閱讀 805·2019-08-26 13:29
學(xué)習(xí)JavaScript的原型筆記

閱讀 2062·2019-08-26 13:28
javascript 異步編程

閱讀 498·2019-08-23 18:33
解決<el-checkbox-group> 數(shù)據(jù)與UI更新不同步的坑

閱讀 3632·2019-08-23 16:09

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

學(xué)習(xí)JavaScript的原型筆記

相關(guān)文章

**重學(xué)前端學(xué)習(xí)筆記（八）--JavaScript中的原型和類**

**重學(xué)前端學(xué)習(xí)筆記（八）--JavaScript中的原型和類**

**重學(xué)前端學(xué)習(xí)筆記（八）--JavaScript中的原型和類**

javascript對象和原型對象學(xué)習(xí)筆記

JavaScript學(xué)習(xí)第十天筆記（繼承）

發(fā)表評論

0條評論

Nino

男|高級講師

TA的文章

10g.biz九月促銷：美國站群首月半價(jià),香港獨(dú)服1.5折;香港+美國CN2 GIA線路云服務(wù)器$2

CSS3幀動(dòng)畫

css--布局

思否網(wǎng)站隨屏幕大小自動(dòng)發(fā)生變化

移動(dòng)端網(wǎng)頁布局適配rem方案小結(jié)