Js 对象之间的继承及原型链查找分析

时间：2021-03-16 14:01:27 阅读：0 评论：0 收藏：0 [点我收藏+]

Js 对象之间的继承

构造函数的属性继承

①对象拷贝 :使用for....in循环继承父对象属性

<script>
        var student1 = {
            name : "lisi",
            id : 1213,
            meaasge : function(){
                console.log(name + "," + id);
            }
        };

        //使用for....in循环继承父对象属性
        //封装成一个函数
        function student(parent,child){
             for (var k in parent) {
                if (child[k]) {
                    continue;//对于student2里独有的要保留的值，则跳过该次循环
                }
                child[k] = parent[k];
            }
        }
        student(student1,student2);
        console.log(student2);
    </script>

上述继承父对象是对象拷贝，实际上继承指的是类型和类型之间的继承，而封装的构造函数就是用来创建类对象的

②原型继承

//原型继承
        function Person(name, age, sex, score) {
                this.name = name;
                this.age = age;
                this.sex = sex;
        } //抽象，提取所有的公共属性，放到一个父类型中

        function Student(score){
            this.score = score;
        }
        function Teacher(course){
            this.crouse = crouse;
        }
       
        //原型对象，可以将自己的属性和方法继承给将来的实例对象使用
        Student.prototype = new Person("li",21,"male");

        //生成一个实例
        var s1 = new Student(90);
        console.dir(s1);

????原型继承，在没有修改constructor之前，Student是没有自己的constructor属性的，但它有继承Person对象是的constructor属性，它指向的是Person。所以，这里需要人为定义一个constructor属性，指向Student。

  //原型对象，可以将自己的属性和方法继承给将来的实例对象使用
        Student.prototype = new Person("li",21,"male");

        Studnet.prototype.constructor = Student;
        //生成一个实例
        var s1 = new Student(90);
        console.dir(s1);
        console.log(s1.constructor);

这种继承的缺点是，只能继承一次，不适用属性的继承。

③函数的 call 方法
```
 //函数的 call 方法
        function fn(a,b){
            console.log(this);//指向的是window
            console.log(a+b);

        }
        var name = {
            name:"li"
        };
        //普通函数的调用fn（1，1）
        //call方法 第一个参数用来指定this，第二个及以后传的是实参。
        fn.call(name,3,3);
```
? ? ? ?函数call ，函数本身就是一种对象，可以有自己的属性和方法。call方法本身就是一种指向函数的方法。

? ? ? ? call方法在调用函数的时候，有两个功能：①更改函数内部的this指向；②调用函数执行内部代码，其当调用时，第一个参数用来指定this，第二个及以后传的是实参。

④借用构造函数继承属性

? ? ? ?直接对父类型的构造函数进行一个普通调用，在调用的过程中，内部的this指向的是window，通过call方法更改Person内部的this指向调用函数（如，student调用的，使用call方法后，this指向的是student）

//借用构造函数继承属性
        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        } //抽象，提取所以的公共属性，放到一个父类型中

        function Student(name,age,sex,score){
            //对父类型进行一个普通调用
            Person.call(this,name,age,sex);
            this.score = score;
        }
        function Teacher(name,age,sex,course){
            Person.call(this,name,age,sex)
            this.crouse = crouse;
        }

        var s2 = new Student("li",22,"male",90);
        console.dir(s2);

技术图片

构造函数的方法的继承

for...in继承、原型继承、

①for...in继承

        //构造函数的方法继承
        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        } //抽象，提取所有的公共属性，放到一个父类型中
        Person.prototype.message = function(){
            console.log(123);
        }

        function Student(name,age,sex,score){
            Person.call(this,name,age,sex);
            this.score = score;
        }
        function Teacher(name,age,sex,course){
            Person.call(this,name,age,sex)
            this.crouse = crouse;
        }

        //for ..in继承
        for(var k in Person.prototype){
            //Student保留自己的constructor 不让Studnet继承Person的constructor
            if(k == "constructor"){
                continue;
            }
            Student.prototype[k] = Person.prototype[k];
        }

②原型继承

//原型继承
        Student.prototype = new Person();
        //在继承的情况下也不能改变Student的constructor的指向
        Student.prototype.constructor = Student;

        var s1 = new Student("li",21,"male",91);
        s1.message();
        console.dir(s1);

③组合继承：属性在构造函数内部继承，方法通过原型继承

//构造函数的方法继承
        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        } //抽象，提取所有的公共属性，放到一个父类型中
        Person.prototype.message = function(){
            console.log(123);
        }

        function Student(name,age,sex,score){
        //属性的继承，使用call方法继承
            Person.call(this,name,age,sex);
            this.score = score;
        }
        function Teacher(name,age,sex,course){
            Person.call(this,name,age,sex)
            this.crouse = crouse;
        }
        
        //方法继承，通过原型继承
        Student.prototype = new Person();
        //在继承的情况下也不能改变Student的constructor的指向
        Student.prototype.constructor = Student;

        var s1 = new Student("li",21,"male",91);
        s1.message();
        console.dir(s1);

技术图片