秒懂JS物件 構造器函式和原型物件之間的關係

2021-08-15 17:28:04 字數 1499 閱讀 1618

學習js的過程中,想要掌握物件導向的程式設計風格,物件模型(原型和繼承)是其中的重點和難點,拜讀了各類經典書籍和各位前輩的技術文章,感覺都太過高深,花費了不少時間才搞明白(個人智商是硬傷/(ㄒoㄒ)/~~),這裡略作總結盡量通俗易懂。

一、基本概念

1、物件:屬性和方法的集合,即變數和函式的封裝。每個物件都有乙個__proto__屬性,指向這個物件的建構函式的原型物件。

2、構造器函式:用於建立物件的函式,通過new關鍵字生成物件。函式名一般首字母大寫的。

3、原型物件:每個函式都有乙個prototype屬性,它是乙個指向原型物件的指標(原型物件在定義函式時同時被建立)

二、建立物件的方法

1、使用建構函式和原型物件共同建立

如上圖,構造器函式person(),通過new關鍵字建立了兩個例項化物件p1、p2,這兩個新物件都繼承了,構造器person()函式prototype屬性所指向的原型物件。通過建構函式建立例項物件p1和p2的時候,其中name、age、job這些是通過建構函式生成的(本地部分),sayname方法是通過繼承原型物件來實現共享的(遠端部分),這樣多個例項物件都是由本地(私有)和遠端(共享)兩部分組成。還是不清楚,沒關係我們上**。

function person(name, age, job)

person.prototype =

}var p1 = new person("tom", 29, "teacher");//

例項化物件p1

//,object即原型物件:person.prototype指向的物件

var p2 = new person("jack", 27, "doctor");//

例項化物件p2

//

2、僅使用原型物件建立

如上圖,使用object.create方法從原型物件直接生成新的例項物件,新物件p1繼承原型物件的屬性和方法,但是這裡沒有用到建構函式

var person=//

將這個物件當做原型

var p1=object.create(person)//

生成例項物件

console.log(p1.classname)//

human,相當於p1.__proto__.classname

這樣表述還是感覺有些生硬,來點更形象的比喻吧~

建構函式是媽,原型物件是爸,例項物件是孩子。媽讓每個孩子擁有私有能力,爸讓它們擁有共有能力(這個共有能力其實都是爸代勞的/(ㄒoㄒ)/~~);沒有建構函式的情況下,可以直接理解為轉殖哦~怎麼樣,這樣應該能理解三者之間的關係了吧。

當然建立物件的方法遠不止這兩種,這裡有九種建立物件方法,oh no?我只想要個物件,為什麼這麼複雜?為了優化**,這個理由足夠吧。

JS物件 構造器函式和原型物件之間的關係

一 基本概念 1 物件 屬性和方法的集合,即變數和函式的封裝。每個物件都有乙個 proto 屬性,指向這個物件的建構函式的原型物件。2 構造器函式 用於建立物件的函式,通過new關鍵字生成物件。函式名一般首字母大寫的。3 原型物件 每個函式都有乙個prototype屬性,它是乙個指向原型物件的指標 ...

js建構函式和原型

建立物件的方式 1,物件字面量 var obj1 2,new object var obj2 new object 3,利用建構函式建立物件 建構函式 利用建構函式 可以建立很多個物件 建構函式,把物件中公共屬性和方法抽出來,放在建構函式裡,通過new建立不同的物件 function star na...

js 建構函式和原型鏈

比較new和object.create 建構函式 new 保留原建構函式屬性 object.create 丟失原建構函式屬性 原型鏈new 原建構函式prototype屬性 object.create 原建構函式 物件 本身 作用物件 new function object.create funct...