详解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 相关文章推荐
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
js实现录音上传功能
Nov 22 Javascript
javascript实现搜索筛选功能实例代码
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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
实现前后端数据交互方法汇总
2015/04/07 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
JS获取当前地理位置的方法
2017/10/25 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python 8种必备的gui库
2020/08/27 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
给小学生的新年寄语
2014/04/04 职场文书
小学生演讲稿大全
2014/04/25 职场文书
论文诚信承诺书
2014/05/23 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
经费申请报告范文
2015/05/18 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript