JS高级——原型链

时间：2018-01-22 13:01:26 阅读：196 评论：0 收藏：0 [点我收藏+]

基本概念

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>