详解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-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
vue如何批量引入组件、注册和使用详解
May 12 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
Prototype Template对象 学习
2009/07/19 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python实现抖音点赞功能
2019/04/07 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
酒店司机岗位职责
2013/12/14 职场文书
模特大赛策划方案
2014/05/28 职场文书
经销商年会策划方案
2014/05/29 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python