JavaScript 中的原型设计模式


该系列的一部分:
JavaScript 设计模式

每个开发人员都努力编写可维护、可读和可重用的代码。随着应用程序变得更大,代码结构变得更加重要。设计模式证明对于解决这一挑战至关重要 – 在特定情况下为常见问题提供组织结构。

下面的设计模式只是可以帮助您升级为 JavaScript 开发人员的许多有用模式之一。有关完整集,请参阅JavaScript 设计模式

任何 JavaScript 开发人员都见过关键字原型,被原型继承弄糊涂了,或者在他们的代码中实现了原型。原型设计模式依赖于JavaScript 原型继承原型模型主要用于在性能密集的情况下创建对象。

创建的对象是传递的原始对象的克隆(浅层克隆)。原型模式的一个用例是执行广泛的数据库操作以创建用于应用程序其他部分的对象。如果另一个进程需要使用这个对象,而不是必须执行这个实质性的数据库操作,克隆以前创建的对象将是有利的。

原型设计模式 维基百科上的原型设计模式

此 UML 描述了如何使用原型接口来克隆具体实现。

要克隆一个对象,必须存在一个构造函数来实例化第一个对象。接下来,通过使用关键字原型变量和方法绑定到对象的结构。让我们看一个基本的例子:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype.go = function() {
    // Rotate wheels
}

TeslaModelS.prototype.stop = function() {
    // Apply brake pads
}

构造函数允许创建单个 TeslaModelS 对象。当创建新的 TeslaModelS 对象时,它将保留在构造函数中初始化的状态。此外,维护gostop函数很容易,因为我们用原型声明了它们在原型上扩展功能的同义方式如下所述:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype = {
    go: function() {
    // Rotate wheels
    },
    stop: function() {
    // Apply brake pads
    }
}

揭示原型模式

与模块模式类似,原型模式也有一个显着的变化。揭示原型模式提供了对公共和私有成员的封装,因为它返回一个对象文字。

因为我们要返回一个对象,所以我们将在原型对象前面加上一个函数通过扩展上面的示例,我们可以选择要在当前原型中公开的内容以保留其访问级别:

var TeslaModelS = function() {
    this.numWheels    = 4;
    this.manufacturer = 'Tesla';
    this.make         = 'Model S';
}

TeslaModelS.prototype = function() {

    var go = function() {
    // Rotate wheels
    };

    var stop = function() {
    // Apply brake pads
    };

    return {
    pressBrakePedal: stop,
    pressGasPedal: go
    }

}();

请注意函数 stop 和 go 将如何由于在返回对象的范围之外而不受返回对象的影响。由于 JavaScript 原生支持原型继承,因此无需重写底层特性。

觉得文章有用?

点个广告表达一下你的爱意吧 !😁