JavaScript中的继承(原型链)
一、原型链
ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.
实例1:
function SupType() {
this.property = true;
} SupType.prototype.getSupvalue = function() {
return this.property;
}; function SubType() {
this.subproperty = false;
} //原型对象等于一个类型的实例
SubType.prototype = new SupType(); SubType.prototype.getSubValue = function() {
return this.subproperty;
}; var instance = new SubType();
alert(instance.getSupvalue());//true
原理分析:
javascript中继承的原理是通过原型让一个引用类型继承另一个引用类型的属性和方法,当一个原型对象等于一个引用类型的实例(就如同将一个对象赋值给另一个对象一样,此时被赋值的对象就拥有了这个对象的属性或方法),此时这个原型对象就拥有了这个实例所拥有的属性或方法.
SupType的实例中包含一个指向原型对象的内部指针和一个属性property,SupType的实例被赋值给了SubType原型对象,现在SubType原型对象中就包含了指向SupType原型对象的内部指针和property属性.此时SubType的实例对象就可以访问到SupType构造函数中的方法getSupvalue,当前getSupvalue中的this指向的是SubType的实例对象,所以最后得到的结果为true.
理解javascript中的原型模式 ,理解了原型模式就很好理解javascript中的原型链,从而就很好理解JavaScript中的继承.
二、继承中定义方法的2个规则.
1.当子类型要重写超类型中的方法或是要为超类型添加不存在的方法时,给原型添加方法的代码必须放在替换原型的语句之后.
实例1:
function SupType() {
this.property = true;
} SupType.prototype.getSupvalue = function() {
return this.property;
}; function SubType() {
this.subproperty = false;
} //原型对象等于一个类型的实例
SubType.prototype = new SupType(); SubType.prototype.getSupvalue = function() {
return false;
}; SubType.prototype.getSubValue = function() {
return this.subproperty;
}; //SubType.prototype = new SupType(); var instance = new SubType();
alert(instance.getSupvalue());//false
子类型重写了超类型中的方法,因此会屏蔽原来的方法,最后返回的结果为false.
实例2:
如果将SubType.prototype = new SupType();这段替换原型的语句放在给原型添加方法的后面,上面最后得到的结果为true.
function SupType() {
this.property = true;
} SupType.prototype.getSupvalue = function() {
return this.property;
}; function SubType() {
this.subproperty = false;
} //原型对象等于一个类型的实例
//SubType.prototype = new SupType(); SubType.prototype.getSupvalue = function() {
return false;
}; SubType.prototype.getSubValue = function() {
return this.subproperty;
}; SubType.prototype = new SupType(); var instance = new SubType();
alert(instance.getSupvalue());//true
alert(instance.getSubValue());// instance.getSubValue is not a function
如果是先给子类型的原型添加方法,然后再将超类型的实例赋值给子类型的原型,那么子类型的原型就被这个超类型的原型重写了,子类型中的方法都不再存在,现在子类型的原型指向的是超类型的原型对象,调用方法instance.getSupvalue()是超类型中的方法返回true.
2.通过原型链实现继承时,不要用字面量创建原型方法,这样会重写原型链.
实例:
function SupType() {
this.property = true;
} SupType.prototype.getSupvalue = function() {
return this.property;
}; function SubType() {
this.subproperty = false;
} //原型对象等于一个类型的实例
SubType.prototype = new SupType(); //SubType.prototype.getSupvalue = function() {
// return false;
//}; //SubType.prototype.getSubValue = function() {
// return this.subproperty;
//}; SubType.prototype = {
getSubvalue: function() {
return this.subproperty;
}
}; var instance = new SubType();
alert(instance.getSupvalue());
alert(instance.getSubValue());
测试结果:
重写原型链切断了子类型和超类型之间的关系(SubType和SupType现在没有了关系).
JavaScript中的继承(原型链)的更多相关文章
- JavaScript 中实现继承的方式(列举3种在前一章,我们曾经讲解过创建类的最好方式是用构造函数定义属性,用原型定义方法。)
第一种:对象冒充 function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.col ...
- Javascript 组合继承 原型链继承 寄生继承
Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["re ...
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...
- 浅谈JavaScript中的继承
引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...
- 彻底搞懂JavaScript中的继承
你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- "继承"就和"原型链"这一概念息息相关.甚至可以说,所谓的"原型链&q ...
- 关于JavaScript中实现继承,及prototype属性
感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...
- javascript中各种继承方式的优缺点
javascript中实现继承的方式有很多种,一般都是通过原型链和构造函数来实现.下面对各种实现方式进行分析,总结各自的优缺点. 一 原型继承 let Super = functioin(name = ...
- javascript中实现继承的几种方式
javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Chi ...
- 深入理解JavaScript中的继承
1前言 继承是JavaScript中的重要概念,可以说要学好JavaScript,必须搞清楚JavaScript中的继承.我最开始是通过看视频听培训班的老师讲解的JavaScript中的继承,当时看的 ...
随机推荐
- laravel 中 与前端的一些事4 之合并压缩静态文件
合并压缩多个静态文件到一个文件里面,可以减少网站的http请求,稍微优化性能,提高网站的用户体验 使用elixir来实现: 敲命令 合并并压缩js和css文件
- HTML 认识
1.1认识什么是纯文本文件 Window 自带的一个软件,叫做记事本,记事本保存的格式就是TXT,就是英文text的缩写,术语上称呼为"纯文本文件". 注意: TXT文件,只 ...
- winform app.config文件的动态配置
获取 获取应用程序exe.config文件中 节点value值 /// <summary> /// 功能: 读取应用程序exe.config文件中 /// appSettings节点下 ...
- MYSQL -NOSQL -handlersocket
一个MYSQL的插件,让MYSQL支持NOSQL 好处,跟MYSQL公用数据.比普通CACHE方便.普通CACHE有同步数据问题 坏处,不兼容MEMCAHE,跟MEMCAHE一样没安全控制 编译与安装 ...
- const char * char * const
2 区分 const * 与 * const 的差别 ( 1 ) 指针本身是常量不可变 ( char * ) const pCount; const (char *) pCount; ( 2 ) ...
- WCF初探-21:WCF终结点(endpoint)
WCF终结点概述 在之前文章的示例中,我们都是通过配置服务的终结点(endpoint)发布的服务,供客户端调用,这是因为WCF服务的所有通信都是通过该服务的终结点进行的.每个终结点(endpoint) ...
- .htaccess简介和详解
.htaccess文件(或者”分布式配置文件”)提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.作为用户,所能使用的命令受到 ...
- 【仿真】【modelsim】:verilog功能仿真流程
一.编写verilog源文件,在diamond中编译.编写testbench文件.在diamond设置中将仿真工具设置为modelsim,运行仿真向导 二.自动进入modelsim, 编译全部 运行仿 ...
- Servlet路径跳转1---使用相对路径和绝对路径,在页面上调用servlet的路径写法(超链接的方式和表单的方式)
课程1-13 http://www.imooc.com/video/5554 Servlet路径跳转: 绝对路径:放在任何地方都对的路径 相对路径:相对于当前资源的路径 index文件 加上/,表 ...
- Django+python+BeautifulSoup垂直搜索爬虫
http://blog.sina.com.cn/s/blog_709475a10100wmln.html