秒懂JS物件、構造器函式和原型物件之間的關係
學習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){//構造器函式 this.name = name; this.age = age; this.job = job; } Person.prototype = {//設定構造器函式prototype指定的物件,即重置原型物件 constructor : Person, sayName : function(){alert(this.name);} } var p1 = new Person("Tom", 29, "Teacher");//例項化物件p1 //{name:"Tom",age:29,job:"Teacher",__proto__:object},object即原型物件:Person.prototype指向的物件 var p2 = new Person("Jack", 27, "Doctor");//例項化物件p2 //{name:"Jack",age:27,job:"Doctor",__proto__:object}
2、僅使用原型物件建立
如上圖,使用Object.create方法從原型物件直接生成新的例項物件,新物件p1繼承原型物件的屬性和方法,但是這裡沒有用到建構函式
var person={ classname:'human'}//將這個物件當做原型
var p1=Object.create(person)//生成例項物件
console.log(p1.classname)//human,相當於p1.__proto__.classname
這樣表述還是感覺有些生硬,來點更形象的比喻吧~
建構函式是媽,原型物件是爸,例項物件是孩子。媽讓每個孩子擁有私有能力,爸讓它們擁有共有能力(這個共有能力其實都是爸代勞的/(ㄒoㄒ)/~~);沒有建構函式的情況下,可以直接理解為克隆哦~怎麼樣,這樣應該能理解三者之間的關係了吧。
當然建立物件的方法遠不止這兩種,這裡有九種建立物件方法,oh no?我只想要個物件,為什麼這麼複雜?為了優化程式碼,這個理由足夠吧。