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 Event学习第五章 高级事件注册模型
Feb 07 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 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
isset和empty的区别
2007/01/15 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
Python代码的打包与发布详解
2014/07/30 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
通过代码实例了解Python异常本质
2020/09/16 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
五四青年节优秀演讲稿范文
2014/05/28 职场文书
研究生求职自荐书
2014/06/23 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
信息简报范文
2015/07/21 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android