Js常用的继承方式

更新日期: 2019-07-22阅读: 2.4k标签: 继承

JavaScript常用继承方式主要分为(7种):原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承以及继承多个对象。


1:原型链继承(核心:将父类的实例作为子类的原型

基本概念:重写原型对象,赋予一个新的对象的实例。基本思想就是让一个原型对象指向另一个父类的实例。

function Super() {
//基本数据类型
this.text = 'Hello';
}
Super.prototype.getSuperText = function() {
return this.text;
}
function Sub() {
	this.subText = 'Word';
}

Sub.prototype = new Super();

const instance = new Sub();
console.log(instance);

特点:非常纯粹的继承关系,实例是子类的实例,也是父类的实例。父类新增原型方法或属性,子类都能访问到。

优点:简单易于操作

缺点:对引用类型数据操作会互相(多个实例之间)影响

function Super() {
//复杂对象,也就是引用类型
this.value = [1, 2, 3, 4];
}
Super.prototype.getSuperValue = function() {
return this.value;
}
function Sub() {
this.subText = 'Word';
}

Sub.prototype = new Super();

const instance1 = new Sub();
const instance2 = new Sub();

instance1.value.push(5);
console.log(instance2.value);

// (5) [1, 2, 3, 4, 5]


2:构造函数继承

//定义构造函数
function Super(){
this.value = [1, 2, 3, 4];
}
//新增属性getSuperValue
Super.prototype.getSuperValue = function() {
return this.value;
}
//sub每次执行都要重新调用
function Sub(){
Super.call(this);
}

const instance1 = new Sub();
instance1.value.push(5);
console.log(instance1.value);
// (5) [1, 2, 3, 4, 5]

const instance2 = new Sub();
console.log(instance2.value);
// (4) [1, 2, 3, 4]

构造函数的特点:(对引用数据类型没有影响)上面的代码输出instance1是1,2,3,4,5,instance2是1,2,3,4。这是因为sub每次在执行时都是重新调用了一个super.call(),而且构造函数在构建对象的过程中,每次都是创建了一个新的object,因此每次调用sub都会执行一遍super,每次执行时都会有申请一个新的内存空间,所以得到的两个value值是不一样互不影响的。

缺点:在整个构造函数的基础过程中,上面的代码并没有使用proto和prototype的属性,没有使用的话那么原型链就没有接上。所以说,构造函数基础只能继承父类的实例属性和方法,不能继承原型链上的属性和方法


3:组合继承

通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用。

保留了构造函数继承与原型链继承的优点。但是执行了两次Person,属性重复了。

function Person(name) {
this.name = name;
this.value = ["head", "body", "legs"];
}
Person.prototype.getName = function() {
return this.name;
};

// 构造函数继承
function Teacher(name, school){
// 执行又一次Person
Person.call(this, name);
this.school = school;
}

// 原型链继承
// 执行一次Person
Teacher.prototype = new Person(); 
const Eric = new Teacher("Eric",27);
Eric.getName();
// 输出:Eric

// prototype构造器指回自己 
Teacher.prototype.constructor = Teacher;

Teacher.prototype.getSchool = function() {
return this.school;
};

特点:既可以继承实例属性和方法,也可以继承原型属性和方法。既是子类的实例也是父类的实例,不存在引用属性共享的问题。可以传参,函数可复用。

缺点:调用两次父类构造函数,生成了两份实例。


4:原型式继承

借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型。

原理:(本质)利用一个空对象作为一个中介。

const lakers = {
name: "lakers",
value: ["Micheal", "Wade", "Kobe"]
};

const lakers1 = Object.create(lakers);
const lakers2 = Object.create(lakers);

lakers1.value.push('Fish');
console.log(lakers);

模拟Object.create()

object.create()原理:用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了一个可以随意添增属性的实例或对象。

Object.prototype.create = function(obj) {
function Fun() {}
Fun.prototype = obj;
return new Fun();
}

缺点有两点:第一点是无法传递参数,第二点是引用类型存在变量的污染。****


5:寄生式继承

寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数。

目的:在原型式继承的基础上,寄生增加了一些新的方法和属性。

它的特点同原型式继承一样,也是无法传递参数,而且引用的数据类型也容易存在样式污染。

Object.createNew()

Object.prototype.createNew = function(obj){
var newObj = Object.create(obj);
//获取长度等于一个function
newObj.getLength = function(){ ... };
return newObj;
}

6:寄生组合继承

目的:为了解决数据重复拷贝两遍的问题。

Super只执行一次。

//定义Super构造函数
function Super(name) {
  this.name = name;
  this.value = ["Hello", "Word"];
}
//在super的原型链添加一个getName
Super.prototype.getName = function() {
  return this.name;
};
//定义Sub
function Sub(name, age) {
  //调用构造函数继承
  Super.call(this, name);
  this.age = age;
}

let prototype = Object.create(Super.prototype);
prototype.constructor = Sub;
Sub.prototype = prototype;

Sub.prototype.getAge = function(){
  return this.age;
}

const instance1 = new Sub("Eric", 23);
const instance2 = new Sub("Vico", 23);
instance1.value.push("!");
instance2.value.push("!!");

7:继承多个对象

借助原型式继承Object.create拿到SuperClass,也就是父类,拿到父类的prototype之后把它赋给ClassOne,

再然后我们将ClassTwo的prototype使用一个Object.assign,一个对象的拷贝,把它拷贝到ClassOne里面来,

然后最后ClassOne.prototype.constructor等于ClassOne

也就是使用一个Class.assign把所有我们想要继承的父类的prototype全部组合到一起完成一个拷贝,之后再赋给对象。

function 
ClassOne.prototype = Object.create(SuperClass.prototype);
Object.assign(ClassOne.prototype, ClassTwo.prototype);
ClassOne.prototype.constructor = ClassOne;

链接: https://www.fly63.com/article/detial/4307

js原型继承、构造函数继承、组合继承法

原型继承缺点:1、不能由子对象像父对象传递参数,2、对于引用型的属性修改之后会印象其他的实例对象;构造函数继承缺点:1、不能继承父对象原型上的方法 2、每次实例化对象会重新构建函数,浪费内存。

各种实现js继承的方法总结

学过java的同学应该都知道,继承是java的重要特点之一,许多面向对象的语言都支持两种继承方式:接口继承和实现继承,接口继承只继承方法签名,而实现继承则继承实际的方法,在js中,由于函数没有签名,因此支持实现继承,而实现继承主要是依靠原型链来实现的,那么,什么是原型链呢?

css的继承性

在面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面。

js原型继承的几种方式

1. 原型链继承;2,构造函数继承(对象冒充继承);3,组合继承(原型链继承+构造函数继承);4,原型式继承;5. 寄生组合式继承,为了解决引用共享和超类型无法传参的问题,我们采用一种叫借用构造函数的技术

Js继承背后的场景-prototype,__proto__, [[prototype]]

prototype是构造函数的一个属性,它决定了在构造出来的对象上__proto__属性将是什么样的。如上图所示,理解JavaScript中的继承的关键是要理解母鸡如何产蛋的过程。

JS之继承(ES5 & ES6)

继承到底是什么?继承(英语:inheritance)是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法

Js继承总结

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。如果让原型对象指向另一个类型的实例.....有趣的事情便发生了.

ES5 的构造函数原型链继承

构造函数,就是专门用来生成实例对象的函数。一个构造函数,可以生成多个实例对象,这些实例对象都有相同的结构。为了与普通函数区别,构造函数名字的第一个字母通常大写。

Js对象继承

JavaScript对象继承的方法有很多,这里总结一下几种比较常用的方法。使用call/apply和Object.create()第一种方法使用call或apply方法,改变了 this 的指向而实现继承,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行

Js实现继承的几种方法及其优缺点

要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链;每一个构造函数都有prototype属性(显示原型),用来显示修改对象的原型

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!