JavaScript大杂烩5 - JavaScript对象的若干问题

1. 类型检查:instanceof与typeof

  这是两个相似的操作符,instanceof用于检测函数的实例类型,主要是在面向对象编程中检查new出来的对象类型,需要注意instanceof是检查function对象的,前面实现的复制继承中的例子就不适用于使用instanceof来检查继承关系了。typeof,它用于检测变量的类型,在实际情况中应用的不是很多,稍微了解一下就可以了。

  在使用typeof之前,有一点需要确认,那就是string与String不是同一个类型,这个不用多说了,我们前面说过了,前一个是类似于值类型的基元类型,后一个是类似于引用类型的其对应的包装类型,而且默认使用字面量定义的基本类型都是前一种,就是"值类型"。

  了解了这个,我们就可以测试如下代码了:


alert(typeof ‘Frank‘);        // string
alert(typeof 0); // number
alert(typeof true); // boolean
alert(typeof function(){}); // function
alert(typeof {}); // object
alert(typeof null); // object
alert(typeof undefined); // undefined

  上面是基本的用法,其实通常也不会有太多的人使用用,毕竟动态语言不是太关注静态的类型,而且typeof只会返回上面出现的6中类型,像String这种包装类型和Array这种内置的对象全部返回object,所以很多场合这个返回值没什么意义。

2.
对象的成员遍历:for..in,for与foreach

  对象遍历很简单,上面拷贝成员的时候,使用for..in操作符,遍历对象成员(注意会查找原型上的成员),然后拷贝出来。
  其实从上面对象字面量的定义方式来说,对象本质是键值对,就是常说的Map结构,是一种集合。
对于集合(内置常用有Object和Array这两个集合)的遍历,历来有这么几种方式:
1).
for循环
  这是预先可以知道长度的集合的推荐访问方式,Array这个超级集合的遍历属于这种方式,看个例子:

var names = [‘Dong‘, ‘Frank‘];
for(var i = 0, len = names.length; i < len; i++) {
alert(names[i]);
}

2). for/in循环

  这是预先无法知道长度的集合的访问方式,对象成员的遍历属于这种,看个例子:


var person = {
name: ‘Frank‘,
age: 10
};

for(item in person) {
if (person.hasOwnProperty(item)){
alert(person[item]);
}
}

  当然了预先知道长度的集合也可以使用这种方式遍历,但是JavaScript不推荐这么做,因为for..in会访问原型链上的东东。所以通常来说,我们只使用for..in遍历对象的成员,而使用for遍历Array集合。

3). 对象的forEach之类的方法 
  这是Array的内置方法,不多说了,简单看个例子:

[‘foo‘, ‘bar‘, ‘baz‘].forEach(function(element, index, array){ console.log(element, index, array); });

  这个方法很好很强大,我们经常用它。

3. hasOwnProperty

  JavaScript遍历对象有一个特点,这个上面也说到了,那就是遍历成员的时候,它会沿着对象本身和原型链来查找成员,所以很多时候需要知道一个成员是否是对象自身定义的,而不是原型链上带来的,这个时候就需要使用对象的方法hasOwnProperty了。

  hasOwnProperty是唯一的一个不会到原型链上查找的成员,它只会在对象本身检查是否包含某一个成员。体会下面两种遍历的区别:


// 注意,这里只是一个例子,实际编程中并不推荐修改内置的对象
Object.prototype.bar = 1;
// foo的原型指向Object的原型,形成原型链
var foo = {moo: 2};
for(var i in foo) {
alert(i); // 输出moo与bar
}

for(var i in foo) {
if (foo.hasOwnProperty(i)) {
alert(i); // 只输出moo
}
}

4. 对象的特殊用途

  对象是数据类型,而且是特殊的集合,这个特性使得我们可以使用对象模拟很多特殊的用途。
1).
作为Dictionary
  这个不用说了,因为对象的本质就是键值对,也就是key和value可以是任何类型的广义的Dictionary。当做Dictionary自然是很方便的:

var keyValueMap = {};
keyValueMap[‘key1‘] = { name: ‘Dong‘};
keyValueMap[‘key2‘] = { name: ‘Frank‘};

alert(keyValueMap[‘key1‘].name);
alert(keyValueMap[‘key2‘].name);

2). 作为enum

  键值对当然可以作为enum使用了,看个例子:


// 对象作为枚举来使用
var LanguageType = {
English: 0,
Chinese: 1
};

function showLanguage(languageType) {
// 枚举的黄金搭档:switch语句
switch(languageType) {
case LanguageType.English: {
alert(‘English‘);
break;
}
case LanguageType.Chinese: {
alert(‘Chinese‘);
break;
}
default:
break;
}
}

