js常见的几种继承_js查询原型的construction-CSDN博客

本文链接：https://blog.csdn.net/weixin_45191052/article/details/93234007

关于 js原型与原型链

所有引用类型(对象)都有一个__proto__(隐式原型)属性，属性值是一个普通的对象指向该对象构造函数的prototype（原型对象）
所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
所有的prototype都有一个construction属性，它是一个指针，指向当前函数（构造函数）

那问题来了？什么是原型链？

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链
原型链示意图

1.原型链继承

核心：将父类的实例作为子类的原型。

	 // 父类
     function Parent() {
         this.value = 'value';
      }
      Parent.prototype.sayHi = function() {
              console.log('Hi');
         }
          // 子类
      function Child() {
 
     }
     // 改变儿子的prototype属性为父亲的实例
     Child.prototype = new Parent();
     Child.prototype.constructor=Child;
     var child = new Child();
     // 首先现在child实例上进行查找，未找到，
     // 然后找到原型对象（Parent类的一个实例），在进行查找，未找到，
     // 在根据__proto__进行找到原型，发现sayHi方法。
 
     // 实现了Child继承
     child.sayHi();

但是这种继承方式存在一个问题，那就是引用类型属性共享

// 父类
      function Parent() {
          this.color = ['pink', 'red'];
      }
  
      // 子类
     function Child() {
 
      }
     Child.prototype = new Parent();
 
     var child1 = new Child();
     var child2 = new Child();
     // 先输出child1和child2种color的值
    console.log(child1.color); // ["pink", "red"]
     console.log(child2.color); // ["pink", "red"]
 
     // 在child1的color数组添加white
     child1.color.push('white');
     console.log(child1.color); // ["pink", "red", "white"]
     // child1上的改动，child2也会受到影响
     console.log(child2.color); // ["pink", "red", "white"]

它存在第二个问题，就是无法向父类种传参。

2.构造函数（类继承）

核心：即在子类型构造函数的内部调用父类型构造函数。

在这里，我们借用call函数可以改变函数作用域的特性，在子类中调用父类构造函数，复制父类的属性。此时没调用一次子类，复制一次。此时，每个实例都有自己的属性，不共享。同时我们可以通过call函数给父类传递参数。

2.1 解决引用类型共享问题

  // 父亲类
     function Parent(name) {
          this.name = name;
          this.color = ['pink', 'red'];
      }
  
      // 儿子类
      function Child() {
          Parent.call(this);
 
         // 定义自己的属性
         this.value = 'test';
     }

 
     var child1 = new Child();
     var child2 = new Child();
 
     // 先输出child1和child2种color的值
     console.log(child1.color); // ["pink", "red"]
     console.log(child2.color); // ["pink", "red"]
 
     // 在child1的color数组添加white
     child1.color.push('white');
     console.log(child1.color); // ["pink", "red", "white"]
     // child1上的改动，child2并没有受到影响
     console.log(child2.color); // ["pink", "red"]

2.2 解决传参数问题

 function Parent(name) {
            this.name = name;
            this.color = ['pink', 'red'];
        }

        // 儿子类
        function Child() {
         //继承Parent，同时还传递了参数  --重新创建Child构造函数属性的副本
            Parent.call(this, "zhangsan");

            // 定义自己的属性
            this.value = 'test';
        }

        var child = new Child();

        // 将zhangsan传递给Parent
        console.log(child.name); // zhangsan
        console.log(child.value); //test

缺点：共享的方法都在构造函数中定义，无法达到函数复用的效果

3.组合继承（混合继承）

核心：原型继承+构造函数继承

利用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能保证每个实例都有自己的属性。

// 父亲类
      function Parent(name) {
      		this.name=name
          this.color = ['pink', 'red'];
      }
      Parent.prototype.sayHi = function() {
          console.log('Hi');
      }
  
      // 儿子类
     function Child(name) {
         // 借用构造函数继承
         //向Parent传参
         Parent.call(this,name);
 
         // 下面可以自己定义需要的属性
     }
     // 原型链继承
     Child.prototype = new Parent();
 
     var child1 = new Child('zhangsan');
     var child2 = new Child('lisi');
     
 		consloe.log(child1.name) //zhangsan
 		consloe.log(child2.name) //lisi
     // 每个实例特有的属性
     // 先输出child1和child2种color的值
     console.log(child1.color); // ["pink", "red"]
     console.log(child2.color); // ["pink", "red"]
 
     // 在child1的color数组添加white
     child1.color.push('white');
     console.log(child1.color); // ["pink", "red", "white"]
     // child1上的改动，child2并没有受到影响
     console.log(child2.color); // ["pink", "red"]
 
     // 每个实例共享的属性
     child1.sayHi(); // Hi
     child2.sayHi(); // Hi

组合继承避免了原型链和借用构造函数的缺陷，融合它们的优点，成为JavaScript中最常用的继承模式

4.原型继承

核心：借用构造函数的原型对象实现继承

   function Student(props) {
            this.name = props.name ;
        }

        Student.prototype.hello = function() {
                alert('Hello, ' + this.name + '!');
            }
            // PrimaryStudent构造函数:
        function PrimaryStudent(props) {
            Student.call(this, props);
            this.grade = props.grade ;
        }

        // 空函数F:
        function F() {}

        // 把F的原型指向Student.prototype:
        F.prototype = Student.prototype;

        // 把PrimaryStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:
        PrimaryStudent.prototype = new F();

        // 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
        PrimaryStudent.prototype.constructor = PrimaryStudent;

        // 继续在PrimaryStudent原型（就是new F()对象）上定义方法：
        PrimaryStudent.prototype.getGrade = function() {
            return this.grade;
        };

        // 创建xiaoming:
        var xiaoming = new PrimaryStudent({
            name: '小明',
            grade: 2
        });
        console.log(xiaoming.name); // '小明'
        console.log(xiaoming.grade); // 2

        // 验证原型:
        console.log(xiaoming.__proto__ === PrimaryStudent.prototype); //true
        console.log(xiaoming.__proto__.__proto__ === Student.prototype) //true


        // 验证继承关系:
        console.log(xiaoming instanceof PrimaryStudent); //true
        console.log(xiaoming instanceof Student) //true

小结：
1 定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；

2.借助中间函数F实现原型链继承，

3.继续在新的构造函数的原型上定义新方法

原型继承参考链接：https://www.liaoxuefeng.com/wiki/1022910821149312/1023021997355072