JS高級——原型鏈
阿新 • • 發佈:2018-01-22
prototype fan 原型鏈 ret reat 對象 fun 搜索 .com
基本概念
1、通過同一個構造函數創建的對象都會關聯一個神秘的對象,可以通過構造函數.prototype進行訪問,這個神秘對象被稱為原型對象
2、這個原型對象可以被用來做繼承用,js中的繼承有好幾種,包括混入繼承,經典繼承,還有原型繼承
3、通過構造函數創建出來的對象,不僅擁有構造函數中的屬性,還擁有原型對象中創建出來的屬性
4、實例化後的對象也可以通過__proto__進行訪問原型對象,但是只是調試時使用,不推薦正式代碼中使用
原型基本
<script> function Person(name, age) { this.name = name;this.age = age; } //不僅擁有構造函數中的屬性,還擁有原型中創建出來的屬性 Person.prototype.gender = ‘male‘; var p = new Person(‘qx‘, 18); console.log(p.name);//qx console.log(p.age);//18 console.log(p.gender);//male </script>
混入繼承
<script> var o = {} var obj = { name: "張三", age:18, sayHello: function () { console.log("Hello world"); } } //混入式繼承 for (var k in obj) { o[k] = obj[k]; } console.log(o); </script>
經典繼承
1、最早的原理
<script> //通過替換原型,使得被創建出來對象也擁有傳入對象的屬性 function jicheng(obj) { var o = {}; o.__proto__= obj; return o; } var o = jicheng({name: "張三"}); console.log(o); </script>
2、create方法
<script> var o = { name: "周三" }; var obj = Object.create(o); console.log(obj.name); </script>
3、create方法存在兼容性問題
<script> var obj = { name:"周三" }; //檢測瀏覽器的能力,如果沒有Object.create方法就給他添加一個(不推薦使用) if(Object.create){ var o = Object.create(obj); }else{ Object.create = function () { function F() { } F.prototype = obj; var o = new F(); } var o = Object.create(obj); } </script>
<script> //自己定義個函數 function create(obj) { if (Object.create) { return Object.create(obj); } else { function F() { } F.prototype = obj; return new F(); } } </script>
原型繼承
<script> function Animal() { this.eat = ‘chifan‘; } var animal = new Animal(); function Person() { this.read = ‘dushu‘; } //person顯示是具有animal的屬性,畢竟人也是動物,具體方法是讓person的原型被替換成animal //替換後,通過person構造函數創建出來的對象,不僅具有person的屬性,還具有animal的屬性 Person.prototype = animal;//Person.prototype = new Animal()這樣也行 var p = new Person(); console.log(p.read);//chifan console.log(p.eat);//dushu </script>
復雜原型繼承
<script> //動物--->人---->老師---->壞老師 //原型的直接替換會將原型的構造函數也替換了,所以最好重新指定 function Animal() { this.gender = "male"; } Human.prototype = new Animal(); Human.prototype.constructor = Human; function Human() { this.actionWay = "走路"; } Teacher.prototype = new Human(); Teacher.prototype.constructor = Teacher; function Teacher() { this.skill = "教書"; } BadTeacher.prototype = new Teacher(); BadTeacher.prototype.constructor = BadTeacher; function BadTeacher() { this.name = "呂超"; } var t = new BadTeacher(); console.log(t); </script>
原型鏈基本概念
1、每個構造函數都有原型對象
2、每個對象都會有構造函數
3、每個構造函數的原型都是一個對象
4、那麽這個原型對象也會有構造函數
5、那麽這個原型對象的構造函數也會有原型對象
6、這樣就會形成一個鏈式的結構,稱為原型鏈
7、通過修改原型鏈結構實現的繼承,就叫做原型繼承
屬性搜索基本原則
1、當訪問一個對象的成員的時候,會現在自身找有沒有,如果找到直接使用,
2、如果沒有找到,則去當前對象的原型對象中去查找,如果找到了直接使用
3、如果沒有找到,繼續找原型對象的原型對象,如果找到了,直接使用
4、如果沒有找到,則繼續向上查找,直到Object.prototype,如果還是沒有,就報錯
JS高級——原型鏈