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创建命名空间(namespace)的最简实现
Dec 11 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
详解jQuery中的easyui
Sep 02 jQuery
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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对数组排序的简单实例
2013/12/25 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
PHP实现文件上传与下载
2020/08/28 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
python django生成迁移文件的实例
2019/08/31 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
几款好用的python工具库(小结)
2020/10/20 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
大学军训感言1500字
2014/03/09 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
医德考评自我评价
2014/09/14 职场文书
运动会表扬稿
2015/01/16 职场文书
财产分割协议书
2016/03/22 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang