【Web前端】使用 class 与 extends 实现继承

前言

在以往需要用到继承的地方，总是用 inherit 以及 prototype 来实现，这里用 class 以及 extends 来改写，有什么好处呢。计时更简单，不会有破坏instanceof运算的危险。

inherit 以及 prototype

这里用我刚学的 Node.js 中流的相关操作做演示：

var stream = require('stream');var util = require('util');function ReadStream() {    stream.Readable.call(this);}util.inherits(ReadStream, stream.Readable);ReadStream.prototype._read = function() {    this.push('I');    this.push('Love ');    this.push('Imooc\n');    this.push(null);};function WritStream() {    stream.Writable.call(this);}util.inherits(WritStream, stream.Writable);WritStream.prototype._write = function(chunk, encode, cb) {    console.log(chunk.toString());    cb();};function TransformStream() {    stream.Transform.call(this);}util.inherits(TransformStream, stream.Transform);TransformStream.prototype._transform = function(chunk, encode, cb) {    this.push(chunk);    cb();};TransformStream.prototype._flush = function(cb) {    this.push('Oh yeah!');    cb();};var rs = new ReadStream();var ws = new WritStream();var ts = new TransformStream();rs.pipe(ts).pipe(ws);

看上去真的挺多的，下面用 extends 改写。

class 与 extends

var stream = require('stream');class ReadStream extends stream.Readable {  _read() {    this.push('I');    this.push('Love ');    this.push('Imooc\n');    this.push(null);  }}class WritStream extends stream.Writable {  _write(chunk, encode, cb) {    console.log(chunk.toString());    cb();  }}class TransformStream extends stream.Transform {  _transform(chunk, encode, cb) {    this.push(chunk);    cb();  }  _flush(cb) {    this.push('Oh yeah!');    cb();  }}var rs = new ReadStream();var ws = new WritStream();var ts = new TransformStream();rs.pipe(ts).pipe(ws);

看上去简洁多了有没有。而且逻辑也很清晰。