js创建对象的几种常用方式小结(推荐)


Posted in Javascript onOctober 24, 2010

第一种模式:工厂方式

var lev=function(){ 
return "三水点靠木"; 
}; 
function Parent(){ 
var Child = new Object(); 
Child.name="脚本"; 
Child.age="4"; 
Child.lev=lev; 
return Child; 
}; 
var x = Parent(); 
alert(x.name); 
alert(x.lev());

说明:
1.在函数中定义对象,并定义对象的各种属性,,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法
2.引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象
3.在函数的最后返回该对象
4.不推荐使用这种方式创建对象,但应该了解
第二种模式:构造函数方式
var lev=function(){ 
return "三水点靠木"; 
}; 
function Parent(){ 
this.name="脚本"; 
this.age="30"; 
this.lev=lev; 
}; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev());

说明:
1.与工厂方式相比,使用构造函数方式创建对象,无需再函数内部重建创建对象,而使用this指代,并而函数无需明确return
2.同工厂模式一样,虽然属性的值可以为方法,扔建议将该方法定义在函数之外
3..同样的,不推荐使用这种方式创建对象,但仍需要了解
第三种模式:原型模式
var lev=function(){ 
return "三水点靠木"; 
}; 
function Parent(){ }; 
Parent.prototype.name="李小龙"; 
Parent.prototype.age="30"; 
Parent.prototype.lev=lev; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev());

说明:
1.函数中不对属性进行定义
2.利用prototype属性对属性进行定义
3.同样的,不推荐使用这样方式创建对象
第四种模式:混合的构造函数,原型方式(推荐)
function Parent(){ 
this.name="脚本"; 
this.age=4; 
}; 
Parent.prototype.lev=function(){ 
return this.name; 
};; 
var x =new Parent(); 
alert(x.lev());

说明:1.该模式是指混合搭配使用构造函数方式和原型方式
2.将所有属性不是方法的属性定义在函数中(构造函数方式)
将所有属性值为方法的属性利用prototype在函数之外定义(原型方式)
3.推荐使用这样方式创建对象,这样做有好处和为什么不单独使用构造函数方式和原型方式,由于篇幅问题这里不予讨论
第五种模式:动态原型方式
function Parent(){ 
this.name="脚本"; 
this.age=4; if(typeof Parent._lev=="undefined"){ 
Parent.prototype.lev=function(){ 
return this.name; 
} 
Parent._lev=true; 
} 
}; 
var x =new Parent(); 
alert(x.lev());

说明:
1.动态原型方式可以理解为混合构造函数,原型方式的一个特例
2.该模式中,属性为方法的属性直接在函数中进行了定义,但是因为
if(typeof Parent._lev=="undefined"){ Parent._lev=true;}

从而保证创建该对象的实例时,属性的方法不会被重复创建
3.,推荐使用这种模式
Javascript 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
node(koa2) web应用模块介绍详解
Mar 29 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
JavaScript arguments 多参传值函数
Oct 24 #Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 #Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 #Javascript
javascript textContent与innerText的异同分析
Oct 22 #Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 #Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 #Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 #Javascript
You might like
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python压缩和解压缩zip文件
2015/02/14 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
关于Django外键赋值问题详解
2017/08/13 Python
Django-migrate报错问题解决方案
2020/04/21 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
什么是servlet
2012/05/08 面试题
机械专业毕业生推荐信范文
2013/11/25 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
爱护花草树木的标语
2014/06/11 职场文书
海洋科学专业求职信
2014/08/10 职场文书
任命通知范文
2015/04/21 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
浅析MongoDB之安全认证
2021/06/26 MongoDB
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python