JavaScript类的继承操作实例总结


Posted in Javascript onDecember 20, 2018

本文实例总结了JavaScript类的继承操作。分享给大家供大家参考,具体如下:

一、类式继承

首先要做的是创建构造函数。按惯例,其名称就是类名,首字母应该大写。在构造函数中,创建实例属性要用关键字this 。类的方法则被添加到prototype对象中。要创建该类的实例,只需结合关键字new调用这构造函数即可。

/* Class Person. */
function Person(name) {
 this.name = name;
}
Person.prototype.getName = function() {
 return this.name;
}
var reader = new Person('John Smith');
reader.getName();

二、原型链

JavaScript的每个对象都有一个名为prototype的属性,这个属性要么指向另一个对象,要么是null.在访问对象的某个成员时,如果这个成员未见于当前对象,那么就会到prototype所指的对象中去查找。如果还是没有找到,那么就会沿着原型链逐一访问每个原型对象,直到找到这个成员。这意味着让一个类继承另一个类,只需将子类的prototype设置为超类的一个实例即可。

为了让Author继承Person,必须手工将Author的prototype设置为Person的一个实例。最后一步是将prototypeconstruct属性重设为Author(因为prototype属性设置为Person的实例)时,其construct属性被抹除了。

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;
};
var author = [];
author[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']);
console.log(author[1].getName());
console.log(author[1].getBooks());

三、extend函数

为了简化类的声明,可以把派生子类的整个过程包装在一个名为extend的函数中。它的作用与其他语言的extend关键字类似,即基于一个给定的类的结构创建一个新的类:

function extend(subClass, superClass) {
 var F = function() {};
 F.prototype = superClass.prototype;
 subClass.prototype = new F();
 subClass.prototype.constructor = subClass;
}

其实所做的事与之前的是一样的。它先设置了prototype,然后再将其constructor重设为恰当的值。并且中间利用了一个空函数,这样就可以避免创建超类的实例。使用extend继承的写法:

function Person(name) {
 this.name = name;
}
Person.prototype.getName = function() {
 return this.name;
}
/* Class Author. */
function Author(name, books) {
 Person.call(this, name);
 this.books = books;
}
extend(Author, Person);
Author.prototype.getBooks = function() {
 return this.books;
};

但上面的存在一个问题就是超类Person的名称被固化在Author类的声明当中。更普世性的做法应该像下面这样:

/* Extend function, improved. */
function extend(subClass, superClass) {
 var F = function() {};
 F.prototype = superClass.prototype;
 subClass.prototype = new F();
 subClass.prototype.constructor = subClass;
 subClass.superclass = superClass.prototype;
 if(superClass.prototype.constructor == Object.prototype.constructor) {
  superClass.prototype.constructor = superClass;
 }
}
/* 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;
};
Author.prototype.getName = function() {
 var name = Author.superclass.getName.call(this);
 return name + ', Author of ' + this.getBooks().join(', ');
};

这个extend改进之后,多了一个superclass的属性,这个属性可以弱化Author和Person之间的耦合。extend后面三行用来确保超类的construtor已经被正确设置了。有了superclass的属性,就可以直接调用超类中的方法。这在既要重新定义超类的某个方法而又想访问其在超类中的实现时可以派上用场。例如,为了用一个新的getName的方法重新定义Person类中的同名方法,你可以先用Author.superclass.getName获得作者的名字,然后再次基础上添加新的信息。

四、原型继承

原型式继承与类式继承截然不同,我们在学习他的时候,最好忘记自己关于类和实例的一切知识,只从对象的角度来思考。使用原型式继承时,并不需要用类来定义对象的结构,只需直接创建一个对像就可以。这个对象随后可以被新的对象使用,该对象被称为原型对象。

下面使用原型对象来重新设计上面Person和Author:

var Person = {
 name: 'default name',
 getName: function() {
  return this.name;
 }
};
var reader = clone(Person);
alert(reader.getName()); // This will output 'default name'.
reader.name = 'John Smith';
alert(reader.getName()); // This will now output 'John Smith'.

clone函数可以用来创建新的类Person对象,创建一个空对象,并且该对象的原型对象被设置为person。当新对象中找不到某个方法时就会在原型对象中查找。

你不必去为了创建Author而定义一个Person子类,只要执行一次克隆就可以:

var Author = clone(Person);
Author.books = []; // Default value.
Author.getBooks = function() {
 return this.books;
}

然后你可以重定义该克隆中的方法和属性。可以修改Person的默认值。也可以添加新的属性和方法。这样一来就创建了一个新的原型对象,你可以将其用于创建新的Author对象:

var author = [];
author[0] = clone(Author);
author[0].name = 'Dustin Diaz';
author[0].books = ['JavaScript Design Patterns'];
author[1] = clone(Author);
author[1].name = 'Ross Harmes';
author[1].books = ['JavaScript Design Patterns'];
author[1].getName();
author[1].getBooks();

clone函数的写法:

function clone(object) {
  function F() {}
  F.prototype = object;
  return new F;
}

五、原型继承和类式继承之间的比较

可以自己去总结、
从内存,适用范围,优缺点等方面去分析

六、掺元类

有一种重用代码的方法不需要用到严格的继承,如果想把一个函数运用到多个类当中,可以通过扩充的方法让这些类共享函数。其实际大体做法就是:先创建一个包含各种通用的方法类,然后再扩充其他类,这种包含通用方法类称为掺元类,他们通常不会被实例化和直接调用,其存在的目的是向其他类提供自己的方法。

var Mixin = function() {};
Mixin.prototype = {
 serialize: function() {
  var output = [];
  for(key in this) {
   output.push(key + ': ' + this[key]);
  }
  return output.join(', ');
 }
};
augment(Author, Mixin);
var author = new Author('Ross Harmes', ['JavaScript Design Patterns']);
var serializedString = author.serialize();
function augment(receivingClass, givingClass) {
 for(methodName in givingClass.prototype) {
  if(!receivingClass.prototype[methodName]) {
   receivingClass.prototype[methodName] = givingClass.prototype[methodName];
  }
 }
}

但是有时候你并不需要所有的方法,因此我们还需要提供额外的参数来选择我们所需要的方法。如果不提供,那就全部复制。

function augment(receivingClass, givingClass) {
 if(arguments[2]) { // Only give certain methods.
  for(var i = 2, len = arguments.length; i < len; i++) {
   receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
  }
 }
 else { // Give all methods.
  for(methodName in givingClass.prototype) {
   if(!receivingClass.prototype[methodName]) {
    receivingClass.prototype[methodName] = givingClass.prototype[methodName];
   }
  }
 }
}

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js单向链表的具体实现实例
Jun 21 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
ES6 十大特性简介
Dec 09 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 #Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 #Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 #Javascript
JavaScript链式调用实例浅析
Dec 19 #Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 #Javascript
如何为vue的项目添加单元测试
Dec 19 #Javascript
浅谈Angular7 项目开发总结
Dec 19 #Javascript
You might like
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
JS变量提升及函数提升实例解析
2020/09/03 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python批量转换文件编码格式
2015/05/17 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
在python中修改.properties文件的操作
2020/04/08 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
Linux开机引导的步骤是什么
2014/02/26 面试题
《蓝色的树叶》教学反思
2014/02/24 职场文书
家教广告词
2014/03/19 职场文书
营销与策划实训报告
2014/11/05 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript