谈谈Js对象的那些事儿
来源:互联网 发布:php 获取当前服务器ip 编辑:程序博客网 时间:2024/06/06 13:11
今天,我们来谈谈关于JS对象的那些事儿。
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();
具体而言,就是将属性放在构造函数中,方法则放在原型中,它们合起来就是整个原型对象中所含有的全部属性和方法。
以上就是,创建对象的几种常见方法。
- 谈谈Js对象的那些事儿
- 谈谈Js继承的那些事儿
- 谈谈Js闭包的那些事儿
- 谈谈Js事件的那些事儿
- 谈谈Js回调函数的那些事儿
- JS那些事儿(4)-对象
- 谈谈软件开发的那些事儿 笔记
- 让我们谈谈虚拟机的那些事儿
- 谈谈主席树的那些事儿
- 谈谈加密那些事儿
- 谈谈网络命令那些事儿
- 谈谈有限域那些事儿
- 谈谈分布式缓存那些事儿
- 谈谈用例模型的那些事儿 之 用例图
- 谈谈用例模型的那些事儿 之 注意什么
- 谈谈领域模型的那些事儿 之 注意什么
- 谈谈分析模型的那些事儿 之 开始分析
- 谈谈分析模型的那些事儿 之 职责驱动设计
- 重写cell的frame,空隙处显示tableView背景色
- [Leetcode]110. Balanced Binary Tree
- CentOS 6.4下PXE+Kickstart无人值守安装操作系统
- C语言fstat()函数:由文件描述词取得文件状态
- [从头读历史] 第293节 神之物语 坦塔罗斯的后裔
- 谈谈Js对象的那些事儿
- 个人收藏的常用前端网站
- C语言文件操作详解
- xcode 导入另一个工程
- iOS 利用 Autolayout 实现 view 间隔自动调整
- Hello World
- lstat()
- hdfs 出现坏块
- Hadoop RPC