1. 程式人生 > >JS高級——原型鏈

JS高級——原型鏈

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高級——原型鏈