美文网首页
继承的7种实现方式

继承的7种实现方式

作者: 小杰66 | 来源:发表于2021-03-30 22:22 被阅读0次
/*
原型链继承
缺点
1.实例对引用类型的属性的修改会影响其它所有实例
2.创建Child实例的时候无法向Parent传参
*/

function Parent() {
  this.name = ["xj"];
}
Parent.prototype.getName = function () {
  console.log(this.name.join());
};
function Child() {}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child();
child1.getName(); //xj
var child2 = new Child();
child2.name.push("xj66");
child1.getName(); //xj,xj66

/*
构造函数继承
优点
1.每个实例对引用类型属性的修改不会影响其它实例
2.子类可以向父类传参
缺点
1.无法复用父类的公共函数
2.每次子类构造实例都要执行一次父类函数
*/
function Parent(name) {
  this.name = name;
}
Parent.prototype.getName = function () {
  console.log(this.name.join());
};
function Child(name) {
  Parent.call(this, name);
}
var child1 = new Child(["xj"]);
child1.getName(); //child1.getName is not a function
console.log(child1.name.join()); //xj
var child2 = new Child(["xj"]);
child2.name.push("xj66");
console.log(child2.name.join()); //xj,xj66
console.log(child1.name.join()); //xj

/*
组合继承(原型链继承+构造函数继承)
优点
1.每个实例对引用类型属性的修改不会影响其它实例
2.子类可以向父类传参
3.可以复用父类的公共函数
缺点
1.需要执行两次父类构造函数,第一次是Child.prototype = new Parent(),第二次是Parent.call(this, name)
*/
function Parent(name) {
  this.name = name;
  this.assets = ["floor", "car"];
}
Parent.prototype.getName = function () {
  console.log(this.name);
};
function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child("xj", 28);
var child2 = new Child("dj", 30);
child1.assets.push("phone");
console.log(child1.assets.join()); //floor,car,phone
console.log(child2.assets.join()); //floor,car
child1.getName(); //xj
child2.getName(); //dj

/*
原型式继承
缺点
1.和原型链继承一样,实例对引用类型属性的修改会影响其它所有实例
*/
function createObj(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
var person = {
  name: "xj",
  assets: ["floor", "car"],
  getName: function () {
    console.log(this.name);
  },
};
var person1 = createObj(person);
var person2 = createObj(person);
console.log(person1.assets.join()); //floor,car
person2.assets.push("phone");
console.log(person1.assets.join()); //floor,car,phone
person1.getName(); //xj
person1.name = "dj";
person1.getName(); //dj

/*
寄生式继承
缺点
1.和构造函数继承一样,无法复用父类函数,每次创建对象都会创建一遍方法
*/

function createEnhanceObj(o) {
  var clone = Object.create(o);
  return clone;
}
var person = {
  name: "xj",
  assets: ["floor", "car"],
  getName: function () {
    console.log(this.name);
  },
};
var person1 = createEnhanceObj(person);
var person2 = createEnhanceObj(person);
console.log(person1.assets.join()); //floor,car
person2.assets.push("phone");
console.log(person1.assets.join()); //floor,car,phone
person1.getName(); //xj
person1.name = "dj";
person1.getName(); //dj

/*
寄生组合式继承
优点
1.不必为了指定子类型的原型调用父类型的构造函数
*/

function inheritPrototype(Parent, Child) {
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
}

function Parent(name) {
  this.name = name;
}
Parent.prototype.getName = function () {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inheritPrototype(Parent, Child);

var child = new Child("xj", 28);
child.getName();

/*
ES6继承
*/
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return this.x + "" + this.y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y);
    this.color = color;
  }
  toString() {
    return this.color + " " + super.toString();
  }
}

var colorPoint = new ColorPoint("1", "2", "red");
console.log(colorPoint.toString());

//参考链接 https://juejin.cn/post/6844903889553063949

/*
使用Object.create继承多个对象,使用混入的方式
*/
function MyClass() {
  SuperClass.call(this);
  OtherSuperClass.call(this);
}

MyClass.prototype = Object.create(SuperClass.prototype);
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
MyClass.prototype.constructor = MyClass;

相关文章

  • js中的继承

    继承 对象冒充的方式实现继承 弊端:只能继承构造函数里面的属性/方法。原型链上的无法继承 原型链的方式实现继承 弊...

  • 原型相关(二)

    1.继承 继承方式:接口继承(只继承方法签名)实现继承(继承实际的方法)ECMAScript只支持实现继承,并且主...

  • js中的继承-原型与原型链

    面向对象的语言支持两种继承方式,接口继承和实现继承js无法实现接口继承,只支持实现继承,主要通过原型链来实现。具体...

  • 005|JavaScript ES6新特性之Classes

    在过去,需要像 053|JavaScript 继承详解 那样实现继承。JavaScript这种继承实现方式与其它面...

  • 记录JAVA多线程学习

    1.实现方式:多线程的实现方式有两种方式,一种是继承Thread类,一种是实现runnable接口。继承threa...

  • 面向对象——继承

    许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。ECMAS...

  • UML图笔记

    一、泛化: 泛化 C++实现方式:类继承 二、实现 C++实现方式:类继承,且实现了父类的接口。 三、关联 单向关...

  • 7、面向对象的程序设计3(《JS高级》笔记)

    三、继承 许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际方法。由...

  • Javascript基础系列之继承

    继承 许多 OO 语言都支持两种继承方式:接口继承和实现继承。但是ECMAScript中只支持实现继承,下面就是实...

  • 高程三 关于原型链 阅读笔记

    许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于函数没...

网友评论

      本文标题:继承的7种实现方式

      本文链接:https://www.haomeiwen.com/subject/xixwhltx.html