1. 程式人生 > >【JS】原型物件與原型鏈

【JS】原型物件與原型鏈

原型鏈:

例項物件和原型物件之間的關係,通過__proto__來聯絡的鏈(如下圖的1,2,3)

原型物件:

原型物件(Person.prototype)是 建構函式(Person)的一個例項

建構函式:

建構函式就是製造一個物件的函式

大家先看一段程式碼:

<meta charset="UTF-8">
    <script>
        //人的建構函式
        function Person(age){
            this.age=age;
        }
        //給人的原型物件新增一個eat的方法
        Person.prototype.eat=function(){
            console.log("eat food");
        }
        
        
        //學生個建構函式
        function Student(sex){
            this.sex=sex;
        }
        //給學生的原型新增一個sayHi的方法
        Student.prototype.sayHi=function(){
            console.log("hi");
        }
        
        //學生的原型指向了一個新的人物件
        Student.prototype=new Person(10);
        
        //例項化了一個學生
        var student =new Student("man");
        
        //這個時候,student是無法呼叫sayHi這個方法的
        //student.sayHi();

        //但是他可以呼叫eat這個方法
        student.eat();
        
        console.log(per);
    </script>

如果:

建構函式的原型(Student)物件指向的物件(person)發生了變化,那麼之前在原型新增的方法(sayHi),新的例項(student)物件時無法呼叫的,但是指向的物件方法(person)的方法(eat),新的例項(student)是可以呼叫的!

圖解:

註釋:

紫色的線:student之前的指向

綠色的線:student修改之後的指向

紅色的線:person的指向

建構函式中prototype:建構函式中原型物件

  1. 建構函式中唯一的屬性
  2. 我們程式設計師用的
  3. 可以看做原型物件的指標
  4. 它裡邊的屬性或是方法可以通過例項物件直接呼叫

原型物件中prototype

:實際的原型物件(具體的資料)

  1. 實際的原型物件
  2. 具體的資料集合
  3. 它也是一個物件,裡邊也有__proto__

例項物件中__proto__

  1. 指向該例項物件中的建構函式中的prototype
  2. 原型物件的__proto__(經過一系列物件)最終指向object,object__proto__指向null(如圖所示)

可以通過修改例項物件的值修改原型物件的值嗎?

  • 不可以

那麼怎麼修改原型物件的值呢?

  • 直接物件.prototype.value = 值(直接修改)

如果訪問物件的這個屬性的時候,沒有找到該物件的屬性,怎麼辦?

  • 由於JS屬於動態開發語言,物件沒有該屬性的時候,會動態的建立該屬性!

大家有什麼細節不懂,可以點這裡

簡單總結分享,有什麼問題歡迎大家和我交流,感謝大家認真閱讀和點贊鼓勵!