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实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
javascript常用函数(1)
Nov 04 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 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执行速度全攻略(上)
2006/10/09 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
PHP循环结构实例讲解
2014/02/10 PHP
js获取单选按钮的数据
2006/11/27 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jQuery链使用指南
2015/01/20 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
原生js实现放大镜组件
2021/01/22 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python实现将文本转换成语音的方法
2015/05/28 Python
python链接Oracle数据库的方法
2015/06/28 Python
Python编程中的文件操作攻略
2015/10/16 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Python ORM编程基础示例
2020/02/02 Python
python 实现性别识别
2020/11/21 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
妈妈活动方案
2014/08/15 职场文书
实习生矿工检讨书
2014/10/13 职场文书
店铺转让协议书
2015/01/29 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书