详解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.extend函数扩展自己对象的js代码
Dec 09 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 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中的CMS的涵义
2007/03/11 PHP
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php 清除网页病毒的方法
2008/12/05 PHP
php命令行用法入门实例教程
2014/10/27 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
django云端留言板实例详解
2019/07/22 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python实现简单颜色识别程序
2020/02/19 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
php优化查询foreach代码实例讲解
2021/03/24 PHP
建筑设计专业求职自我评价
2014/03/02 职场文书
授权收款委托书范本
2014/10/10 职场文书
介绍长城的导游词
2015/01/30 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书