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基础 函数“重载” 详细介绍
Oct 25 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 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 的异常处理程序
2014/06/22 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
javascript内存管理详细解析
2013/11/11 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
wxPython学习之主框架实例
2014/09/28 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Python实现粒子群算法的示例
2021/02/14 Python
三个儿子教学反思
2014/02/03 职场文书
职位说明书范文
2014/05/07 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
机关作风建设整改方案
2014/10/27 职场文书
安装工程师岗位职责
2015/02/13 职场文书
停电调休通知
2015/04/16 职场文书
医德医风学习心得体会
2016/01/25 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
关于Vue中的options选项
2022/03/22 Vue.js
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers