JavaScript中实现继承的两种设计模式

1.第一种就是通过面向对象的方式实现继承

这种风格是比较常见而且比较常用的

// ***面向对象设计模式***
// Foo构造函数
function Foo(who) {
  this.me = who;
}
// 在Foo的原型中添加identify方法
Foo.prototype.identify = function() {
  return "I am " + this.me;
};

// Bar构造函数,子类Bar继承了父类Foo
function Bar(who) {
  Foo.call(this, who);
}
//让Bar的原型委托Foo的原型
Bar.prototype = Object.create(Foo.prototype);

Bar.prototype.speak = function() {
  console.log("Hello," + this.identify());
}
// 实例化
var b1 = new Bar("Geer");
var b2 = new Bar("Smith");

b1.speak(); //Hello,I am Geer
b2.speak(); //Hello,I am Smith

2.第二种就是通过对象委托的方式实现继承

我们先看一个简单的例子

var foo = {
  doSomething: function() {
    console.log("告诉我你想要做什么");
  }
}

var bar = Object.create(foo);
bar.doSomething(); //告诉我你想要做什么

在这里的话Object.create()方法会创建一个新对象bar并关联到foo对象上,从而实现了所谓的继承(委托)关系(bar获得了foo的doSomething方法)。然而实际上他们却又不是真正的继承关系,他们是互相独立的,相当于兄弟关系,而不是父子关系

有了Object.create()这个方法后我们就可以通过关联的方式来实现委托机制了。下面我们来看下其它代码,下列的代码实现了与上面第一点介绍的面向对象设计模式完全一样的功能。

Foo = {
  init: function(who) {
    this.me = who;
  },
  identify: function() {
    return "I am " + this.me;
  }
};
//让Bar委托到Foo
Bar = Object.create(Foo);

Bar.speak = function() {
  console.log("Hello," + this.identify());
};

// 让b1委托到Bar
var b1 = Object.create(Bar);
b1.init("Geer");
// 让b2委托到Bar
var b2 = Object.create(Bar);
b2.init("Smith");

b1.speak(); //Hello,I am Geer
b2.speak(); //Hello,I am Smith

在上面的代码Bar = Object.create(Foo);中,Bar通过Object.create()来创建,它的prototype已经委托给了Foo对象,在Bar自身中找不到this.identify()方法,它就会到委托对象Foo中寻找,这种行为意味着如果某些对象(这里是Bar)找不到属性或者方法的引用时,就会把这个请求委托给另一个关联的对象(这里是Foo)。

3.最后

行为委托这种设计模式认为认为对象之间是兄弟的关系而不是父子关系,他们通过委托关联来实现在类设计模式中所谓的继承关系,而在JavaScript中的prototype机制实际上就是这种行为委托的机制,行为委托模式的方式更加简洁而且让代码的结构更加的清晰,类设计模式的话更适合那些从其他静态的面向对象语言转过来的开发者,不过实际上使用哪种设计模式还是取决于自己的喜好。

此文是通过看你不知道的JavaScript上卷写的总结,如果哪里写得不好,还请请多多指教。

原创文章 3 获赞 13 访问量 1709

猜你喜欢

转载自blog.csdn.net/weixin_43750480/article/details/104704808
今日推荐