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 相关文章推荐
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
jquery实现手风琴效果
Nov 20 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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 用sock技术发送邮件的函数
2007/07/21 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
基于PHP制作验证码
2016/10/12 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python global关键字的用法详解
2019/09/05 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
函授本科毕业自我鉴定
2013/10/09 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
房屋买卖协议样本
2014/11/16 职场文书
时尚女魔头观后感
2015/06/04 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android