Javascript组合继承方法的代码_F11 - 专业站长和开发者的学习网站

分享到

Javascript组合继承方法的代码

JavaScript 来源：互联网搜集作者：秩名发布时间：2020-04-02 20:21:26 人浏览

摘要

组合继承组合继承，指将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。其背后思路使用用原型链实现对原型属性和方法的继承，而通过构造函数来实现对实例属性的继承。这样，即通过在原型上定义方法实现了函数复用，又能够保证每个

组合继承

组合继承，指将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。其背后思路使用用原型链实现对原型属性和方法的继承，而通过构造函数来实现对实例属性的继承。这样，即通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。

下面来看一个例子

				?

									function SuperType(name) {

									  this.name = name;

									  this.color = ['red', 'blue', 'green'];

									};

									//

									SuperType.prototype.sayName = function() {

									  console.log(this.name);

									};

									//

									function SubType(name, age) {

									  //继承属性

									  SuperType.call(this, name);       // 第二次调用SuperType

									//

									  this.age = age;

									};

									//继承方法

									SubType.prototype = new SuperType();    // 第一次调用SuperType

									console.log(SubType.prototype.constructor); //输出SuperType函数的源码,即此时SubType.prototype.constructor指向SuperType函数

									SubType.prototype.constructor = SubType; //将SubType.prototype.constructor指针指回SubType函数

									SubType.prototype.sayAge = function() {

									  console.log(this.age);

									};

									//

									var instance1 = new SubType('Jake', 20)

									instance1.color.push('black');

									console.log(instance1.color); //'red,blue,green,black'

									instance1.sayName(); //'Jake'

									instance1.sayAge(); //20

									//

									var instance2 = new SubType('Greg', 21);

									console.log(instance2.color); //'red,blue,green'

									instance2.sayName(); //'Greg';

									instance2.sayAge(); //21

观察输出结果，便可以发现：两个SubType实例（instance1和instance2）既分别有自己的属性，又可以使用相同的方法。

优点

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，所以是JS中最常用的继承模式。而且，instanceof和isPrototypeOf()也能够用于识别基于组合继承创建的对象。

缺点

调用两次SuperType构造函数

在SubType.prototype上创建了不必要的属性

寄生组合继承

				?

									function SuperType (name) {

									 this.name = name

									 this.colors = ['red', 'blue', 'yellow']

									}

									SuperType.prototype.sayName = function () {

									 console.log(this.name)

									}

									function SubType (name, age) {

									 SuperType.call(this, name) // 通过构造函数继承实例属性

									 this.age = age

									}

									SubType.prototype = Object.create(SuperType.prototype)  //继承父类共享方法

									SubType.prototype.constructor = SubType //将SubType.prototype.constructor指针指回SubType函数

									SubType.prototype.sayAge = function () {

									 console.log(this.age)

									}

									let obj = new SubType('jake', 22)

									obj.sayName()   // jake

									obj.sayAge()    // 22

									console.log(obj instanceof SubType) // true

									console.log(obj instanceof SuperType)   // true

优点

寄生组合继承只调用了一次SuperType，所以更高效

避免了在SubType.prototype上创建了不必要的属性

下面说说原型链和构造函数的缺点

原型链

缺点：当原型链中包含引用类型值时，原型属性会被所有实例共享；

下面看一个例子

				?

									function SuperType() {

									  this.color = ['red', 'blue', 'green'];

									}

									//

									function SubType() {};

									//

									SubType.prototype = new SuperType(); //继承了SuperType

									//

									var instance1 = new SubType();

									instance1.color.push('black');

									console.log(instance1.color);  //'red,blue,green,black'

									//

									var instance2 = new SubType();

									console.log(instance2.color);  //'red,blue,green,black'

借用构造函数

缺点：如果仅仅使用构造函数，方法都在构造函数中定义，因此函数就无法实现复用了。而且，在超类型的原型中定义的方法，对于子类型而言也是不可见的。

您可能感兴趣的文章 :

原文链接 : https://i.jakeyu.top/2016/09/09/JS%E7%BB%A7%E6%89%BF%E6%96%B9%E6%B3%95/

Tag : JavaScript(102)

vue el-switch初始值(默认值)不能正确显示状态问题

el-switch 初始值（默认值）不能正确显示状态先去检查一下接口返回格式如果是字符串不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
微信小程序跳转外部链接的实现方法

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下： 1、配置业务域
自己写一个uniapp全局弹窗(APP端)

效果图： uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听
JavaScript console对象与控制台使用介绍

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2.
JavaScript错误处理机制全面分析介绍

1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 1 2 const err = new Error(代码出
JavaScript Object.defineProperty与proxy代理模式的使用详

1. Object.defineProperty 1 2 const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符返回值
Javascript Object对象类型使用介绍

1. 生成方法对象是javaScript中的一种数据类型,它是key-value的合集，是无序的 1 2 3 4 const obj = { name: ian,age: 21}; //key使用变量 const gender = gender
JavaScript代码不能被阻断的稳定性建设

背景稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因，导致出错，进而整个后续代码有可能都被阻断。直接影响线上的稳定
JavaScript前端学算法题解LeetCode最大重复子字符串

最大重复子字符串给你一个字符串sequence，如果字符串word连续重复k次形成的字符串是sequence的一个子字符串，那么单词word的重复值为k。单
uni-app小程序沉浸式导航实现的全过程

项目要在多个页面上加自定义导航栏，还要有渐变效果，就是随着页面上滑，导航栏透明度由0逐渐变为1。这里面有几个基本点需要注意下。