js设计模式【详解】—— 原型模式

简介: js设计模式【详解】—— 原型模式

原型模式的定义

原型模式:用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法

用途:提升性能

原型模式提升性能的原理

var MyFun1 = function(){
  this.name = 'zhangsan';
  this.age = '18';
};
 
// 原型模式
var MyFun2 = function(){};
MyFun2.prototype = {
  name : 'zhangsan',
  age : '18'
}

上面两个构造函数在创建新对象后都有2个属性,name和age,但是MyFun1每次的创建都会重新创建一遍name和age属性。而MyFun2是的这两个属性是一个指针,新创建的只是MyFun2这个构造函数,原型链中的__proto__会指向原型对象。

实现方法一 —— 使用 Object.create实现原型模式

var vehiclePrototype = {
    model:"保时捷",
    getModel: function () {
        console.log('车辆模具是:' + this.model);
    }
};
 
var vehicle = Object.create(vehiclePrototype,{
    "model":{
        value:"法拉利"
    }
});
 
vehicle.getModel();

实现方法二 —— 使用 prototype实现原型模式

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('法拉利');
car.getModel();

更多参考范例

var MyFun2 = function(){};
MyFun2.prototype.first = function(){
  return 'Hello';
}
MyFun2.prototype.second = function(){
  return 'World';
}

var MyFun2 = function(){};
MyFun2.prototype = {
  first:function(){
    return 'Hello';
  },
  second:function(){
    return 'World';
  }
}


更多设计模式详见——js设计模式【详解】总目录

https://blog.csdn.net/weixin_41192489/article/details/116154815

目录
相关文章
|
1天前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
21 8
|
1天前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
17 7
|
1天前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 组合模式
js设计模式【详解】—— 组合模式
20 7
|
1天前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
15 6
|
1天前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
17 6
|
1天前
|
设计模式 存储 JavaScript
js设计模式【详解】—— 享元模式
js设计模式【详解】—— 享元模式
15 6
|
1天前
|
设计模式 JavaScript API
js设计模式【详解】—— 命令模式
js设计模式【详解】—— 命令模式
16 6
|
1天前
|
设计模式 JavaScript
js设计模式【详解】—— 中介者模式
js设计模式【详解】—— 中介者模式
18 5
|
1天前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 构造函数模式
js设计模式【详解】—— 构造函数模式
14 6
|
7天前
|
设计模式 存储 算法
设计模式学习心得之五种创建者模式(2)
设计模式学习心得之五种创建者模式(2)
12 2