showLanguage(LanguageType.English);
showLanguage(LanguageType.Chinese);

3). 作为namespace

  基本上为了组织代码的方便,高级语言都提供了namespace这种结构,这个在JavaScript中也可以使用对象来模拟:


var application = application || {};
application.server = {
config: function() {
alert(‘server config‘);
}
};
application.server.config();

  当然还有另外一种使用自执行函数实现的namespace:


var namespace = (function () {

// 定义namespace下的私有成员
var privateMethod1 = function () { alert(‘M1‘); }
var privateMethod2 = function () { alert(‘M2‘); }
var privateProperty1 = ‘foobar‘;

return {
// 返回namespace中公开的成员
publicMethod1: privateMethod1,

//nested namespace with public properties
properties:{
publicProperty1: privateProperty1
},

// 嵌套的namespace
utils:{
publicMethod2: privateMethod2
}
//...
}
})();

namespace.publicMethod1();

  这些实现比较灵活,组织起来的代码也比较清晰,团队也较容易协作。

5. JSON是对象吗?

  要回答这个问题,我们需要先了解什么是JSON。
1). JSON的定义
  JSON( 全称为JavaScript Object
Notation)
是一种轻量级的数据交换格式。它是基于JavaScript语法标准的一个子集。它采用完全独立于语言的文本格式,可以很容易在各种网络、平台和程序之间传输。JSON的语法很简单,易于人阅读和编写,同时也易于机器解析和生成。
  通俗的讲:

a. JSON是一种字符串,其是语言中立的,任何语言都可以访问,读写这种字符串。
b. 书写这种字符串是需要一定规则的,这就是JSON的语法。
c. 把JSON字符串写到文本文件中,然后把这个文件的扩展名改成".json",就是通常的JSON文件,很多的程序可以直接读取这种文件,这种文件通常用于网络传输。

2). JSON语法
  JSON语法是JavaScript对象表示法语法的子集,所以就是如下几点:

a. 数据在名称/值对中:名称是字符串,使用双引号表示。值可以是:数字(整数或浮点数),字符串(在双引号中),数组(在方括号中),对象(在花括号中),true/false/null。
b. 数据由逗号分隔
c. 花括号保存对象:对象可以包含各种数据,包括数组。
d. 方括号保存数组:数组可以包含对象。

  例如:


{
"employees": [
{
"firstName": "Bill",
"lastName": "Gates"
},
{
"firstName": "George",
"lastName": "Bush"
}
]
}

  有一点需要注意,如果JSON中含有转义字符,则需要转义。例如文件路径中需要使用"\\"而不是"\"。例如:{
"file":"C:\\a.txt"}。

3). JSON vs.
JavaScript的对象字面量
  搞清楚了JSON的本质,这个比较就很简单了,JSON是一种文件格式,读出来的是字符串,只不过这些字符串是按照对象字面量的语法组织起来的。
4).
JSON vs.
Text
  JSON是文本格式,相对于以其他形式组织起来普通的文本来说,解析简单,很多语言都提供内建的类库方便编程,尤其是JavaScript,天生支持JSON的解析。
5).
JSON vs.
XML
  可读性的比较:JSON和XML的可读性相比较而言,由于XML提供很多辅助的标签,更加适合人阅读和理解。
  文件大小与传输难度的比较:XML允许使用方便的标签,所以文件尺寸是要比JSON大的。而且JSON源于JavaScript对象字面量的语法,所以天生的主战场是JavaScript与网络,在这里,JSON有着XML无法赶超的优势。
6).
JSON
Object
  在新的浏览器中,JavaScript确实内置了一个叫JSON的对象,这个对象的功能很简单,就是解析JSON字符串变成JavaScript的对象,和将JavaScript对象转变成JSON字符串,说白了,就是别的语言中序列化与反序列化的过程,简单看个例子:


var json_string = ‘{ "name": "frank" }‘;
// 将字符串反序列化成对象
var obj = JSON.parse(json_string);
alert(obj.name);
// 将对象序列化成JSON字符串
var json_string_copy = JSON.stringify(obj);
alert(json_string_copy);

JavaScript大杂烩5 - JavaScript对象的若干问题

时间: 2024-10-05 09:09:00

JavaScript大杂烩5 - JavaScript对象的若干问题的相关文章

JavaScript大杂烩6 - 理解JavaScript中的this

