欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 11:52:07
“继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。javascript并没有“类”的概念,那么,它如何实现继承呢? (es6有关键字class和ex...

“继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。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如何实现继承,希望对大家有所帮助