详解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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
ie focus bug 解决方法
Sep 03 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 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中加session验证)
2012/08/22 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
javascript基本算法汇总
2016/03/09 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
python实现简单的TCP代理服务器
2014/10/08 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python字典的常用方法总结
2019/07/31 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
Python代码需要缩进吗
2020/07/01 Python
python中Mako库实例用法
2020/12/31 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技