在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this). JavaScript中的this关键字通常只使用在函数中,它指向当前函数的调用者,这是this关键字的本质,所有的使用方式都是围绕这个展开的,让我们来看一下在各种性质的函数中this的用法.1. 在对象的函数中使用this var person = { name: 'Frank', say: f

JavaScript大杂烩13 - 总结ECMAScript 5新功能

虽说这个标准已经出来很久了,所有的主流浏览器的最新版本也都支持了这些特性,但是很多的教程中并没有包含这个部分,这一节我们专门来总结一下这个标准中的新功能. Object的新方法 在最新的JavaScript规范(ECMAScript 5)中,Object扩展了很多不错的静态方法,下面来简单看一下: 1. create/getPrototypeOf方法 - 干净的原型链 先说简单的getPrototypeOf方法,这个方法统一了获取对象原型的方式,使用这个对象可以获取到对象的原型,这个不多说了.

JavaScript大杂烩14 - 使用JQuery(上)

JQuery意义 - Why? 为什么要使用JQuery,从我个人来说,就是这么几点:简化代码 + 统一行为 + 功能强大 + 搭配方便. 简化代码是从写代码的角度来说的,实现同样的功能,如果用JavaScript内置对象和函数去完成的话,需要写很多代码,而使用JQuery这种类库却很简洁,下面的例子会体现出来. 统一行为是从浏览器的兼容性的角度来说的,实现一个行为,如果用JavaScript内置对象和函数去完成的话,需要处理很多的兼容性问题,这个在前面我们已经见识过了,使用JQuery这种类库

JavaScript大杂烩12 - 理解Ajax

AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下Web页面的申请过程,这个咱们在第一篇中就介绍过了:Web页面开发就是在无连接和无状态的HTTP协议上管理页面的状态.每次申请页面的时候,服务器都会返回完整的HTML文本(当然还有其他的文本文件),浏览器就负责解析这个文本并在浏览器中显示. 在这个过程中,不管当前页面的内容是不是都变化了,服务器都会

JavaScript大杂烩7 - 理解内置集合

JavaScript内置了很多对象,简单的类型如String,Number,Boolean (相应的"值类型"拥有相同的方法),复杂一点的如Function,Object,Array,它们支撑起来JavaScript编程的基石.由于Number与Boolean很简单,这里就不多说了,下面着重介绍其他的内置对象. 万物之源 - Object对象 JavaScript是单根的,唯一的根就是Object对象,这个对象提供了几个还是不错的方法,值得了解一下. 1. hasOwnProperty

JavaScript大杂烩8 - 理解文本解析的"黄金搭档"

文本解析"黄金搭档" - String与RegExp对象 文本解析是任何语言中最常用的功能,JavaScript中也是一样,而正则表达式作为最常用的方式,JavaScript也同样是支持的,下面就来看看字符串对象与正则表达式对象的配合. 字符串的恒定性 在正式开始讨论字符串对象的成员之前,我们需要了解一点,那就是:与C#一样,JavaScript 的字符串是不可变的(immutable),String对象定义的方法都不会改变字符串的内容.像toUpperCase这样的方法,返回的是全新

JavaScript大杂烩15 - 使用JQuery(下)

前面我们总结了使用各种selector拿到了jQuery对象了,下面就是对这个对象执行指定的行为了. 2. 操作对象 - 行为函数action 执行jQuery内置的行为函数的时候,JQuery自动遍历jQuery对象中包装的所有对象,依次在这些对象上执行指定的行为,直白的说,就是JQuery执行的是批量的操作,所以在JQuery中,默认情况下,是不需要强行的遍历包装对象,然后独自的执行指定的行为的.下面是常用的行为函数介绍. 1). 遍历jQuery对象 虽然执行jQuery内置的方法的时候不

JavaScript大杂烩16 - 推荐实践

JavaScript部分 1. 总是使用===来进行相等判断 原因:由于 == 和 != 操作符存在类型转换问题,而为了保持代码中数据类型的完整性,推荐使用全等 === 和不全等 !=== 操作符. 2. 总是使用";"来结束一条语句 原因:JavaScript允许不使用";"来结束语句,当没发现";"的时候,JavaScript会自己判断何时是语句结束了,这种不确定性大大的提高了出错的几率,所以请严格要求自己,使用";"结束

JavaScript大杂烩9 - 理解BOM

毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript不仅仅包含基本的语法规范.下面我们就重点看一下JavaScript在页面中干的那些事.总的来说,JavaScript在页面端就干两件事:操作DOM与操作BOM (当然了向Server获取数据也是它的工作,不过获取到数据后还是回来干这两件事,大家对JavaScript最直接的印象应该就是各种光怪陆离的