【 总结 】继承

原型链的继承

对象的继承 只能继承自身原型的属性和方法
缺点 : 会造成引用值共享

引用值是指一些复合类型数据的值,包括Object,function,Array,RegExp,Data,引用值于原始值不同,引用值把引用变量存储在栈中,而实际的对象存储在堆中。 每一个引用变量都有一根指针指向其堆中的实际对象

		// ===========================
        function Super() {
            this.a = "nice"
            this.b = [1, 2, 3, 5]
        }
        Super.prototype.fuc = function () {
            console.log('222');
        }
		// ===========================
        通过原型链继承的方式 继承上方构造函数的属性和方法
        function Sub() { }

        // 原型链的继承
        Sub.prototype = new Super()
        var sub = new Sub()
        var sub1 = new Sub()
        
        // 实例对象修改属性 修改简单数据类型 影响不大 但是数组、对象会产生问题
        sub.a = 'World'
        sub.b.push(9)
        
        // 调用继承的属性和方法
        console.log(sub.a);
        console.log(sub1.a);

        console.log(sub.b);
        console.log(sub1.b);
        sub.fuc()

【 总结 】继承

构造函数继承

无法获取原型上的属性和方法

function Car() {
            // 函数独立执行 this指向全局 window 下方调用时 改变了this的指向 此时指向newCar
            // console.log(this);
            this.price = 5000
            this.name = "hq"
            this.max = [1, 2, 3, 4, 5]
        }

        Car.prototype.say = function () {
            console.log('原型对象方法 say');
        }

        // 通过构造函数 继承Car
        function newCar() {
            // this指向 newCar
            // console.log(this);
            // 改变this指向 指向newCar
            Car.call(this)
        }


        // 实例对象
        var carOne = new newCar()
        var carTwo = new newCar()

        // 改变Car内部的数据
        carOne.price = 'World'
        carTwo.max.push(9)

        // 不会造成引用值共享的问题
        console.log(carOne);
        console.log(carTwo);

        console.log(carOne.__proto__);
        console.log(newCar.prototype);

【 总结 】继承

组合继承

  • 组合继承
    • ( 伪经典继承 ) 构造函数复用
    • 创建的实例和原型上存在两份相同的属性
  • 解决原型链和构造函数继承的缺点
        function Car() {
            this.name = "hq"
            this.price = 5000
        }

        Car.prototype.say = function () {
            console.log("Car构造函数的原型对象方法");
        }

        function newCar() {
            // 构造函数继承
            Car.call(this)
        }
        // 原型链继承
        newCar.prototype = new Car()

        var car = new newCar()
        console.log(car);

【 总结 】继承

上一篇:three车辆*转弯(vue *飞车)


下一篇:实验四 继承