javaScript中定义类或对象的五种方式总结


Posted in Javascript onDecember 04, 2016

第一种方式: 工厂方法

能创建并返回特定类型的对象的工厂函数(factory function)。

function createCar(sColor){ 
 var oTempCar = new Object; 
 oTempCar.color = sColor; 
 oTempCar.showColor = function (){ 
 alert(this.color); 
 }; 
 return oTempCar; 
 } 
 var oCar1 = createCar(); 
 var oCar2 = createCar();

调用此函数时,将创建新对象,并赋予它所有必要的属性。使用此方法将创建car对象的两个版本(oCar1和oCar2),他们的属性完全一样。

使用此方法存在的问题:

1语义上看起来不像使用带有构造函数的new运算符那么正规。

2使用这种方式必须创建对象的方法。每次调用createCar(),都要创建showColor(),意味着每个对象都有自己的showColor()版本,事实上,每个对象都共享了同一个函数。

有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法。从而避免这个问题:

function createCar(sColor){ 
var oTempCar = new Object; 
oTempCar.color = sColor; 
oTempCar.showColor = showColor; 
return oTempCar; 
} 
function showColor(){ 
alert(this.color); 
}

在这段重写的代码中,在函数createCar()前定义了函数showColor().在createCar()内部,赋予对象一个已经指向已经存在的showColor()函数的指针。从功能上来讲,这样解决了重复创建对象的问题,但该函数看起来不像对象的方法。

所有这些问题引发了开发者定义的构造函数的出现。

第二种方式:构造函数方式

function Car(sColor){ 
this.color = sColor; 
this.showColor = function (){ 
alert(this.color); 
}; 
} 
var oCar1 = new Car("red"); 
var oCar2 = new Car("blue");
你可能已经注意到第一个差别了,在构造函数内部无创建对象,而是使用this关键字。使用new运算符调用构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用return运算符)。

这种方式在管理函数方面与工厂方法一样都存在相同的问题。

第三种方式:原型方式

function Car(){ 
} 
Car.prototype.color = "blue"; 
var oCar1 = new Car(); 
var oCar2 = new Car();

调用new Car()时,原型的所有属性都被立即赋予要创建的对象,意味着所有的Car实例存放的都是指向showColor()函数的指针。从语义上看起来都属于一个对象,因此解决了前面两种方式存在的两个问题。此外使用该方法,还能用instanceof运算符检查给定变量指向的对象类型。因此,下面的代码将输出true:

alert(oCar instanceof Car); //outputs "true"

这个方式看起来很不错,遗憾的是,它并不尽如人意。

1首先这个构造函数没有参数。使用原型方式时,不能给构造函数传递参数初始化属性的值,因为car1和car2的属性都等于“red”。

2真正的问题出现在属性指向的是对象,而不是函数时。函数共享不会造成任何问题,但是对象却很少被多个实例共享的。

第四种方式:混合的构造函数/原型方式(推荐)

联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。

function Car(sColor){ 
this.color =sColor; 
this.drivers =new Array("Mike","Sue"); 
} 
Car.prototype.showColor = function(){ 
alert(this.color); 
} 
var oCar1 =new Car("red"); 
var oCar2 =new Car("blue"); 
oCar1.drivers.push("Matt"); 
alert(oCar1.drivers); //outputs "Mike,Sue,Matt" 
alert(oCar1.drivers); //outputs "Mike,Sue"

第五种方式:动态原型方式(推荐)

对于习惯使用其他语言的开发者来说,使用混合的构造函数/原型方式感觉不那么和谐。批评混合的构造函数/原型方式的人认为,在构造函数内找属性,在外部找方法的做法很不合理。所以他们设计了动态原型方式,以提供更友好的编码风格。

动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是使用动态原型方法重写的Car类:

function Car(sColor){ 
this.color =sColor; 
this.drivers =new Array("Mike","Sue"); 
if(typeof Car._initialized == "undefined"){ 
Car.prototype.showColor = function(){ 
alert(this.color); 
} 
} 
Car._initialized = true; 
}

以上这篇javaScript中定义类或对象的五种方式总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
json传值以及ajax接收详解
May 24 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
JS自定义右键菜单实现代码解析
Jul 16 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 #Javascript
JavaScript 中对象的深拷贝
Dec 04 #Javascript
详解JavaScript模块化开发
Dec 04 #Javascript
javascript 定时器工作原理分析
Dec 03 #Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 #Javascript
简单理解Vue条件渲染
Dec 03 #Javascript
学习vue.js条件渲染
Dec 03 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python编码爬坑指南(必看)
2016/06/10 Python
详解python3百度指数抓取实例
2016/12/12 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python web框架中实现原生分页
2019/09/08 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
电大会计学自我鉴定
2014/02/06 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
公司应聘自荐书
2014/06/14 职场文书
加强作风建设工作总结
2014/10/23 职场文书
python爬虫--selenium模块
2021/03/31 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技