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 相关文章推荐
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
Nov 16 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
vue+AI智能机器人回复功能实现
Jul 16 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中CI操作多个数据库的代码
2012/07/05 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
javascript中this指向详解
2016/04/23 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Python对象的属性访问过程详解
2020/03/05 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
小学作文评语大全
2014/04/21 职场文书
三万活动总结
2014/04/28 职场文书
政风行风整改方案
2014/10/25 职场文书
消防安全月活动总结
2015/05/08 职场文书
详解MySQL的半同步
2021/04/22 MySQL