详解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 相关文章推荐
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
JS用最简单的方法实现四舍五入
Aug 27 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使用qr生成二维码的示例分享
2014/01/20 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
简单实现PHP留言板功能
2016/12/21 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
python进行文件对比的方法
2018/12/24 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
教师实习自我鉴定
2013/12/18 职场文书
运动会跳远加油稿
2014/02/20 职场文书
专项资金申请报告
2015/05/15 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Django rest framework如何自定义用户表
2021/06/09 Python