详解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模板技术
Apr 27 Javascript
ext for eclipse插件安装方法
Apr 27 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
js类的继承定义与用法分析
Jun 21 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
Python读写ini文件的方法
2015/05/28 Python
使用python实现接口的方法
2017/07/07 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
运动会解说词100字
2014/01/31 职场文书
2014年科普工作总结
2014/12/06 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
Python中的pprint模块
2021/11/27 Python
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
Python开发五子棋小游戏
2022/04/28 Python