【总结整理】JS的继承
参考阮一峰的文章:http://javascript.ruanyifeng.com/oop/inheritance.html#toc4

function Shape() {
this.x = 0;
this.y = 0;
} Shape.prototype.move = function (x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
}; function Rectangle() {
Shape.call(this); // 调用父类构造函数
}
// 另一种写法
function Rectangle() {
this.base = Shape;
this.base();
} // 子类继承父类的方法
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle; var rect = new Rectangle(); rect instanceof Rectangle // true
rect instanceof Shape // true rect.move(1, 1) // 'Shape moved.'

上面代码表示,构造函数的继承分成两部分,一部分是子类调用父类的构造方法,另一部分是子类的原型指向父类的原型。
上面代码中,子类是整体继承父类。有时,只需要单个方法的继承,这时可以采用下面的写法。
ClassB.prototype.print = function() {
ClassA.prototype.print.call(this);
// some code
}
上面代码中,子类B
的print
方法先调用父类A
的print
方法,再部署自己的代码。这就等于继承了父类A
的print
方法。
【总结整理】JS的继承的更多相关文章
- JS对象继承篇
JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...
- js实现继承的5种方式 (笔记)
js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...
- js实现继承的方式总结
js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- js实现继承的两种方式
这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...
- js实现继承
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...
- 浅谈JS的继承
JS继承 继承是OO语言中最为人津津乐道的概念,许多OO语言都支持两种方式的继承:接口继承:实现继承. 接口继承:只继承方法签名. 实现继承:继承实际的方法. 由于ES里函数没有签名,所以在ES里面无 ...
- JS类继承常用方式发展史
JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...
- js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...
- JS原型继承与类的继承
我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
随机推荐
- 抓包tcpdump
tcpdump是基于Unix系统的命令行式的数据包嗅探工具 tcpdump 可以监测真机或者模拟器 2g/3g/wifi下数据流动,前提手机必须root过. fillder也可以检测客户端数据包 ...
- web测试中的测试点和测试方法总结
测试是一种思维,包括情感思维和智力思维,情感思维主要体现在一句俗语:思想决定行动上(要怀疑一切),智力思维主要体现在测试用例的设计上.具有了这样的思想,就会找出更多的bug. 一.输入框 1.字符 ...
- Pycharm如何打断点
一. python代码的调试方式 1. 使用print语句打印出来 2. 在编辑工具中,加断点跟踪(打断点) 3. 使用日志模块,输出到日志中 下面我们来看一下如何打断点 二. 环境 python 3 ...
- 关于C++中的pow小记(转)
昨天在敲一个数位DP的问题,但是用到了这个坑D的问题,找了半天错,还以为又是什么奇怪的算法,结果发现思路一致,然后自己各种YY修改,最后不得不和正确答案比对,但是最后发现标准答案和自己的想法几乎一模一 ...
- Django Cookie Session和自定义分页
Django中操作Cookie 获取Cookie request.COOKIES['key'] request.get_signed_cookie(key, default=RAISE_ERROR, ...
- explicit修饰构造函数
问题描述:对于单参数的构造函数C++允许隐含的类型转换,容易破坏代码可读性,并导致难以发现的错误,通过关键字explicit修饰构造函数可以禁止单参数构造函数创建隐式临时变量.
- hdu-2544-最短路(Floyd算法模板)
题目链接 题意很清晰,入门级题目,适合各种模板,可用dijkstra, floyd, Bellman-ford, spfa Dijkstra链接 Floyd链接 Bellman-Ford链接 SPFA ...
- MySQL相关日志介绍
1.MySQL中主要日志如下: ① 错误日志(Log Error) ② 查询日志(Query Log) ③ 二进制日志(Binary Log) 2.相关日志的作用: 1) 错误日志(Error Log ...
- Linux命令学习(21):netstat命令
版权声明 更新:2017-06-13博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下面的netstat ...
- angular +H5 上传图片 与预览图片
//index.html <form class="form-horizontal"> <div class="panel panel-default& ...