原型模式的定义
原型模式:用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法
用途:提升性能
原型模式提升性能的原理
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