前端设计模式:从js原始模式开始,去理解Js工厂模式和构造函数模式

时间: 2018-01-18阅读: 1043标签: 模式

原始模式:  

在js中我们需要创建一个对象,比如创建一个“人”,它拥有自己的名称属性,和可以说话的功能,我们可以这样实现:

var person = new Object;
person.name = "Tony";
person.sayName = function(){
	console.log(this.name);
};
//或者字面量形式
var person={
	name:"tony",
	sayName:function(){
		console.log(this.name);
	}
}

这种设计被称为:原始模式。我们可以看出它具如下优缺点:

优点:可以直观的看出对象拥有的属性和方法
缺点:如果有多个类型,需要创建多个实例


工厂模式  

如果需要批量创建多个人,如person1、person2……的时候,使用原始模式的话每次都要重复类似的代码,如果要是可以批量生产就好了,这个时候使用工厂模式就能很好解决。如下:

var person=function(name){
	var obj=new Object;
	obj.name=name;
	obj.sayName=function(){
		console.log(this.name);
	}
	return obj
}
var p1=person('tony');
var p2=person('aimi');
console.log(typeof p1);  // object
console.log(typeof p2);  // object
console.log(p1 instanceof Object); // true

这样简单的调用就可进入造人模式了(啪啪啪……),只需要指定姓名就可以了。所以工厂模式可以理解像生活中工厂一样,可以批量的生产具有相同属性和功能的商品。开发场景:当我们需要解决很多相似问题,这时候就需要采用工厂模式来实现。

但是工厂模式下的对象我们不能识别它的类型,由于typeof返回的都是object类型,不知道它是那个对象的实例。另外每次造人时都要创建一个独立的person的对象,会造成代码臃肿的情况。所以工厂模式的优缺点总结如下:

优点:同一类型同一属性可以重复调用;能解决多个相似的问题。 
缺点:不能知道对象识别的问题(对象的类型不知道)。


构造函数模式

除了上面讲的工厂模式外,我们还可以使用构造函数模式来解决重复造轮子,产生大量的重复性代码的问题。例如:

var Person=function(name){
	this.name=name;
	this.sayName=function(){
		console.log(this.name);
	}
}
var p1=new Person('tony');
var p2=new Person('aimi');

我们可以看出要使用Person的新实例,就必须使用new。新实例的constructor(构造函数)属性指向的就是Person。

console.log(p1.constructor == Person);//true

同时使用instanceof检测对象的类型就更为可靠了,因为instanceof是用来专门比较一个对象是否为某个构造函数的实例:

console.log(p1 instanceof Object); // true
console.log(p1 instanceof Person); // true

这就是构造函数比工厂模式强的地方,因为它只道自己从哪里来,通过谁产生的。



利用工厂方法对构造函数模式代码的改进: 

当创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。  

var Person = (function () {
    var Person = function (name) {
        this.name = name;
        this.sayName=function(){
		console.log(this.name);
	}
    };
    return function (name) {
        return new Person(name);
    };
})();

var p1 = new Person("tony");


 

 

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/369

如何自动加载网站的深色模式?

现在有一种新的趋势 - 把东西变黑。过去,你必须决定你的网站的风格(亮或暗)或者必须保存用户自己定义的主题风格。Safari 12.1 ( macOS 10.14.4自带) 增加了对检测系统颜色主题的支持

前端需要了解的9种设计模式

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式

发布订阅和观察者模式的区别

有些人认为观察者模式就是发布订阅模式,实际上观察者模式是包含了订阅发布模式,发布订阅模式只是观察者模式中的一种。观察者模式是观察者和被观察者之间的通信,而发布订阅模式中间增加了一个中转层

前后端分离模式有什么意义

前后端分离从端口划分就是将浏览器、客户端分为前端,提供真实服务的软件就成为后端。从开发语言的角度划分后端的编程语言和前端的编程语言,例如Java是做后端真实数据服务的,JavaScript、HTML是做前端业务数据的展现与用户行为操作的

vue-router的hash 模式和 history 模式

url 中带有#的便是 hash 模式,#后面是 hash 值,它的变化会触发 hashchange 这个事件。通过这个事件我们就可以知道 hash 值发生了哪些变化。

Js设计模式之:单例模式

良好的设计模式可以显著提高代码的可读性,降低复杂度和维护成本。笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式

装饰者模式和TypeScript装饰器

学习的目的是对装饰者模式模式有进一步的理解,并运用在自己的项目中;对TypeScript装饰器的理解,更好的使用装饰器,例如在 nodejs web 框架中、 vue-property-decorator 中,或者是自定义装饰器,能熟练运用并掌握其基本的实现原理

JS 中的装饰器模式

使用过 mobx + mobx-react 的同学对于 ES 的新特性装饰器肯定不陌生。我在第一次使用装饰器的时候,我就对它爱不释手,书写起来简单优雅,太适合我这种爱装 X 且懒的同学了。

前端JavaScript设计模式

面向对象的三大特性:继承、封装、多态。JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承。JavaScript 也没有在语言层面提供对抽象类和接口的支持。

js中的策略模式

什么是策略模式,官方定义是:定义一些列算法,把他们封装起来,并且可以相互替换。说人话(⊙ˍ⊙):就是把看似毫无联系的代码提取封装、复用,使之更容易被理解和拓展。常见的用于一次if判断、switch枚举、数据字典等流程判断语句中

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广