javascript学习笔记(九) js对象 设计模式


Posted in Javascript onJune 19, 2012

1.创建对象

var person = new Object(); 
person.name = "RuiLiang"; 
person.age = 30; 
person.job = "Teacher"; 
person.sayName = function () { 
alert(this.name); 
}; person.sayName();

2.工厂模式
缺点:不能识别对象
function createPerson(name,age,job) { 
var o = new Object(); 
o.name = name; 
o.age = age; 
o.job = job; 
o.sayName = function () { 
alert(this.name); 
}; 
return o; 
} 
var person1 = createPerson("阿亮",30,"教师"); 
var person2 = createPerson("俊俊",24,"待业"); 
person1.sayName(); //"阿亮" 
person2.sayName(); //“俊俊”

3.构造函数模式
缺点:缺少封装性
function Person(name,age,job) { 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = sayName; 
} 
function sayName() { 
alert(this.name); 
} var person1 = new Person("阿亮",30,"教师"); 
var person2 = new Person("俊俊",24,"待业"); 
person1.sayName(); 
person2.sayName();

4.原型模式
缺点:所有属性被实例共享
function Person() { 
} Person.prototype.name = "ALiang"; 
Person.prototype.age = 30; 
Person.prototype.job = "Teacher"; 
Person.sayName = function () { 
alert(this.name); 
}

hasOwnProperty()方法检测某一属性是不是实例属性,如果是返回 true

person1.hasOwnProperty("name"); //name是不是person1的属性
in 操作符:通过对象访问的属性是否存在,若存在返回 true,不管属性存在实例中还是原型中

alert("name" in person1); //name属性若存在返回 true
确定属性在原型中还是对象中的方法:

function hasPrototypeProperty(object,name) { 
return !object.hasOwnProperty(name) && (name in object); 
} 
//用法 
var person = new Person(); 
alert(hasPrototypeProperty(person,"name")); //true 
person.name = "Grey"; //改变原型中name的值 
alert(hasPrototypeProperty(person,"name")); //false

isPrototypeOf()方法是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false。
格式如下:
object1.isPrototypeOf(object2);
object1是一个对象的实例;
object2是另一个将要检查其原型链的对象。
原型链可以用来在同一个对象类型的不同实例之间共享功能。
如果 object2 的原型链中包含object1,那么 isPrototypeOf 方法返回 true。
如果 object2 不是一个对象或者 object1 没有出现在 object2 中的原型链中,isPrototypeOf 方法将返回 false。
//字面量重写原型对象 
function Person(){ 
} Person.prototype = { 
constructor : Person, 
name : "ALiang", 
age : 30, 
job : "Teacher", 
sayName : function() { 
alert(this.name); 
} 
};

5.构造函数和原型混合模式
具有构造函数模式和原型模式的优点,属性用构造函数模式,方法用原型模式 //这种模式使用最广泛
function Person(name,age,job) { 
this.name = name; 
this.age = age; 
this.job = job; 
this.friends = ["xuyun","wuxueming"]; 
} 
Person.prototype = { 
constructor : Person, 
sayName : function() { 
alert(this.name); 
} 
}; var person1 = new Person("ALiang",30,"Teacher"); 
var person2 = new Person("ZuNan",26,"Teacher"); 
person1.friends.push("JunJun"); 
alert(person1.friends); //"xuyun","wuxueming","JunJun" 
alert(person2.friends); //"xuyun","wuxueming"

6.动态原型模式
function Person(name,age,job) { 
this.name = name; 
this.age = age; 
this.job = job; if (typeof this.sayName != "function"){ //这里的sayName可以是任何初始化后存在的方法或属性 
Person.prototype.sayName = function() { //不能用字面量形式 
alert(this.name); 
}; 
}

7.寄生构造函数模式
8.稳妥构造函数模式
Javascript 相关文章推荐
javascript new fun的执行过程
Aug 05 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
javascript学习笔记(八) js内置对象
Jun 19 #Javascript
javascript学习笔记(七) js函数介绍
Jun 19 #Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 #Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 #Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 #Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 #Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 #Javascript
You might like
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
用python批量移动文件
2021/01/14 Python
Python实现京东抢秒杀功能
2021/01/25 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
初中高效课堂实施方案
2014/02/26 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
工作年限证明模板
2014/11/01 职场文书
高二语文教学反思
2016/02/16 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript