1. 程式人生 > >JS對象、構造器函數和原型對象之間的關系

JS對象、構造器函數和原型對象之間的關系

構造 多個實例 關系 http 原型對象 job rop 關鍵字 creat

一、基本概念

  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ㄒ)/~~);

JS對象、構造器函數和原型對象之間的關系