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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
vue 数据操作相关总结
Dec 17 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 设计模式之观察者模式介绍
2012/02/22 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python文本数据相似度的度量
2018/03/12 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python开启debug模式的方法
2019/06/27 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python调用接口的4种方式代码实例
2019/11/19 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
毕业自荐信
2013/12/16 职场文书
婚礼主持词
2014/03/13 职场文书
村班子对照检查材料
2014/08/18 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
学校师德师风整改方案
2014/10/28 职场文书
论文答谢词
2015/01/20 职场文书
护士自荐信怎么写
2015/03/06 职场文书
工程主管竞聘书
2015/09/15 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技