详解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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
基于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
CURL状态码列表(详细)
2013/06/27 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
python使用mysql数据库示例代码
2017/05/21 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python 打印中文字符的三种方法
2018/08/14 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python构建指数平滑预测模型示例
2019/11/21 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
小学英语教学反思案例
2014/02/04 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
个人违纪检讨书
2014/09/15 职场文书
金秋助学感谢信
2015/01/21 职场文书