js面向对象设计之class继承
EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民。但是目前为止,这些关于类的新关键字仅仅是建立在旧的原型系统上的
语法糖,所以它们并没有带来任何的新特性。不过,它使代码的可读性变得更高,并且为今后版本里更多面向对象的新特性打下了基础。
在介绍 class 继承以前,先来回忆一下没有 class 之前类是怎么被创建和继承的:
1、定义 function father 构造函数,再通过 prototype 定义 father 类原型方法。
2、定义 function child 构造函数,构造函数内部通过 father.call( this, arguments ) 的方式获得父类的实例属性。
3、通过 child.prototype = new father() 的方式获取 father 的原型方法。
4、最后还必须 child.prototype.constructor = child 的方式进行子类构造函数的还原。
再从 child 上继续往下派生呢? 项目代码的可读性越来越差,代码结构也越来越不清晰。当然本文并未打算讨论 javascript 的不是。在能基本满足生产要求的情况下,暂时也不会去深入探讨 function class prototype __proto__ constructor 等等内容的错综复杂的关系,实际上我们需要的是清晰的代码层次,满足继承关系即可,至于里边的实现,可能不会显得那么重要,一般情况下,我们并不会需要去了解的如此的深入。
废话不多说,开始本文的主要内容。
class 作为类的使用,可参见我的另外一篇博文:js面向对象设计之class类。下面主要介绍 class 的继承。
先来看一个简单的例子:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y);
this.color = color;
}
toString() {
return this.color + ' ' + super.toString();
}
}
let ins = new ColorPoint(,,'red');
console.log( ins.toString() ); /* red [object Object] */
class 继承一个比较关键的引用 super 在上述例子中出现了两次。分别是在构造函数中和类方法中。需要注意的是 super 只能在子类中使用。super 在构造函数中的作用和在子类方法中的作用并不同。
在构造函数中,super 是一个函数,它调用父类的构造函数,并隐式的返回一个 this。如果在 super(x,y) 前面执行 this.color 程序会报错。原因前一句已经说了,super 会隐式的返回一个 this,而子类的构造函数的初始化全部都是基于这个 this 的。这是 class 中的一种机制,关于构造函数的这部分内容无须记得很牢,因为在开发过程中,如果子类的构造函数不使用 super(...),或在错误的地方调用它,子类都会报错,所以无论如何,你都会记得很牢(否则程序无法开发下去)。
而在子类的方法中,super 作为一个引用指向父类的方法。这个特性在 function 中也可以实现,虽然需要写一些不那么好阅读和维护的代码,比如你可以先保存 father.toString 的引用(当然需要注意 this 的指向问题,可以采用 bind 或 call 等方式),然后再写 child.toString = function(){...},在这里面调用父类的方法。也许有更优雅的写法。但是能有 class 的写法更加优雅简洁易读和易维护吗,显然不能,那我们就必须往前看了。在成为资深前端之前,可以忘掉 function。
在使用 super 调用父类的方法时,super 内部的 this 指向子类。逆向思维来想想,这个 this 也只能指向子类的实例,调用者就是它。除非用 bind call apply 这些东西。
关于 super 博主将来会深挖更多的东西,现在暂且就了解到这个地步。
ins 同时是 Point 和 ColorPoint 的实例,这个读者自行验证。这也符合 ES5 的规范。
上面的例子中,ins 的属性 x 是在原型上,还是在实例上?这里从 super 的理解上着手立马就有答案,x 属性是实例的,不是原型的。
这个例子讲解了 class 类的公有属性和公有方法的相关继承问题。公有属性全部都在实例上,而公有方法全部都在原型上。这个就不详细展开了。
下面是 class 的静态方法相关处理方式。
class A { static geta(){ console.log( 'A' ); } }
class B extends A { static getb(){ console.log( 'B' ); } }
B.geta(); /* A */
B.getb(); /* B */
下面来看看 class 中的私有属性在继承中的相关反应。先看一个例子:
var A = ( function(){
var _name;
class A {
constructor() {}
getName(){ console.log( _name ); }
setName( name ){ _name = name; return this; }
}
return A;
} )();
class B extends A { }
let ins = new B();
ins.setName('nDos').getName(); // nDos
上例中 B 继承于 A,B 的实例 ins 可以通过 A 的公有方法使用 A 的私有变量 _name。
小tips:class 中可以让指定的类无法被实例化,通过判断 new.target === theClass(定义的类名)的真假抛出错误,使得 theClass 不能被实例化而只能被继承,这是一个很有用的 tips。不用担心继承的问题,子类实例化的时候,父类的构造函数中 new.target 指向的是子类。参见下例:
class A {
constructor() {
new.target === A || console.log('A 为抽象类,不能被实例化')
}
}
class B extends A { }
let ins = new B(); /* A 为抽象类,不能被实例化 */
class 的继承还可以从原生构造函数中继承,我的另外一篇博文有提过。关于这方面的内容需要单独行文探讨,此处暂时不讨论,仅仅提一下。
class Mixin 混合继承。这个是为了解决多重继承的问题而来。什么是多重继承,多重继承是编程语言中的概念,多重继承指的是一个类可以继承另外一个类,而另外一个类又可以继承别的类,比如A类继承B类,而A类又可以继承C类,这就是多重继承。这里将要将的就是这个。但是 Mixin 更加的灵活,使得代码结构也更加清晰优雅。
var A = ( function(){
var _name;
class A {
constructor() {}
getName(){ console.log( _name ); }
setName( name ){ _name = name; return this; }
}
return A;
} )();
function Mixin ( BaseClass ) {
return class extends BaseClass
{
mixin(){ console.log('这是混合继承的类的方法'); }
}
}
class C extends Mixin(A)
{
getC(){ console.log('c'); }
}
let ins = new C();
ins.mixin(); // 这是混合继承的类的方法
ins.setName('nDos').getName(); // nDos
ins.getC(); // c
js面向对象设计之class继承的更多相关文章
- js面向对象设计之class类
class 相对 function 是后出来的,既然 class 出来了,显然是为了解决 function 在处理面向对象设计中的缺陷而来.下面通过对比,来看看 class 作为 ES6 中的重大升级 ...
- js面向对象设计之function类
本文仅探讨如何合理的使用 function 在 javascript中实现一个面向对象设计的类.总所周知,javascript 并不能实现一个真正意义上的类,比如 protect 比如 函数重载.下面 ...
- JS面向对象(封装,继承)
在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...
- js面向对象(构造函数与继承)
深入解读JavaScript面向对象编程实践 Mar 9, 2016 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化.多态.和封装几种技术. 对JavaScript而言,其 ...
- JS面向对象,创建,继承
很开心,最近收获了很多知识,而且发现很多东西,以前理解的都是错的,或者是肤浅的,还以为自己真的就get到了精髓,也很抱歉会影响一些人往错误的道路上走,不过这也告诉了我们,看任何一篇文章都不能盲目的去相 ...
- Js 面向对象之封装,继承,原型,原型链
封装 ,继承 ,原型, 原型链 封装 ? 面向对象有三大特性,封装.继承和多态.对于ES5来说,没有class(类)的概念,并且由于JS的函数级作用域(函数内部的变量在函数外访问不到),所以我们就可以 ...
- JS面向对象(二)---继承
一.面向对象的继承 1.解析:在原有对象的基础上,略作修改,得到一个新的对象,并且不影响原有对象的功能 2.如何添加继承---拷贝继承 属性:call 方法: for in /* 继承:子类不影响父类 ...
- JS面向对象,原型,继承
ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript ...
- 实例了解js面向对象的封装和继承等特点
1.面向对象特点 相比之前按照过程式写法,面向对象有以下几个特点; 1.抽象:抓住核心问题,就是将很多个方法放在一个对象上.对象由属性和方法组成,属性就是我们定义的变量,它是静态的:方法就是行为操作, ...
随机推荐
- 1. Python中如何使用其他语言?(python的胶水作用,python又叫胶水语言)
1. python中如何插入C语言运行? (1)编写C语言代码: #include<stdio.h> void CFun() { printf("---------我是c语言:- ...
- Servlet中相对路径与绝对路径
相对路径与绝对路径: 相对路径:相对路径指的是相对于当前文件所在目录的路径! http://localhost:8080/servlet01/ http://localhost:8080/servle ...
- NSCache 的好处
相较于 NSDictionary 线程安全 系统资源将要耗尽时,自动删减缓存 自动删减"最久未使用的"对象 不会自动拷贝键.因为有些键不支持拷贝操作 可以和 NSPurgeable ...
- Fiddler工具详细介绍
百度看到Fiddler工具的详细介绍,转载收藏,侵权删,原文地址:http://blog.csdn.net/qq_21445563/article/details/51017605 前部分讲解Fidd ...
- (转)Python全能自动化开发环境软件之pyenv的安装说明
原文:http://www.magedu.com/73921.html pyenv,是一款特别好用的Python版本管理器,程序员可以建立不同的目录,在不同的目录里分别运行不同版本的Python, 并 ...
- excel将内容粘贴到筛选后的可见单元格
默认情况下,筛选后excel表格进行复制粘贴,会贴到隐藏的表格. 可以添加两个辅助列来完成操作:1.在筛选前在表格右边添加"辅助1"列,在第二行输入1,按Ctrl+鼠标左键往下拉到 ...
- 前端通信:ajax设计方案(二)---集成轮询技术
上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket双工 ...
- ubuntu16.04安装cuda,无法定位软件包问题
为了学习深度学习,这几天在安装深度学习框架,cuda安装时却出现无法定位软件包的问题.cuda官网下载时提供了deb和run格式,今天只讲deb格式的安装包安装过程的问题. 按照官方教程,下载好cud ...
- mongodb中Gson和java##Bean对象转化类
此类使用感觉比较繁琐, 每个字段加注解才可以使用, 不如mongoTemplate使用方便, 但如果使用mongo客户端的话, 还是比手动拼接快一点, 所以贴在这儿 package com.iwher ...
- 一个快速搜索下载jar包的网站
在偶然的机会,我一个快速搜索下载jar包的网站.里面涵盖了所有的几乎全世界开源的jar包,感觉这个功能特别适合java.android开发者使用,共享出来給大家悄悄. 百度一下:manyjar,就可以 ...