返回

JavaScript继承之老王的绿帽反击战

前端

JavaScript的继承机制错综复杂，经常让开发者头疼不已。老王作为一名经验丰富的程序员，却栽在了继承的坑里，原因是他大儿子的绿帽子横空出世。

上回说到，老王为了防止绿帽子蔓延，决定借助构造函数的力量。他给自己创建了一个制造器（构造函数），然后让儿子从中获取帽子。如此一来，每个帽子都是独立的个体，不会受到其他帽子的影响。

构造函数的妙用

构造函数的精妙之处在于，它可以为每个对象创建一个私有作用域。这样，即使儿子对帽子进行修改，也不会影响老王的帽子。

function Hat(color) {
  // 私有属性
  var _color = color;

  // 公共方法
  this.getColor = function() {
    return _color;
  };

  this.setColor = function(newColor) {
    _color = newColor;
  };
}

有了这个构造函数，老王就可以放心大胆地给儿子帽子了：

var oldWangHat = new Hat("green");
var sonHat = new Hat("blue");

sonHat.setColor("red");

console.log(oldWangHat.getColor()); // 输出："green"
console.log(sonHat.getColor()); // 输出："red"

正如你所见，老王的帽子依然是绿色的，不受儿子的影响。

原型链的陷阱

然而，老王得意忘形之余，却忽视了一个更隐蔽的陷阱：原型链。在JavaScript中，所有对象都从一个称为原型链的链式结构继承属性和方法。

老王和他的儿子都是由Hat构造函数创建的，因此他们共享同一个原型对象。这意味着，如果儿子修改了原型对象上的属性或方法，也会影响老王的帽子。

为了解决这个问题，老王需要断开原型链，让自己的帽子拥有一个独立的原型对象。

原型断链术

断开原型链的方法有很多，最简单的一种是使用Object.create()方法。

var oldWangHat = Object.create(Hat.prototype);
oldWangHat.setColor("green");

现在，老王的帽子拥有了自己的原型对象，与儿子的帽子完全隔离。

至此，老王终于可以高枕无忧，不用再担心绿帽子的困扰了。构造函数和原型链的妙用，完美地保护了他的尊严。