详解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模拟多线程
Feb 07 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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 页面执行时间计算代码
2008/12/04 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
js 获取、清空input type="file"的值(示例代码)
2013/12/24 Javascript
javascript数组排序汇总
2015/07/07 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python调用java的Webservice示例
2014/03/10 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python匹配中文的正则表达式
2016/05/11 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
关于逃课的检讨书
2014/01/23 职场文书
致400米运动员广播稿
2014/02/07 职场文书
服务员岗位职责
2015/02/03 职场文书
入党自传范文2015
2015/06/26 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
python 实现德洛内三角剖分的操作
2021/04/22 Python
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python