谈谈Js对象的那些事儿
2016-07-09 16:13
239 查看
今天,我们来谈谈关于JS对象的那些事儿。
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
对象包含了方法和属性,那有人会问方法和属性又是什么鬼?
其实方法和属性就是常见的函数和变量,只是在平常这些函数和变量是没有“主人的”,而当它们从属于一个主人(对象)后,我们就改称它们为方法与属性,只是名称发生了变化,而本质是没有变的。
知道了对象是什么后,那有人就会问了,在JS中怎样创建对象了,不要急,且听我慢慢道来!
创建一个对象的方法,大概可以分为以下的4种:
说明:
所谓原料,就是创建一个空白对象,Object就是Js为我们提供的一个空白对象;
所谓加工,就是我们给上面创建的空白对象添加各种属性和方法;
所谓出厂,就是我们将加工好的Object作为函数的返回值,以便我们通过函数的调用,来创建一个新的对象。
这种方法创建对象思路是一目了然,很好理解,但也有着其缺点:
1) 没有使用我们常见创建Object的new方法,总感觉少了点什么。。。(略微有点强迫症,呵呵。。。);
2) 函数重复,造成资源浪费。我们可以知道,test1和test2中均具有showInfo这一函数,实际上他们的功能一样,我们没有必要在每次创建新对象时,都创建它们。我们可以测试一下,它们是否是相等的: test1.showInfo==test2.showInfo,很明显不相等,因为它们属于不同的实例。
说明:在构造函数方式中,我们使用了new这一操作符,而使用这一操作符的前提就是将obj换成了this,而这里的this是什么,new又做了什么呢,我将上述代码改写成
可以看到,尽管我们解决了new的问题,但函数重复的问题还是没有解决;
说明:采用原型模式,看似解决了上述的所有问题,解决函数重复的问题,但还有问题就是属性不能通过传参直接修改,这不利于我们修改,因此我们最后会推荐一种混合模式来彻底解决这一问题。
具体而言,就是将属性放在构造函数中,方法则放在原型中,它们合起来就是整个原型对象中所含有的全部属性和方法。
以上就是,创建对象的几种常见方法。
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。
对象包含了方法和属性,那有人会问方法和属性又是什么鬼?
其实方法和属性就是常见的函数和变量,只是在平常这些函数和变量是没有“主人的”,而当它们从属于一个主人(对象)后,我们就改称它们为方法与属性,只是名称发生了变化,而本质是没有变的。
知道了对象是什么后,那有人就会问了,在JS中怎样创建对象了,不要急,且听我慢慢道来!
创建一个对象的方法,大概可以分为以下的4种:
1. 工厂模式
var createFn = function(name,email){ var obj = new Object(); //原料 obj.name = name; //加工 obj.email = email; obj.showInfo = function(){ alert('姓名:'+ obj.name +'\n邮箱:'+ obj.email); } return obj; //出厂 } var test1 = createFn('oxygen','iamyangqi@sina.com'); test1.showInfo(); var test2 = createFn('yq','iamyq@sina.com'); test2.showInfo();
说明:
所谓原料,就是创建一个空白对象,Object就是Js为我们提供的一个空白对象;
所谓加工,就是我们给上面创建的空白对象添加各种属性和方法;
所谓出厂,就是我们将加工好的Object作为函数的返回值,以便我们通过函数的调用,来创建一个新的对象。
这种方法创建对象思路是一目了然,很好理解,但也有着其缺点:
1) 没有使用我们常见创建Object的new方法,总感觉少了点什么。。。(略微有点强迫症,呵呵。。。);
2) 函数重复,造成资源浪费。我们可以知道,test1和test2中均具有showInfo这一函数,实际上他们的功能一样,我们没有必要在每次创建新对象时,都创建它们。我们可以测试一下,它们是否是相等的: test1.showInfo==test2.showInfo,很明显不相等,因为它们属于不同的实例。
2.构造函数方式
为了解决工厂模式中的第一个问题,即没有new操作符的问题,我们又提供一个新的方法:构造函数方式。var createFn = function(name,email){ this.name = name; this.email = email; this.showInfo = function(){ alert('姓名:'+ this.name +'\n邮箱:'+ this.email); } } var test1 = new createFn('oxygen','iamyangqi@sina.com'); test1.showInfo(); var test2 = new createFn('yq','iamyq@sina.com'); test2.showInfo();
说明:在构造函数方式中,我们使用了new这一操作符,而使用这一操作符的前提就是将obj换成了this,而这里的this是什么,new又做了什么呢,我将上述代码改写成
var createFn = function(name,email){ //this = new Object(); 使用new后,环境会自动将this隐式地指向一个新创的对象 this.name = name; this.email = email; this.showInfo = function(){ alert('姓名:'+ this.name +'\n邮箱:'+ this.email); } //return this; 最后再返回this对象给我们 }
可以看到,尽管我们解决了new的问题,但函数重复的问题还是没有解决;
3.原型模式
什么是原型?原型通俗地讲就是一个对象与生俱来的东西,就好比做蛋糕的模子,它只定义了一些基本的东西,例如形状,大小等等,但口味、颜色等东西,可以由我们自定义,具体的原型概念,我会在另一篇博文中介绍。使用原型,就是使用js对象的prototype这一属性。var createFn = function(){ } createFn.prototype.name = 'oxygen'; createFn.prototype.email = 'iamyangqi@sina.com'; createFn.prototype.showInfo = function(){ alert('姓名:'+ this.name +'\n邮箱:'+ this.email); }; var test1 = new createFn(); test1.showInfo();
说明:采用原型模式,看似解决了上述的所有问题,解决函数重复的问题,但还有问题就是属性不能通过传参直接修改,这不利于我们修改,因此我们最后会推荐一种混合模式来彻底解决这一问题。
4.混合模式
混合模式就是将构造函数模式和原型模式相结合的一种模式。var createFn = function(name,email){ this.name = name; this.email = email; } createFn.prototype.showInfo = function(){ alert('姓名:'+ this.name +'\n邮箱:'+ this.email); }; var test1 = new createFn('oxygen','iamyangqi@sina.com'); test1.showInfo(); var test2 = new createFn('yq','iamyq@sina.com'); test2.showInfo();
具体而言,就是将属性放在构造函数中,方法则放在原型中,它们合起来就是整个原型对象中所含有的全部属性和方法。
以上就是,创建对象的几种常见方法。
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 设计模式之创建型模式 - 特别的变量问题
- easyui------显示隐藏列功能
- js数组实现图片轮播
- 如何创建对象以及jQuery中创建对象的方式
- js可突破windows弹退效果代码
- PostgreSQL教程(三):表的继承和分区表详解
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- Lua面向对象之类和继承浅析
- js显示当前星期的起止日期的脚本
- 浅析Ruby中继承和消息的相关知识
- 详解C#编程中构造函数的使用
- 爆炸式的JS圆形浮动菜单特效代码
- 设计引导--一个鸭子游戏引发的设计理念(多态,继承,抽象,接口,策略者模式)
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码