一、什么是原型

原型：每一個(gè)javascript對象(除null外)創(chuàng)建的時(shí)候，都會與之關(guān)聯(lián)另一個(gè)對象，這個(gè)對象就是我們所說的原型，每一個(gè)對象都會從原型中“繼承”屬性。

例如

var obj = new Object();

創(chuàng)建一個(gè)對象的時(shí)候都會同時(shí)關(guān)聯(lián)一個(gè)對象，如圖，關(guān)聯(lián)的這個(gè)對象就是新建的對象obj的原型

二、prototype

在JavaScript中，每個(gè)函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對象。（ps：函數(shù)其實(shí)也是一個(gè)對象，所以與上述一、中的例子不沖突）

var obj = new Object();

所謂的prototype其實(shí)就是對象與對象的原型關(guān)聯(lián)的屬性，如圖

例如：

 function Animal(weight) {
   this.weight = weight
 }

如圖表示對象與原型的關(guān)聯(lián)：

每一個(gè)對象都會從原型中“繼承”屬性

例如：cat1和cagt2實(shí)例化了Animal,在cat1和cagt2本身是沒有hieght屬性的，但是能打印出height的值均為10，其實(shí)是在cat1和cagt2繼承了原型Animal.prototype中的height屬性

 function Animal(weight) {
    this.weight = weight
  }
  Animal.prototype.height = 10
  var cat1 = new Animal()
  var cat2 = new Animal()
  console.log('cat1',cat1.height)//10
  console.log('cat2',cat2.height)//10

三、__proto__

這是每個(gè)對象(除null外)都會有的屬性，叫做__proto__，這個(gè)屬性會指向該對象的原型。

  function Animal(weight) {
     this.weight = weight
  }
  Animal.prototype.height = 10
  var cat1 = new Animal()
  var cat2 = new Animal()
 console.log('cat1.__proto__ === Animal.prototype',cat1.__proto__ === Animal.prototype)
 console.log('cat2.__proto__ === Animal.prototype',cat2.__proto__ === Animal.prototype)

__proto__和prototype

• __proto__是實(shí)例指向原型的屬性
• prototype是對象或者構(gòu)造函數(shù)指向原型的屬性

四、constructor

每個(gè)原型都有一個(gè)constructor屬性，指向該關(guān)聯(lián)的構(gòu)造函數(shù)。

  function Animal(weight) {
     this.weight = weight
  }
  Animal.prototype.height = 10
  var cat1 = new Animal()
  var cat2 = new Animal()
 console.log('cat1.__proto__ === Animal.prototype',cat1.__proto__ === Animal.prototype)
 console.log('Animal===Animal.prototype.constructor',Animal===Animal.prototype.constructor)
// 獲取原型對象
 console.log('Object.getPrototypeOf(cat1) === Animal.prototype',Object.getPrototypeOf(cat1) === Animal.prototype)

更新關(guān)系圖

cat1.__proto__?===?Animal.prototype

Animal?===?Animal.prototype.constructor

那么cat1.constructor?===?Animal為true 嗎？答案是true,因?yàn)槊恳粋€(gè)對象都會從原型中“繼承”屬性，cat1中并沒有屬性constructor ，但是它的原型cat1.__proto__ 指向的是Animal.prototype，然而Animal.prototype原型中是有屬性constructor的，于是cat1的constructor屬性繼承與原型中的constructor屬性。這里便能看出一點(diǎn)點(diǎn)原型鏈的影子了，我們接著看

因此cat1.constructor?===?Animal 也是 true

五、實(shí)例與原型

?當(dāng)讀取實(shí)例的屬性時(shí)，如果找不到，就會查找與對象關(guān)聯(lián)的原型中的屬性，如果還查不到，就去找原型的原型，一直找到最頂層為止。這樣就形成了原型鏈

function Animal(weight) {
   this.weight = weight
}
 Animal.prototype.name = 'animal'
 var cat1 = new Animal()
 cat1.name = 'littleCat'
 console.log('cat1.name',cat1.name)
 delete cat1.name;
 console.log('cat1.name',cat1.name)

可以看見，刪除屬性前，那么是littleCat，刪除那么屬性后，該實(shí)例沒有了name屬性，找不到name屬性的時(shí)候，它就會去 它的對象原型中去找也就是去cat1.__proto__中也就是Animal.prototype中去尋找，而Animal.prototype中的name屬性的值是animal，所以刪除name屬性后的值變成了原型中屬性name的值animal

那么接著來看，如果cat1的原型中也沒有name屬性呢？會怎么辦？去原型的原型中找？那么原型的原型是什么？

六、原型的原型

我們說原型是對象創(chuàng)建的時(shí)候關(guān)聯(lián)的另一個(gè)對象，那么原型也是一個(gè)對象，既然是對象那么原型也應(yīng)該關(guān)聯(lián)一個(gè)對象是原型的原型

那么原型對象創(chuàng)建的時(shí)候也會關(guān)聯(lián)一個(gè)對象

var obj = new Object();

看關(guān)系圖

那么Object.prototype的原型呢？

也就是 Object.prototype.__proto__是什么呢

console.log('Object.prototype.__proto__ === null',Object.prototype.__proto__ === null)

可以看到結(jié)果

也就說Object.prototype.__proto__ 的值為 null 即?Object.prototype 沒有原型，所以可以想象在原型鏈中，當(dāng)屬性找到頂層原型都沒有屬性那就是沒有這個(gè)屬性

七、原型鏈

綜上所述 ，將原型的實(shí)例賦值給另一個(gè)對象，另一個(gè)對象再賦值給其他的對象，在實(shí)際的代碼中對對象不同的賦值，就會形成一條原型鏈。這樣說可能很抽象，我們來看個(gè)例子

 function Animal(weight) {
     this.weight = weight
 }
 Animal.prototype.name = 'animal'
 var cat1 = new Animal()
 var pinkCat = cat1
 console.log('pinkCat.name',pinkCat.name)
 console.log('pinkCat.__proto__ === cat1.__proto__ == Animal.prototype',pinkCat.__proto__ === cat1.__proto__ == Animal.prototype)
 var samllPinkCat = pinkCat
 console.log('samllPinkCat.name',samllPinkCat.name)
 console.log(samllPinkCat.__proto__ == pinkCat.__proto__ === cat1.__proto__ == Animal.prototype)

以上就是原型鏈一層一層鏈接上去形成一條鏈條就是所謂的原型鏈；以上cat1實(shí)例化了Animal,cat1賦值給了pinkCat,pinkCat又賦值給了samllPinkCat，就形成看原型鏈，從samllPinkCat，pinkCat到cat1最后到Animal

以上所述是小編給大家介紹的深入了解javascript原型和原型鏈，希望對大家有所幫助。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論