详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)


Posted in Javascript onJanuary 09, 2017

1.工厂模式

工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象。其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可。

function a(name){
 var b = new object();
 b.name = name;
 b.say = function(){
  alert(this.name);
 } 
  return b 
}

函数内部产生b对象并返回。 

2.构造函数模式

function Person(name, url) { //注意构造函数名第一个字母大写
 this.name = name;
 this.url = url;
 this.alertUrl = alertUrl;
}
 
function alertUrl() {
 alert(this.url);
}

因为每构造一个对象就会生成一个alertUrl方法,这样太浪费资源空间,所以把alertUrl这个方法写在全局以节省空间,但这样写就违背了面向对象编程的初衷,下面的原型模式就更好一些。

3.原型模式

我们创建的每个函数都有prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性及方法。

function Person(){ 
}

Person.prototype.name = "bill";
Person.prototype.address = "GuangZhou";
Person.sayName = function (){
  alert(this.name); 
}

var person1 = new Person();
var person2 = new Person();
 
//测试代码
alert(person1.name); // bill
alert(person2.name); // bill
person1.sayName(); //bill
person2.sayName(); //bill

person1.name = "666";

alert(person1.name); // 666
alert(person2.name); // bill
person1.sayName(); //666
person2.sayName(); //bill

我们创建的每个函数都有prototype(原型)属性,这个属性其实是一个指针,指向一个对象。

当构造一个person对象例如person1之后,它的默认name属性就是bill。如果要改name值的话就要对person1.name操作。这只是改了这个对象的name属性。alert(person1.prototype.name)依然是弹出bill,即原型上的name属性

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
webpack入门必知必会
Jan 16 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
基于jQuery实现滚动刷新效果
Jan 09 #Javascript
用jQuery实现优酷首页轮播图
Jan 09 #Javascript
AngularJS实现表单验证功能
Jan 09 #Javascript
AngularJS表单基本操作
Jan 09 #Javascript
AngularJS Controller作用域
Jan 09 #Javascript
详解JavaScript树结构
Jan 09 #Javascript
angular分页指令操作
Jan 09 #Javascript
You might like
杏林同学录(四)
2006/10/09 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
python文件操作相关知识点总结整理
2016/02/22 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
经贸韩语专业大学生职业规划
2014/02/14 职场文书
《观舞记》教学反思
2014/04/16 职场文书
体育课课后反思
2014/04/24 职场文书
小学领导班子对照材料
2014/08/23 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
任命书怎么写
2015/03/02 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android