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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
如何解决vue在ios微信"复制链接"功能问题
Mar 26 Javascript
js+canvas实现画板功能
Sep 13 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计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Python 中Operator模块的使用
2021/01/30 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
升国旗仪式主持词
2014/03/19 职场文书
企业指导教师评语
2014/04/28 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
解析MySQL binlog
2021/06/11 MySQL
一条 SQL 语句执行过程
2022/03/17 MySQL
Elasticsearch 索引操作和增删改查
2022/04/19 Python
PyTorch中permute的使用方法
2022/04/26 Python