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中获取选中对象的类型
Apr 02 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 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
人族 TERRAN 概述
2020/03/14 星际争霸
php中的实现trim函数代码
2007/03/19 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
python实现简单文件读写函数
2021/02/25 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
do you have any Best Practice for testing
2016/06/04 面试题
大学社团活动策划书
2014/01/26 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers