js五种设计模式
1、js工厂模式
var lev=function(){
return "嘿哈";
};
function Parent(){
var Child = new object();
Child.name = "李小龙";
Child.age = "30";
Child.lev = lev;
return Child;
};
var x=Parent();
alert(x.name);
alert(x.lev());
说明:
- 在函数中定义对象,并定义对象的各种属性,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法。
- 引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new object(); 因为后者可能会出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象。
- 在函数的最后返回该对象。
- 不推荐使用这种方式创建对象,但应该了解。
2、js构造函数模式
var lev=function(){
return "嘿哈";
};
function Parent(){
this.name = "李小龙";
this.age = "30";
this.lev = lev;
};
var x=Parent();
alert(x.name);
alert(x.lev());
说明:
- 与工厂方式相比,使用构造函数方式创建对象无需在函数内部创建对象,而使用this指代,并而函数无需明确return。
- 同工厂模式一样,虽然属性的值可以为方法,仍建议将该方法定义在函数之外。
- 同样的,不推荐使用这种方式创建对象,但仍需了解。
3、js原型模式
var lev=function(){
return "嘿哈";
};
function Parent(){
Parent.prototype.name = "李小龙";
Parent.prototype.age = "30";
Parent.prototype.lev = lev;
};
var x=Parent();
alert(x.name);
alert(x.lev());
说明:
- 函数中不对属性进行定义。
- 利用prototype属性对属性进行定义。
- 同样的额,不推荐使用这样的方式创建对象。
4、构造函数+原型的js混合模式(推荐)
function Parent(){
this.name = "李小龙";
this.age = "30";
};
Parent.prototype.lev=function(){
return this.name;
}
var x=Parent();
alert(x.name);
alert(x.lev());
说明:
- 该模式是指混合搭配使用构造函数和原型方式。
- 将所有的属性,不是方法的定义在函数中(构造函数的方式),将所有属性值为方法的利用prototype在函数之外定义(原型方式)。
- 推荐使用这样的方式创建对象,这样有好处。
5、构造函数+原型的动态原型模式(推荐)
function Parent(){
this.name = "李小龙";
this.age = "30";
if(typeof Parent.lev == "undefined"){
Parent.prototype.lev = function(){
return this.name;
}
Parent.lev = true;
}
};
var x=Parent();
alert(x.lev());
说明:
- 动态原型方式可以理解为混合构造函数,原型方式的一个特例。
- 该模式中,属性为方法的属性直接在函数中进行了定义,但是因为
if(typeof Parent.lev == "undefined"){
Parent.prototype.lev = function(){
return this.name;
}
Parent.lev = true;
} 从而保证创建该对象的实例时,属性的方法不会被重复的创建。
js五种设计模式的更多相关文章
- js五种设计模式说明与示例
第一种模式:js工厂模式 var lev=function(){ return "啊打"; }; function Parent(){ ...
- JavaScript中常见的十五种设计模式
在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”. 在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}), ...
- PHP中常见的五种设计模式
设计模式只是为 Java架构师准备的 — 至少您可能一直这样认为.实际上,设计模式对于每个人都非常有用.如果这些工具不是 “架构太空人” 的专利,那么它们又是什么?为什么说它们在 PHP 应用程序中非 ...
- js 五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解
壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是 ...
- JS五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)
目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this ...
- PHP常用的 五种设计模式及应用场景
设计模式六大原则 开放封闭原则:一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 里氏替换原则:所有引用基类的地方必须能透明地使用其子类的对象. 依赖倒置原则:高层模块不应该依赖低层模块,二者 ...
- php常见五种设计模式
php面向对象基础知识 请点击查看 一.常见的设计模式主要有23种,根据使用目标的不同可以分为以下三大类:创建设计模式.结构设计模式.行为模式创建设计模式: (5种)用于创建对象时的设计模式.初始化对 ...
- js五种基本数据类型:string, number, boolean, null, undefined
/** * 五种基本数据类型:string, number, boolean, null, undefined */ // undefined // 声明变量foo,未声明变量bar var foo; ...
- 面试题:实现一个方法clone;可以对js五种数据类型进行值复制
//先来方法的代码function clone(obj) { var copy; switch(typeof obj){ case 'number': case 'string': case 'boo ...
随机推荐
- 微信小程序登录
一. 小程序不支持cookie会话 1. 通过传递与检验3rd_session来保持会话 2. 3rd_session可以执行'`head -n 80 /dev/urandom | tr -dc A- ...
- Spark编程进阶
1.累加器 通常在向Spark传递函数时,比如使用map()函数或者用filter()传条件是,可以使用驱动器程序中定义的变量,但是集群中运行的每个人物都会得到这些变量的一份新 ...
- 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等
纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...
- --@angularJS--指令与控制器之间较复杂的交互demo2
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>c ...
- Struts2拦截器介绍
一.拦截器简介 Struts拦截器和Action的关系如图: 为了在使用拦截器时制定参数值,应通过<interceptor-ref -/>元素添加<param -/>子元素来为 ...
- Java 英语
Open quote,左括弧 associated with,关联
- 【翻译】使用Visual Studio在Azure上部署Asp.Net Core Web应用
配置运行环境 Install the latest Azure SDK for Visual Studio. The SDK installs Visual Studio if you don't a ...
- spring mvc handler的三种方式
springmvc.xml 三种方式不能针对一个controller同时使用 <?xml version="1.0" encoding="UTF-8"?& ...
- Android离线缓存
android做到一定程度,需要考虑缓存的问题,不信可以掏出手机看看淘宝等一些app是否无网的情况下还可以浏览,不过大部分app并没有考虑到这些问题,解决Android的缓存有哪些方法呢 1.IO流读 ...
- 前端自动化构建工具-yoman浅谈
如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...