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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
原生js的数组除重复简单实例
May 24 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
很棒的vue弹窗组件
May 24 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 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
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
php调整服务器时间的方法
2015/04/03 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
jquery获取节点名称
2015/04/26 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
vue实现搜索功能
2019/05/28 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Python新手学习raise用法
2020/06/03 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
会计助理的岗位职责
2013/11/29 职场文书
员工年终演讲稿
2014/01/03 职场文书
安全演讲稿开场白
2014/08/25 职场文书
成本会计实训报告
2014/11/05 职场文书
2014年手术室工作总结
2014/11/26 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
现役军人家属慰问信
2015/03/24 职场文书
2015年化验员工作总结
2015/04/10 职场文书
python 对图片进行简单的处理
2021/06/23 Python
Pygame Rect区域位置的使用(图文)
2021/11/17 Python