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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
Python内置函数dir详解
2015/04/14 Python
Python函数返回值实例分析
2015/06/08 Python
利用python发送和接收邮件
2016/09/27 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
PyQt5实现拖放功能
2018/04/25 Python
python实现三维拟合的方法
2018/12/29 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python类的动态绑定实现原理
2020/03/21 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
环境工程专业自荐信
2014/03/03 职场文书
白岩松演讲
2014/05/21 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
培训师岗位职责
2015/02/14 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang