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基础资料整理3 正则
Dec 06 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
微信小程序保持session会话的方法
Mar 20 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
python转换摩斯密码示例
2014/02/16 Python
python中的五种异常处理机制介绍
2014/09/02 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
python与idea的集成的实现
2020/11/20 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
数字漫画:comiXology
2020/06/13 全球购物
故意杀人罪辩护词
2015/05/21 职场文书
2016年公司新年寄语
2015/08/17 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS