1. 程式人生 > >深入理解JavaScript原型、原型鏈、繼承。

深入理解JavaScript原型、原型鏈、繼承。

  • 建構函式,原型物件,例項物件三者之間的關係
    在這裡插入圖片描述
    1.建構函式可以例項化物件
    2.建構函式中有一個prototype屬性,是建構函式的原型物件
    3.原型物件(prototype)中有constructor構造器指向的是當前原型物件所在的建構函式
    4.例項物件的__proto__原型指向建構函式的prototype原型物件
    5.例項物件可以直接訪問建構函式中原型物件的方法
    例項物件使用的屬性或者方法現在例項物件中找,找不到則去例項物件所指向的原型物件中去找,找不到則報錯。
    通過例項物件能否改變原型物件中的屬性值?不能
    就想改變原型物件中屬性的值,怎麼辦?直接通過原型物件.屬性=值;可以改變

原型的指向改變

  //人的建構函式
    function Person(age) {
      this.age=18;
    }
    //人的原型物件方法
    Person.prototype.eat=function () {
      console.log("人的方法");
    };
    //學生的建構函式
    function Student() {

    }
    Student.prototype.sayHi=function () {
      console.log("學生的方法");
    };
    //學生的原型,指向了一個人的例項物件
    Student.prototype=new Person(10);
    var stu=new Student();
    stu.eat();
    stu.sayHi();

在這裡插入圖片描述例項物件和原型物件之間的關係是通過__proto__原型來聯絡起來的,這個關係就是原型鏈

原型的最終指向

在這裡插入圖片描述

   //per例項物件的__proto__------->Person.prototype的__proto__---->Object.prototype的__proto__是null
    console.log(per.__proto__==Person.prototype);
    console.log(per.__proto__.__proto__==Person.prototype.__proto__);
    console.log(Person.prototype.__proto__==Object.prototype);
    console.log(Object.prototype.__proto__);

繼承

在這裡插入圖片描述