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 GTGrid 简单用户管理
Jul 01 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
JS常用算法实现代码
Nov 14 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
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中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
react-router实现按需加载
2017/05/09 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
python递归下载文件夹下所有文件
2019/08/31 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
Java基础类库面试题
2013/09/04 面试题
函授大专自我鉴定
2013/11/01 职场文书
公司前台辞职报告
2014/01/19 职场文书
安全责任书范本
2014/04/15 职场文书
公司捐款倡议书
2014/05/14 职场文书
新党章的学习心得体会
2014/11/07 职场文书
余世维讲座观后感
2015/06/11 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
js实现自动锁屏功能
2021/06/02 Javascript