Javascript类继承-机制-代码Demo【原创】
最近看到《Javascript设计模式》,对js模拟的”继承方式“有了更深一步的了解,虽然之前也总是用到prototype、new ,但只是知其然不知所以然,现在将类继承的方法整理如下,暂时不对原型链、继承机制做过多描述,直接上代码,让大家先有一个整体的了解!
依照教程中对”类继承“逐步的优化,递进方式讲述了以下几种类继承方法,将教材中的几个demo例子记录一下,分享给大家,共同学习:
先给一个类定义与实例化的方法:
/* Class Person. */
//类定义
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
//实例化
var reader = new Person('John Smith');
reader.getName();
下面开始说继承,Author类继承Person类
方法1:
最基础的继承表达式
/* Class Author. */
function Author(name, books) {
Person.call(this, name); // Call the superclass' constructor in the scope of this.
this.books = books; // Add an attribute to Author.
}
Author.prototype = new Person(); // Set up the prototype chain.
Author.prototype.constructor = Author; // Set the constructor attribute to Author.
Author.prototype.getBooks = function() { // Add a method to Author.
return this.books;
};
//Author类实例化
var author = [];
author[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']); author[1].getName();
author[1].getBooks();
方法2:
使用extend方法,将继承的方法封装进去
/* Extend function. */
function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}
/* Class Person. */
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
/* Class Author. */
function Author(name, books) {
Person.call(this, name); //该方法的问题:超类Person名字被固化在Author类的声明之中
this.books = books;
}
extend(Author, Person);
Author.prototype.getBooks = function() {
return this.books;
};
方法3:
解决方法2中问题(超类Person名字被固化在Author类声明中)
/* Extend function, improved. */
function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass; //确保超类的constructor属性(superClass.prototype.constructor)已被正确设置
subClass.superclass = superClass.prototype;
if(superClass.prototype.constructor == Object.prototype.constructor) {
superClass.prototype.constructor = superClass;
}
}
/* Class Person. */
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
/* Class Author. */
function Author(name, books) {
Author.superclass.constructor.call(this, name);
this.books = books;
}
extend(Author, Person);
Author.prototype.getBooks = function() {
return this.books;
};
//有了superclass属性,就可以直接调用超类中的方法
Author.prototype.getName = function() {
var name = Author.superclass.getName.call(this);
return name + ', Author of ' + this.getBooks().join(', ');
};
最后,针对方法3,看一下两个class的结构,一目了然:
转载,请注明地址:
http://www.cnblogs.com/qiongmiaoer/p/4599869.html
------------------------------------------------
博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
店名:
小鱼尼莫手工饰品店
经营:
发饰、头花、发夹、耳环等(手工制作)
网店:
http://shop117066935.taobao.com/
---------------------------------------------------------------------
Javascript类继承-机制-代码Demo【原创】的更多相关文章
- JavaScript类继承, 用什么方法好
JavaScript类继承, 用什么方法好 一个实例: 基类Car: function Car(color, year) { this.name = "car"; this.col ...
- JavaScript中继承机制的模仿实现
首先,我们用一个经典例子来简单阐述一下ECMAScript中的继承机制. 在几何学上,实质上几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形. ...
- JavaScript类继承
和其他功能一样,ECMAScript 实现继承的方式不止一种.这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的.这意味着所有的继承细节并非完全由解释程序处理.作为开发者 ...
- javascript类继承的一些实验
其实一开始编js没怎么用过对象,一般都用func,func,func···但是用多了,感觉代码一点都不美观,还要这里包一个函数,那里包一个函数,或者一直都是函数调用,不好看,而且一些重用的都要重写的话 ...
- 第7.7节 案例详解:Python类继承机制
本节实现一个类继承的小程序,下面一边结合代码一边介绍相关继承的知识.例子以车.汽车为例,车为父类.汽车为子类. 一. 定义父类Vehicle class Vehicle(): def __ ...
- JavaScript简洁继承机制实现(不使用prototype和new)
此方法并非笔者原创,笔者只是在前辈的基础上,加以总结,得出一种简洁实用的JavaScript继承方法. 传统的JavaScript继承基于prototype原型链,并且需要使用大量的new操作,代码不 ...
- Javascript 类继承
Js继承 JavaScript并不是真正面向对象的语言,是基于对象的,没有类的概念. 要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 /** 声明一个基础父类 ...
- javascript类继承系列五(其他方式继承)
除了前面学习的三种继承外,还有另外三种:原型继承寄生继承,寄生组合继承都是以: function object(o) { function F() { } F.prototype = o; retur ...
- javascript类继承系列二(原型链)
原型链是采用最主要的继承方式,原理:每一个类(构造器,js中的function)都有一个原型属性(prototype)指向一个原型对象,原型对象有一个构造器(constructor),它又指回到fun ...
随机推荐
- ServiceStack.Redis之IRedisClient<第三篇>
事实上,IRedisClient里面的很多方法,其实就是Redis的命令名.只要对Redis的命令熟悉一点就能够非常快速地理解和掌握这些方法,趁着现在对Redis不是特别了解,我也对着命令来了解一下这 ...
- 用c#开发微信 (19) 公众平台接口权限列表说明 - 订阅号、服务号认证后的区别
最新发现有些原来认证服务号的权限对认证的订阅号开放了,这里是官方的文档说明<公众平台接口权限列表说明>,明显比这里说得详细.准确多了<微信公众平台服务号.订阅号的相关说明>.另 ...
- C#设计模式(5)——建造者模式(Builder Pattern)
一.引言 在软件系统中,有时需要创建一个复杂对象,并且这个复杂对象由其各部分子对象通过一定的步骤组合而成.例如一个采购系统中,如果需要采购员去采购一批电脑时,在这个实际需求中,电脑就是一个复杂的对象, ...
- [UML]UML系列——协作图(通信图)collaboration diagram
系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图Class [UML]UML系列——类 ...
- github心得
心得 : 1:安装:省略 2. 配置 Git 以及上传代码 安装 Git 成功后,如果是 Windows 下,选择 Git Bash ,在命令行中完成一切,可能开始有点麻 烦,不过就那几条命令行,用 ...
- SQL Server使用文件组备份降低备份文件占用的存储空间
对于DBA来说,备份和刷新简历是最重要的两项工作,如果发生故障后,发现备份也不可用,那么刷新简历的重要性就显现出来,哇咔咔!当然备份是DBA最重要的事情(没有之一),在有条件的情况下,我们应该在多个服 ...
- Bootstrap的学习以及简单运用
<!DOCTYPE html> <html> <head> <title>柠檬学院</title> <meta charset=&qu ...
- Android Error Message
JAVA_HOME error. Add environment variable ANDROID_STUDIO, which is the same as %JAVA_HOME%, but one ...
- HTML5 <a>标签的ping属性用法
随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...
- Ninx虚拟主机的配置
1.配置ip ifconfig eth0 192.168.1.7 netmask 255.255.255.0 ifconfig eth0 192.168.1.17 netmak 255.255.255 ...