JS的继承(ES5)

function Person() {
  this.name = "Person name";
  this.arr = [1, 2, 3];
}

Person.prototype.getFunName = function () {
  return "Person";
};

// 类式继承
(function () {
  console.log("--------类式继承--------");

  function Son() {}

  Son.prototype = new Person();

  const son1 = new Son();
  const son2 = new Son();

  console.log("son2.arr =>", son2.arr);
  son1.arr.push(666);
  console.log("son1.arr.push(666)");
  console.log("son2.arr =>", son2.arr);

  try {
    console.log("拿到了 Person.prototype", son1.getFunName());
  } catch (e) {
    console.error(e);
  }

  console.log(
    "缺点:\n1、实例化Parent的时候无法入参;\n2、实例只有共性,不能保持个性"
  );

  console.log("--------end--------\n");
})();

// 构造函数继承
(function () {
  console.log("--------构造函数继承--------");

  function Son() {
    Person.call(this);
  }

  const son1 = new Son();
  const son2 = new Son();

  console.log("son2.arr =>", son2.arr);
  console.log("son1.arr.push(666)");
  son1.arr.push(666);
  console.log("son2.arr =>", son2.arr);

  try {
    console.log("拿到了 Person.prototype", son1.getFunName());
  } catch (e) {
    console.error(e);
  }
  console.log("缺点:\n1、实例保持了个性,却不能共享方法");

  console.log("--------end--------\n");
})();

// 组合继承
(function () {
  console.log("--------组合继承(类式继承与构造函数继承的结合)--------");

  function Son() {
    Person.call(this);
  }

  Son.prototype = new Person();

  const son1 = new Son();
  const son2 = new Son();

  console.log("son2.arr =>", son2.arr);
  console.log("son1.arr.push(666)");
  son1.arr.push(666);
  console.log("son2.arr =>", son2.arr);

  try {
    console.log("拿到了 Person.prototype", son1.getFunName());
  } catch (e) {
    console.error(e);
  }

  console.log("缺点:\n1、实例化了两次Parent");

  console.log("--------end--------\n");
})();

// 原型式继承
(function () {
  console.log("--------原型式继承--------");

  function Son(o) {
    function F() {}
    F.prototype = o;
    return new F();
  }

  const PersonObj = {
    name: "Person name",
    arr: [1, 2, 3],
  };

  // 也可使用Object.create来实现 Object.create(PersonObj);
  const son1 = Son(PersonObj);
  const son2 = Son(PersonObj);

  console.log("son2.arr =>", son2.arr);
  console.log("son1.arr.push(666)");
  son1.arr.push(666);
  console.log("son2.arr =>", son2.arr);

  console.log("缺点:\n1、实例只有共性,不能保持个性(同类式继承)");

  console.log("--------end--------\n");
})();

// 寄生式继承
(function () {
  console.log("--------寄生式继承--------");

  function Son(o) {
    function F() {
      this.getFunName = function () {
        return "Son";
      };
    }
    F.prototype = o;
    return new F();
  }

  const PersonObj = {
    name: "Person name",
    arr: [1, 2, 3],
  };

  const son1 = new Son(PersonObj);
  const son2 = new Son(PersonObj);

  console.log("son2.arr =>", son2.arr);
  console.log("son1.arr.push(666)");
  son1.arr.push(666);
  console.log("son2.arr =>", son2.arr);

  try {
    console.log("拿到了 F.getFunName", son1.getFunName());
  } catch (e) {
    console.error(e);
  }

  console.log("缺点:\n1、实例只有共性,不能保持个性(同类式继承)");

  console.log("--------end--------\n");
})();

// 寄生组合式继承
(function () {
  console.log("--------寄生组合式继承(寄生与构造)--------");

  function Son() {
    Person.call(this);
  }

  function inheritProto(Sub, Super) {
    const proto = Object.create(Super.prototype);
    proto.constructor = Sub;
    Sub.prototype = proto;
  }

  inheritProto(Son, Person);

  const son1 = new Son();
  const son2 = new Son();

  console.log("son2.arr =>", son2.arr);
  console.log("son1.arr.push(666)");
  son1.arr.push(666);
  console.log("son2.arr =>", son2.arr);

  try {
    console.log("拿到了 Person.getFunName", son1.getFunName());
  } catch (e) {
    console.error(e);
  }

  console.log("缺点:\n1、没有缺点");

  console.log("--------end--------\n");
})();

猜你喜欢

转载自blog.csdn.net/Stark6/article/details/119571006