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 相关文章推荐
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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.MVC的模板标签系统(二)
2006/09/05 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python利用tkinter实现屏保
2019/07/30 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
django 实现简单的插入视频
2020/04/07 Python
通俗讲解python 装饰器
2020/09/07 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
中学家长会邀请函
2014/01/17 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
分享几个实用的CSS代码块
2022/06/10 HTML / CSS