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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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扩展CURL的用法详解
2014/06/20 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python的面向对象思想分析
2015/01/14 Python
Python使用MONGODB入门实例
2015/05/11 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python中的Numpy矩阵操作
2018/08/12 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
浅谈Python中的字符串
2020/06/10 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
仓库理货员岗位职责
2013/12/18 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
实习单位指导教师评语
2014/12/30 职场文书
爱心捐款感谢信
2015/01/20 职场文书
2016公司新年问候语
2015/11/11 职场文书
golang 实现并发求和
2021/05/08 Golang
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL