【JS重点17】原型继承

news2024/11/25 16:08:08

一：什么是原型继承

二：通过赋值方式实现原型继承

三：通过构造函数实现原型继承

四：如何赚钱

一：什么是原型继承

通过往构造函数上的原型对象添加属性和方法，再new一个实例对象，从而实例对象身上具有原型对象上的属性和方法

//抽取 公共部分 放到原型上
const Person = {
      eyes: 2,
      head: 1
    }
//女人
function Woman(){}

//男人
    function Man() {}
//Man通过 原型继承 Person
    Man.prototype = Person
//经赋值会覆盖原型，要重新指向构造函数Man
    Man.prototype.constructor = Man
    const M = new Man()
    console.log(yellow);

二：通过赋值方式实现原型继承

显然通过赋值方式添加给原型对象，实现了M的继承问题。但存在致命问题，看下面代码

const Person = {
      eyes: 2,
      head: 1
    }
    function Man() { }
    //Man通过原型来继承Person
    Man.prototype = Person
    //经赋值会覆盖原型，要重新指向构造函数Man
    Man.prototype.constructor = Man
    const M = new Man()
    function Woman() { }
    Woman.prototype = Person
    //给Woman添加一个公共的方法
    Woman.prototype.baby = function () {
      console.log('会生孩子');
    }
    const W = new Woman()
    //此时再打印Woman和Man
    console.log(M);
    console.log(W);

给Woman原型对象添加了baby方法，但是Man原型对象中也出现了baby方法。关键原因就是利用“原型继承”Person时使用了赋值方式，因为Person是引用数据类型，所以赋值是复制的地址但Woman、Man地址都是指向同一个，修了Woman原型对象本质上就是修改了Man的原型对象。

改善看三

三：通过构造函数实现原型继承

    function Person() {
      this.eyes = 2
      this.head = 1
    }
    function Man() { }
    Man.prototype = new Person()
    Man.prototype.constructor = Man
    const M = new Man()
    function Woman() { }
    Woman.prototype = new Person()
    Woman.prototype.baby = function () {
      console.log('会生孩子');
    }
    const W = new Woman()
    //此时再打印Woman和Man
    console.log(M);
    console.log(W);