1. 程式人生 > >理解Javascript的原型鏈

理解Javascript的原型鏈

實例化 https 所在 con set 構造函數 TE nbsp cal

要理解原型鏈,首先要清楚理解以下幾點:

  1.所有函數都事Function的實例化,都包含prototype屬性,即原型對象。

  2.所有對象都有__proto__屬性,該屬性指向對象構造函數的prototype原型對象。

  3.prototype原型對象的constructor屬性指向它所在的構造函數,即構造函數本身。

  4.prototype是針對函數說的,__proto__是針對對象說的。

  5.函數本身也是對象。

認識到以上幾點,我們先看一下原型鏈:

function setName() {
        this.name = ‘mark‘;
    }

    function
setAge() { this.age = 20; } setAge.prototype = new setName(); var obj = new setAge(); console.log(obj.name,obj.age);//mark 20 console.log(obj.constructor === setName);//true
  

上面代碼我們使用構造函數setAge()實例化一個對象obj,其中,age由構造函數寫入,而name屬性是有setAge的原型對象setName寫入的。obj.constructor === setName 返回true是因為,在obj對象的構造函數中,並沒有直接的consructor,它的constructor屬性是通過__proto__屬性繼承的,而__proto__指向obj的構造函數的prototype對象,即setAge.prototype,也就是setName,所以會返回true。

那麽,最簡單的一條原型鏈就應該為,實例對象《== 構造函數 《== 構造函數原型對象 《== Object 《== Object.prototype 《== null,而原型對象中的構造函數(constructor屬性)都等於它所在的構造函數。

function createO() {
        this.x = 1;
    }

    var o = new createO();

    console.log(o.__proto__);//createO.prototype
    console.log(o.__proto__.__proto__);//
Object console.log(o.__proto__.__proto__.__proto__);//null

那麽說白了,原型鏈的本質就是實例化對象和原型對象(prototype)之間形成的繼承鏈條。

再說一下繼承:

使用原型鏈最常用的繼承方式:

復制代碼
 1 function Person(name){
 2    this.name = name;
 3 }
 4 Person.prototype.showName = function(){
 5    console.log(this.name);
 6 }
 7 function Student(name,age){
 8    Person.call(this,name);
 9    this.age = age;
10 }
11 Student.prototype = new Person();
12 Student.prototype.contructor = Student;
13 Student.prototype.showAge = function(){
14     console.log(this.age);
15 }
16 var stu = new Student(‘張三‘,12);
17 stu.showName();
18 stu.showAge();

參考文獻:https://www.cnblogs.com/DF-fzh/p/5619319.html

https://www.cnblogs.com/Yirannnnnn/p/4896542.html#undefined

理解Javascript的原型鏈