基本概念

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