JS複習--原型鏈小結

一段簡單代碼引入javascript

function Foo() {};

var f1 = new Foo();

圖片描述

1.概念簡單理解html

  • Foo()是構造函數,構造函數有一個prototype屬性
  • Foo.prototype 是f1的原型對象,有一個constructor屬性,指向該原型對象對應的構造函數,即
Foo.prototype.constructor

console.log(Foo.prototype.constructor === Foo);//true

console.log(f1._proto_=== Foo.prototype);//true

console.log(f1._proto_.constructor=== Foo);//true
  • f1是Foo的實例對象,自身沒有constructor屬性,但能夠繼承原型對象的屬性,即
console.log(f1.constructor === Foo);//true

console.log(f1.hasOwnProperty('constructor'));//false

2.結合demojava

原型鏈是對於構造函數而言的,首先定義一個構造函數,再實例化生成一個實例對象,可能在實例對象中沒有定義某個屬性,可是在構造函數中有,那麼它就會往上(向構造函數中)查找,這個查找的過程就叫作原型鏈。ide

function Foo(){};

Foo.prototype.name = "ziziyaya";

var foo=new Foo();

console.log(foo.name); //ziziyaya

3.爲何須要原型鏈函數

爲了實現繼承,具備相同特性的代碼不須要重複編寫,放在構造函數裏面,實例化的對象都會擁有裏面的屬性了,也就是能夠共享屬性和方法。ui

function Dog() {

    this.eat = 'food';

    this.smell = 'smart';

}

let dog1 = new Dog();

let dog2 = new Dog();

dog1.name = 'huang';

dog2.name = 'hei';

console.log(dog1.name+','+dog1.eat+','+dog1.smell);//huang,food,smart

console.log(dog2.name+','+dog2.eat+','+dog2.smell);//hei,food,smart

推薦文章:http://www.ruanyifeng.com/blo...this

4.繼續往上引伸--Foo.prototype的構造函數是Object(),原型對象是Object.prototypeidea

圖片描述

console.log(Foo.prototype.__proto__ === Object.prototype);//true

實例對象Foo.prototype自己具備constructor屬性,因此它會覆蓋繼承自原型對象Object.prototype的constructor屬性spa

下面是自身沒有constructor屬性,繼承自原型對象的f1和 自身有constructor屬性覆蓋了原型對象的Foo.prototype 截圖對比prototype

圖片描述

圖片描述

再往上引伸 若是Object.prototype做爲實例對象的話,其原型對象是什麼,結果是null
附加一篇簡潔易懂的原型鏈理解的文章 http://www.cnblogs.com/shuiyi...

相關文章
相關標籤/搜索