当前位置：网站首页>分分钟理解原型模式

分分钟理解原型模式

2022-04-21 17:20:00 【掘金安东尼】

原型模式（Prototype Pattern）是用于创建重复的对象，同时又能保证性能。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。

这种模式是实现了一个原型接口，该接口用于创建当前对象的克隆。当直接创建对象的代价比较大时，则采用这种模式。

我们可以通过 JavaScript 特有的原型继承特性去实现原型模式，也就是创建一个对象作为另一个对象的 prototype 属性值，我们也可以通过 Object.create(prototype, optionalDescriptorObjects) 来实现原型继承。

Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。

 
       // 因为不是构造函数，所以不用大写
       
       var 
       
       someCar 
       
       = {
       
       drive: 
       
       function () { },
       
       name: 
       
       '马自达 3'
       
};
       
       // 使用Object.create创建一个新车x
       
       var 
       
       anotherCar 
       
       = 
       
       Object.
       
       create(
       
       someCar);
       
       console.
       
       log(
       
       anotherCar.
       
       __proto__)
       
       // {name: '马自达 3', drive: ƒ}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

如果不直接使用 Object.create ，则模拟实现如下：

 
       var 
       
       vehiclePrototype 
       
       = {
       
       init: 
       
       function (
       
       carModel) {
       
       this.
       
       model 
       
       = 
       
       carModel;
       
    },
       
       getModel: 
       
       function () {
       
       console.
       
       log(
       
       '车：' 
       
       + 
       
       this.
       
       model);
       
    }
       
};
       
       function 
       
       vehicle(
       
       model) {
       
       function 
       
       F() { };
       
       F.
       
       prototype 
       
       = 
       
       vehiclePrototype;
       
       var 
       
       f 
       
       = 
       
       new 
       
       F();
       
       f.
       
       init(
       
       model);
       
       return 
       
       f;
       
}
       
       var 
       
       car 
       
       = 
       
       vehicle(
       
       'model 3');
       
       car.
       
       getModel();
       
       console.
       
       log()
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.