这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
"继承" 是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。这篇文章主要介绍了聊聊 JavaScript 如何实现继承及特点,有兴趣的可以了解一下。
"继承" 是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。JavaScript 并没有 "类" 的概念,那么,它如何实现继承呢?
(ES6 有关键字 class 和 extend,继承的语法与 Java 等面向对象语言类似,但是,ES6 class,只是 JavaScript 原型继承的语法糖而已)
1. 类式继承
关键点:通过构造函数实现继承。
父类:
- function Parent(name) {
- this.name = name || "parent";
- }
- Parent.prototype.say = function() {
- return this.name;
- }
子类:
- function Child() {}
(1) 父类对象继承
- Child.prototype = new Parent("child");
- var child = new Child();
- child.say(); // "child"
特点:使用这种继承模式,子类不仅仅会继承父类原型上的方法 / 属性,还会继承父类自身的属性。
这种模式的缺点是,在初始化父类对象指向给子类原型时,并不确定父类构造函数的初始化参数(Child.prototype = new Parent("child");),而且,往往这些参数并不是子类需要的。
(2) 借用构造函数
改造子类:
- function Child(){
- Parent.apply(this, arguments);
- }
特点:使用这种继承模式,子类只会继承父类自身的属性。
缺点很明显,它无法从原型链中继承任何方法 / 属性。
(3) 共享原型
- Child.prototype = Parent.prototype;
这种方式的缺点是,子类原型和父类原型共享一个对象,那么,子类如果修改原型,必然会影响父类。
(4) 临时构造函数
- function inherit(Child, Parent) {
- var F = function(){};
- F.prototype = Parent.prototype;
- Child.prototype = new F();
- }
特点:利用一个空函数 F() 充当子类和父类之间的代理,既可以实现父类原型方法 / 属性的继承,又可以在子类原型上继续扩展方法 / 属性。
一般,我们可以利用 ES5 提供的新方法
来实现此类继承。
- Object.create()
- Child.prototype = Object.create(Parent.prototype);
2. 通过复制属性实现继承
复制属性分为浅拷贝和深拷贝。
浅拷贝不会复制对象类型,只会简单的将对象引用指向子类,代码如下:
- function extend(parent, child) {
- var key;
- for(key in parent) {
- if (parent.hasOwnProperty(key)){
- child[key] = parent[key];
- }
- }
- return child;
- }
深拷贝会做深度复制,如果某个属性为对象类型,那么,它会复制出该对象的属性,再拷贝给子类。代码如下:
- 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
代码如下:
- parent.say.call(child, "hello, child!");
小结
推荐采用 "临时构造函数" 模式实现继承。以上所述是小编给大家介绍的 JavaScript 如何实现继承,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0531/334242.html