【JS】原型物件與原型鏈
阿新 • • 發佈:2018-12-10
原型鏈:
例項物件和原型物件之間的關係,通過__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:建構函式中原型物件
- 建構函式中唯一的屬性
- 我們程式設計師用的
- 可以看做原型物件的指標
- 它裡邊的屬性或是方法可以通過例項物件直接呼叫
原型物件中prototype
- 實際的原型物件
- 具體的資料集合
- 它也是一個物件,裡邊也有__proto__
例項物件中__proto__
- 指向該例項物件中的建構函式中的prototype
- 原型物件的__proto__(經過一系列物件)最終指向object,object__proto__指向null(如圖所示)
可以通過修改例項物件的值修改原型物件的值嗎?
- 不可以
那麼怎麼修改原型物件的值呢?
- 直接物件.prototype.value = 值(直接修改)
如果訪問物件的這個屬性的時候,沒有找到該物件的屬性,怎麼辦?
- 由於JS屬於動態開發語言,物件沒有該屬性的時候,會動態的建立該屬性!
大家有什麼細節不懂,可以點這裡
簡單總結分享,有什麼問題歡迎大家和我交流,感謝大家認真閱讀和點贊鼓勵!