javascript 中的继承实例详解


Posted in Javascript onMay 05, 2017

javascript 中的继承实例详解

阅读目录

  • 原型链继承
  • 借用构造函数
  • 组合继承
  • 寄生组合式继承
  • 后记

继承有两种方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。

由于函数没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且实现继承主要依靠原型链来实现。

下面介绍几种js的继承:

原型链继承

原型链继承实现的本质是重写原型对象,代之以一个新类型的实例。代码如下:

function SuperType() {
  this.property = true;
}

SuperType.prototype.getSuperValue = function() {
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

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

SubType.prototype.getSubValue = function () {
  return this.subproperty;
};

var instance = new SubType();

console.log(instance.getSuperValue()); // true

可以看到instance调用了父级的getSuperVlue()方法,实现了继承。

原型链的继承有如下问题:

  1. 包含引用类型值的原型时,在改变原型的引用类型时,会全部改了
  2. 在创建子类型的实例时,没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数

示例代码如下:

function SuperType1() {
  this.colors = ['red', 'blue', 'green'];
}
function SubType1() {

}
SubType1.prototype = new SuperType1();
var instance1 = new SubType1();
instance1.colors.push('black');
console.log(instance1.colors); // [ 'red', 'blue', 'green', 'black' ]

var instance2 = new SubType1();
console.log(instance2.colors); // [ 'red', 'blue', 'green', 'black' ]

可以发现,instance1和instance2的colors属性是共享的,这就出问题了,同时也能够看出,在new一个新的方法时,如果传值的话,是传不到父级的。

借用构造函数

原理是在子类型构造函数的内部调用超类型构造函数,因为函数只不过是在特定环境中执行代码的对象,这样就可以获取父级的方法和属性了。

代码如下:

function SuperType(name) {
  this.name = name;
}

function SubType(name) {
  // 继承了SuperType,同时还传递了参数
  SuperType.call(this, name);

  // 实例属性
  this.age = 29;
}

var instance = new SubType('Bob');

console.log(instance.name); // Bob
console.log(instance.age); // 29

可以看出,调用构造函数继承解决了向父类型传参的问题,但调用构造函数也有其自身的问题:

  1. 方法都在构造函数中,函数复用没有了。
  2. 超类型的原型中定义的方法,对子类型而言是不可见的。

第一个问题很明显,针对第二个问题的解释是,由于只是执行了一次函数,并没有new出新对象,故而父类prototype中的方法对子类是不可见的。

组合继承

由于原型链继承和借用构造函数继承都有缺陷,故而在实际中一般不会单独使用。

组合继承是借用其两者的优点而产生的继承方法。

其原理是使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承。

代码如下:

function SuperType(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

SuperType.prototype.sayName = function() {
  console.log(this.name);
};

function SubType(name, age) {
  // 继承属性
  SuperType.call(this, name);

  this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  console.log(this.age);
};

var instance1 = new SubType('Nicholas', 29);
instance1.colors.push('black');

console.log(instance1.colors); // [ 'red', 'blue', 'green', 'black' ]
instance1.sayName(); // Nicholas
instance1.sayAge(); // 29

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

console.log(instance2.colors); // [ 'red', 'blue', 'green' ]
instance2.sayName(); // Greg
instance2.sayAge(); // 27

组合继承能够解决上面两种继承方式带来的问题,但是组合继承也有其自身的小问题,那就是会调用两次超类型构造函数,通过分析便可知道 一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。

寄生组合式继承

寄生组合式继承的原理为通过借用构造函数来继承属性,通过原型链的混成形式来继承方法,基本思路是不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。

代码如下:

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

function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

function SuperType(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

SuperType.prototype.sayName = function() {
 console.log(this.name);
};

function SubType(name, age) {
  SuperType.call(this, name);

  this.age = age;
}

// 继承的关键
inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function() {
  console.log(this.age);
};

var instance = new SubType('天涯', 23);
instance.sayName();
instance.sayAge();

寄生组合式继承只有在调用构造函数时执行了一遍超类型,解决了组合继承的小问题。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
JavaScript函数表达式详解及实例
May 05 #Javascript
Node.js中的http请求客户端示例(request client)
May 04 #Javascript
Bootstrap布局之栅格系统学习笔记
May 04 #Javascript
vue.js开发环境搭建教程
May 04 #Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 #jQuery
详解webpack es6 to es5支持配置
May 04 #Javascript
angular 基于ng-messages的表单验证实例
May 04 #Javascript
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
谈谈PHP语法(3)
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
js实现简单进度条效果
2020/03/25 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python生成随机密码的方法
2017/06/16 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python实现12306火车票抢票系统
2019/07/04 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
工作表现评语
2014/01/19 职场文书
化工专业自荐书
2014/06/16 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
档案管理员岗位职责
2015/02/12 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS