详解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 毫秒转时间示例代码
Sep 22 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
详解JS函数重载
2014/12/04 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
自我鉴定书范文
2013/10/02 职场文书
《中华少年》教学反思
2014/02/15 职场文书
运动会方阵口号
2014/06/07 职场文书
应急管理培训方案
2014/06/12 职场文书
代办出身证明书
2014/10/21 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
redis 查看所有的key方式
2021/05/07 Redis
python 实现的截屏工具
2021/05/08 Python
整理Python中常用的conda命令操作
2021/06/15 Python
Flask response响应的具体使用
2021/07/15 Python
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers