详解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 相关文章推荐
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
vue如何进行动画的封装
Sep 26 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
JavaScript流程控制(循环)
Dec 06 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
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python 显示数组全部元素的方法
2018/04/19 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
银行柜员应聘推荐信范文
2013/11/24 职场文书
销售主管竞聘书
2014/03/31 职场文书
机关会计岗位职责
2014/04/08 职场文书
情人节寄语大全
2014/04/11 职场文书
班级课外活动总结
2014/07/09 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Django中的JWT身份验证的实现
2021/05/07 Python