详解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操作xml
Nov 04 Javascript
JQuery球队选择实例
May 18 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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下通过POST还是GET来传值
2008/06/05 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
js树形控件脚本代码
2008/07/24 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python获取txt文件词向量过程详解
2019/07/05 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
python中append函数用法讲解
2020/12/11 Python
python asyncio 协程库的使用
2021/01/21 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
经济与贸易专业应届生求职信
2013/11/19 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
公司合作协议书范本
2014/04/18 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
主持人开幕词
2015/01/29 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS