1. 程式人生 > 其它 >秒懂JS物件、構造器函式和原型物件之間的關係

秒懂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?我只想要個物件,為什麼這麼複雜?為了優化程式碼,這個理由足夠吧。