详解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中几种去掉字串左右空格的方法
Dec 25 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
轮播的简单实现方法
Jul 28 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 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
php4的彩蛋
2006/10/09 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
详解python statistics模块及函数用法
2019/10/27 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python3 re返回形式总结
2020/11/20 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
高二历史教学反思
2014/01/25 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
仓库管理计划书
2014/05/04 职场文书
安全责任书模板
2014/07/22 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书