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下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP 已经成熟
2006/12/04 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
10条php编程小技巧
2015/07/07 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
python获取元素在数组中索引号的方法
2015/07/15 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Python中的集合介绍
2019/01/28 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
python 写一个水果忍者游戏
2021/01/13 Python
python 高阶函数简单介绍
2021/02/19 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
大学自荐信
2013/12/12 职场文书
如何写自我鉴定
2014/03/19 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
关于python类SortedList详解
2021/09/04 Python