javascript原型继承
在传统的基于Class的语言如Java、C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass。
由于这类语言严格区分类和实例,继承实际上是类型的扩展。但是,JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型。
但是办法还是有的。我们先回顾Student
构造函数:
function Student(props) {
this.name = props.name || 'Unnamed';
} Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
}
现在,我们要基于Student
扩展出PrimaryStudent
,可以先定义出PrimaryStudent
:
function PrimaryStudent(props) {
// 调用Student构造函数,绑定this变量:
Student.call(this, props);
this.grade = props.grade || 1;
}
但是,调用了Student
构造函数不等于继承了Student
,PrimaryStudent
创建的对象的原型是:
new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null
必须想办法把原型链修改为:
new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null
这样,原型链对了,继承关系就对了。新的基于PrimaryStudent
创建的对象不但能调用PrimaryStudent.prototype
定义的方法,也可以调用Student.prototype
定义的方法。
如果你想用最简单粗暴的方法这么干:
PrimaryStudent.prototype = Student.prototype;
是不行的!如果这样的话,PrimaryStudent
和Student
共享一个原型对象,那还要定义PrimaryStudent
干啥?(就像,父亲生个儿子,是让保持他身上的特性,可以帮父亲干活,但是生出的儿子去干指定的活,是让父亲帮他干的,那生这个儿子干啥。。。)
我们必须借助一个中间对象来实现正确的原型链,这个中间对象的原型要指向Student.prototype
。为了实现这一点,参考道爷(就是发明JSON的那个道格拉斯)的代码,中间对象可以用一个空函数F
来实现:
// PrimaryStudent构造函数:
function PrimaryStudent(props) {
Student.call(this, props);
this.grade = props.grade || 1;
} // 空函数F:
function F() {
} // 把F的原型指向Student.prototype:
F.prototype = Student.prototype; // 把PrimaryStudent的原型指向一个新的F对象,F对象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F(); // 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent; // 继续在PrimaryStudent原型(就是new F()对象)上定义方法:
PrimaryStudent.prototype.getGrade = function () {
return this.grade;
}; // 创建xiaoming:
var xiaoming = new PrimaryStudent({
name: '小明',
grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // // 验证原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true // 验证继承关系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true
发现这样继承的步骤有点繁琐了,可以将它封装起来!!!
如果把继承这个动作用一个inherits()
函数封装起来,还可以隐藏F
的定义,并简化代码:
function inherits(Child, Parent) {
var F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
这个inherits()
函数可以复用:
function Student(props) {
this.name = props.name || 'Unnamed';
} Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
} function PrimaryStudent(props) {
Student.call(this, props);
this.grade = props.grade || 1;
} // 实现原型继承链:
inherits(PrimaryStudent, Student); // 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
return this.grade;
};
小结
JavaScript的原型继承实现方式就是:
定义新的构造函数,并在内部用
call()
调用希望“继承”的构造函数,并绑定this
;借助中间函数
F
实现原型链继承,最好通过封装的inherits
函数完成;继续在新的构造函数的原型上定义新方法。
javascript原型继承的更多相关文章
- 再谈javascript原型继承
Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下 ...
- 彻底理解Javascript原型继承
彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员 ...
- [转]Javascript原型继承
真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承.Javascript原型继承是一个被说烂掉了的话题 ...
- JavaScript原型继承工作原理
原型继承的定义 当你阅读关于JS原型继承的解释时,你时常会看到以下这段文字: 当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止.——出自JavaScript秘 ...
- 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象
JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...
- JavaScript 原型继承开端
1.原型继承本质 就javascript对象系统的实现来讲,对象并没有原型,而构造器有原型(构造器.prototype指向其原型).对象只有构造自某个原型的说法,并没有持有某个原型的说法. ...
- 浅析Javascript原型继承(转)
引自: http://blog.csdn.net/kittyjie/article/details/4380918 原作者解释的浅显易懂,非常不错的JavaScript prototype总结 JS没 ...
- Javascript原型继承容易忽略的错误
编写Javascript的开发者都知道,JS虽然没有类(ES6添加了class语法),但是可以模拟出OOP语言的类和面向对象的概念,比如我们都知道的一句话,Javascript中处处是对象,而面向对象 ...
- javascript原型继承圣杯模式
javascript纯面向对象开发需要使用到的一个模式,来对对象之间原型继承做中间层代理避免重复继承与代码杂乱 <!DOCTYPE html> <html lang="en ...
随机推荐
- 第十一章 ZYNQ-MIZ702 DDR3 PS读写操作方案
本编文章的目的主要用简明的方法在纯PS里对DDR3进行读写. 本文所使用的开发板是Miz702 PC 开发环境版本:Vivado 2015.4 Xilinx SDK 2015.4 11.0本章难度 ...
- SysInternals提供了一个工具RamMap,可以查看内存的具体使用情况
SysInternals提供了一个工具RamMap,可以查看内存的具体使用情况.如果发现是Paged Pool和Nonpaged Pool占用过大,可以用另一个工具poolmon来查看占用内存的驱动T ...
- javascript之取余数、去商、天花板取整、地板取整
demo1: console.log('//求余数'); //求余数 console.log(5 % 4); console.log(6 % 4); //求商 console.log('//求商'); ...
- 关于typora换行的问题
neo4j> profile MATCH (liskov:Scientist { name:'Liskov' })-[:KNOWS]->(wing:Scientist)-[:RESEARC ...
- LeetCode 腾讯精选50题--链表排序
解题思路:归并 先把链表拆开,分为两部分,一直拆到只剩一个元素后,进行合并,利用一个临时节点记录重排后的链表的起始位置 合并不难,困难点在于如何拆分链表,自己的大体思路是利用两个指针,一个一次移动两位 ...
- JavaScript 标准内置对象
JavaScript 标准内置对象或称全局的对象(global objects)不要和 全局对象(global object)混淆.这里说的全局的对象是说在全局作用域里的对象,全局作用域包含了全局对象 ...
- python初始化定长列表
>>> lst = ['x' for n in range(5)] >>> print(lst) ['x', 'x', 'x', 'x', 'x'] >> ...
- 16.SpringMVC核心技术-文件上传
上传单个文件 1.定义具有文件上传功能的页面 index.jsp,其表单的设置需要注意,method 属性为 POST, enctype 属性为 multipart/form-data.另外,需要注意 ...
- C#面向对象(抽象类、接口、构造函数、重载、静态方法和静态成员)
1.抽象类 抽象类关键词 abstract (抽象) override (重写) 在父集中用 abstract 表示抽象类,抽象方法,在子集中用 override 改写 抽 ...
- 切记:永远不要在MySQL中使用UTF-8
MySQL使用UTF-8 issue 问题描述:最近我遇到了一个bug,我试着通过Rails在以“utf8”编码的MariaDB中保存一个UTF-8字符串,然后出现了一个离奇的错误: Incorrec ...