JS中的原型继承和多重继承
概念:1原型继承是创建新类型对象----子类型,子类型基于父类型,子类型拥有父类型所有的属性和方法(从父类型继承得到),然后修改其中的部分内容或者添加新的内容。继承最好在子类型模型可以被视为父类型对象的时候使用。
2从多个父类型中派生出一个对象类型称为多重继承。
原型继承:
使用new关键字和构造函数的prototype属性都是定义类型的特定方式,这些是我们到目前为止一直使用的,对于简单的对象,这种方式还是很好的,但是当程序过度使用继承时,这种创建对象的方法很快就显得笨拙了。所以增加一些函数作为常用操作符可以使其顺利一些。例如很多人都在对象上定义inherit方法和method方法。
Object.prototype.inherit=function(baseConstructor){
this.prototype = clone(baseConstructor.prototype);
this.prototype.constructor=this;
};
Object.prototype.method=function(name,func){
this.prototype[name]=func;
};
有了上面的信息,就可以像下面这样编码
function StrangeArray(){}
StrangeArray.inherit(Array);
StrangeArray.method("push",function(value){
Array.prototype.push.call(this,value);
Array.prototype.push.call(this,value);
});
var strange=new StrangeArray();
strange.push();//输出[4,4]
多重继承(混合类型):
实现多重继承的方式很多,下面的一个小例子是比较简单的而且多数情况下都适用的。
mix-in是一种特殊的原型,它可以混入到其他的原型里。SmallItem可以看做这样的一个原型。通过将它的方法复制到另一个原型里,其自身也混入了那个复制方法的原型。
function mixInto(object,mixIn){
forEachIn(mixIn,function(name,value){
object[name] = value; });
};
var SmallDetailedItem = clone(DetailedItem);
mixInto(SmallDetailedItem,SmallItem); var deadMouse = SmallDetailedItem.create("Fred the mouse","he is dead");
deadMouse.inspect();
deadMouse.kick();
还有下面的例子就是三种继承的实现。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//The first way
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
this.books = books;
}
Author.prototype=new Person(name);
Author.prototype.constructor=Author;
Author.prototype.getBooks = function() {
return this.books;
}
var au1=new Author("dororo1","Learn much");
var au2=new Author("dororo2","Learn less");
alert(au1.getName());
alert(au2.getName()); //The second way function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
this.inherit=person;
this.inherit(name);
this.books = books; }
var au=new Author("dororo","Learn much");
alert(au.getName()) ; //The thrid way
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
function Author(name, books) {
this.base = new Person(name);
for(var key in this.base){
if(!this[key]){
this[key]=this.base[key];
}
}
this.book=books;
}
var au1=new Author("dororo1","work");
var au2=new Author("dororo2","play");
alert(au1.getName());
alert(au2.getName());
au1.book;
au2.book; </script>
</head>
<body> </body>
</html>
*part of the article from <<Eloquent JavaScript>>
JS中的原型继承和多重继承的更多相关文章
- JS中的原型继承机制
转载 http://blog.csdn.net/niuyongjie/article/details/4810835 在学习JS的面向对象过程中,一直对constructor与prototype感到很 ...
- js中的原型继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js中的原型、继承的一些想法
最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享 ...
- [转] JS中简单的继承与多态
这里讲了一个最最最简单的JS中基于原型链的继承和多态. 先看一下以下这段代码的实现(A是“父类”,B是“子类”): var A = function(){ this.value = 'a'; this ...
- javascript中的原型继承
在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...
- 谈谈JS中的原型
不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O( ...
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- ECMAScript中的原型继承
//ECMAScript中的原型继承//ECMAScript中的继承主要是依靠原型链实现的.(关于原型链的介绍,详见<高三>6.3.1章节 P162) //本文示例主要为了说明SubTyp ...
- js中的原型,原型链和继承
在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript最 ...
随机推荐
- LINUX下成功搭建SVN
步骤如下: 1: yum install -y subversion 2:svnserve –version 3: [root@singledb ~]# mkdir /u02/svn [root@si ...
- IP访问SQL数据库设置
http://wenku.baidu.com/link?url=mnjuPMo9qJvzluCHEvqVDawpuloKeGla05a2L3UtqzD_bF1VJMb7jHY4SBhuYH3-K_xF ...
- ActiveMQ学习笔记(一) JMS概要
(一)什么是JMS jms即Java消息服务(Java Message Service)应用程序接口是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...
- code::blocks编译多文件 没有定义的引用
code::blocks是一款据说灰常强大的IDE,以前虽然也经常使用,但一没用过高度功能,二来没用它写过工程性的东西,简单点说就是一个以上的源文件并且加入其他非标准的头文件,今天想做一个多文件的语法 ...
- Thinkphp框架 -- ajax无刷新上传图片
用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...
- WinForms 新窗体后台打开完美的解决
最近在做浏览器开发时,想要实现 IE 6那种多窗体,又允许后台打开而不抢占视野的方式. WinForms 应用程序中想要后台打开一个新的窗体,而不(抢焦).(遮挡)目前窗体. 需要注意的是,SW_SH ...
- PL/pgSQL的RETURN QUERY例子
我的例子: 数据准备: create table custinfo(custid integer,callingcnt integer); ,),(,),(,); 函数生成: CREATE OR RE ...
- Base64 图片转换工具
以前在写asp的后台的时候,有一个上传功能是必须的,那时候进行的图片预览(未上传前)其实就是获取本地的图片路径来显示图片,但是随着HTML5的出现,可以把图片通过编码来实现预览. 在雅虎的36条速度优 ...
- [AngularJS] $http cache
By default your HTTP requests with the $https service in Angular are not cached. By setting some opt ...
- nginx 学习八 高级数据结构之基数树ngx_radix_tree_t
1 nginx的基数树简单介绍 基数树是一种二叉查找树,它具备二叉查找树的全部长处:检索.插入.删除节点速度快,支持范围查找.支持遍历等. 在nginx中仅geo模块使用了基数树. nginx的基数树 ...