详解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 getStyle获取最终样式函数代码
Apr 01 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
原生javascript实现分页效果
Apr 21 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
Vue header组件开发详解
Jan 26 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
Vue数字输入框组件使用方法详解
Feb 10 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格式文件打开的四种方法
2018/02/24 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
Track Image Loading效果代码分析
2007/08/13 Javascript
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
使用python装饰器验证配置文件示例
2014/02/24 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python3.5运算符操作实例详解
2019/04/25 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
《自然之道》教学反思
2014/02/11 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
体育口号大全
2014/06/18 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL