聊聊JavaScript如何实现继承及特点

“继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。JavaScript并没有“类”的概念,那么,它如何实现继承呢?

(ES6有关键字class和extend,继承的语法与Java等面向对象语言类似,但是,ES6 class,只是JavaScript原型继承的语法糖而已)

1. 类式继承

关键点:通过构造函数实现继承。

父类

rush:js;"> function Parent(name) { this.name = name || "parent"; } Parent.prototype.say = function() { return this.name; }

子类:

rush:js;"> function Child() {}

(1) 父类对象继承

rush:js;"> Child.prototype = new Parent("child");

var child = new Child();
child.say(); // "child"

特点:使用这种继承模式,子类不仅仅会继承父类原型上的方法/属性,还会继承父类自身的属性

这种模式的缺点是,在初始化父类对象指向给子类原型时,并不确定父类构造函数的初始化参数(Child.prototype = new Parent("child");),而且,往往这些参数并不是子类需要的。

(2) 借用构造函数

改造子类:

rush:js;"> function Child(){ Parent.apply(this,arguments); }

特点:使用这种继承模式,子类只会继承父类自身的属性

缺点很明显,它无法从原型链中继承任何方法/属性

(3) 共享原型

rush:js;"> Child.prototype = Parent.prototype;

这种方式的缺点是,子类原型和父类原型共享一个对象,那么,子类如果修改原型,必然会影响父类

(4) 临时构造函数

rush:js;"> function inherit(Child,Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); }

特点:利用一个函数F()充当子类和父类间的代理,既可以实现父类原型方法/属性的继承,又可以在子类原型上继续扩展方法/属性

一般,我们可以利用ES5提供的新方法Object.create()来实现此类继承。

rush:js;"> Child.prototype = Object.create(Parent.prototype);

2. 通过复制属性实现继承

复制属性分为

浅拷贝

深拷贝

浅拷贝不会复制对象类型,只会简单的将对象引用指向子类,代码如下:

rush:js;"> function extend(parent,child) { var key; for(key in parent) { if (parent.hasOwnProperty(key)){ child[key] = parent[key]; } } return child; }

深拷贝会做深度复制,如果某个属性为对象类型,那么,它会复制出该对象的属性,再拷贝给子类。代码如下:

rush:js;"> function extendDeep(parent,child) { var key; for(key in parent) { if (parent.hasOwnProperty(key)){ if (typeof parent[key] === 'object') { child[key] = (parent[key].toString() === "[object Array]")? []:{}; extendDeep(parent[key],child[key]); } else { child[key] = parent[key]; } } } return child; }

3. "借用方法"模式复用父类函数

如果不想实现父子之间的完全继承,仅仅期望子类实现父类一个或多个方法,那么可以利用apply,call,bind调用父类函数,实现复用。

代码如下:

rush:js;"> parent.say.call(child,"hello,child!");

小结

推荐采用“临时构造函数”模式实现继承。以上所述是小编给大家介绍的JavaScript如何实现继承。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...