理解JavaScript的一些基本概念

理解JavaScript的一些基本概念

看JavaScript的时候，觉得有些东西怪怪的，和一般的编程语言还是有些差别，不太习惯一些写法，今天看了一篇文章，小有收获。(/article/4700576.html)

一、数据类型

任何一个JavaScript的标识、常量、变量和参数都只是unfined, null, bool, number, string, object 和 function类型中的一种，也就typeof返回值表明的类型。除此之外没有其他类型了。

object就是对象的类型。在JavaScript中不管多么复杂的数据和代码，都可以组织成object形式的对象。但JavaScript却没有 “类”的概念！

如下代码：

var
life
=
{};

for
(life.age
=

1
; life.age
<=

3
; life.age
++
)

{

switch
(life.age)

{

case

1
: life.body
=

"
卵细胞
"
;

life.say
=

function
(){alert(
this
.age
+
this
.body)};

break
;

case

2
: life.tail
=

"
尾巴
"
;

life.gill
=

"
腮
"
;

life.body
=

"
蝌蚪
"
;

life.say
=

function
(){alert(
this
.age
+
this
.body
+
"
-
"
+
this
.tail
+
"
,
"
+
this
.gill)};

break
;

case

3
:
delete
life.tail;

delete
life.gill;

life.legs
=

"
四条腿
"
;

life.lung
=

"
肺
"
;

life.body
=

"
青蛙
"
;

life.say
=

function
(){alert(
this
.age
+
this
.body
+
"
-
"
+
this
.legs
+
"
,
"
+
this
.lung)};

break
;

};

life.say();

};

对象不是固定的，可以动态的添加属性和方法。定义变量时也不需要指定变量的类型等信息，可以直接赋值任何类型。

二、函数

JavaScript的代码就只有function一种形式，function就是函数的类型。也许其他编程语言还有procedure或
method等代码概念，但在JavaScript里只有function一种形式。当我们写下一个函数的时候，只不过是建立了一个function类型
的实体而已。请看下面的程序：

function
myfunc()

{

alert(
"
hello
"
);

};

alert(
typeof
(myfunc));

这个代码运行之后可以看到typeof(myfunc)返回的是function。以上的函数写法我们称之为“定义式”的，如果我们将其改写成下面的“变量式”的，就更容易理解了：

var
myfunc
=

function
()

{

alert(
"
hello
"
);

};

alert(
typeof
(myfunc));

函数也是对象，可以为函数添加相应的属性和方法（函数）。

这些属性可以是简单类型，可以是对象，也可以是其他函数。也就是说，函数具有对象的全部特征，你完全可以把函数当对象来用。

看下面的代码：

function
Sing()

{

with
(arguments.callee)

alert(author
+

"
：
"

+
poem);

};

Sing.author
=

"
李白
"
;

Sing.poem
=

"
汉家秦地月，流影照明妃。一上玉关道，天涯去不归


"
;

Sing();

Sing.author
=

"
李战
"
;

Sing.poem
=

"
日出汉家天，月落阴山前。女儿琵琶怨，已唱三千年


"
;

Sing();

三、object

JavaScript里的函数和对象既有对象的特征也有数组的特征。这里的数组被称为“字典”，一种可以任意伸缩的名称值对儿的集合。其实，
object和function的内部实现就是一个字典结构，但这种字典结构却通过严谨而精巧的语法表现出了丰富的外观。可以在需要的时候，自由选择用对象还是数组来解释和处理问题。只要善于把握
JavaScript的这些奇妙特性，就可以编写出很多简洁而强大的代码来。

var
anObject
=
{};
//
一个对象

anObject.aProperty
=

"
Property of object
"
;
//
对象的一个属性

anObject.aMethod
=

function
(){alert(
"
Method of object
"
)};
//
对象的一个方法

//
主要看下面：

alert(anObject[
"
aProperty
"
]);
//
可以将对象当数组以属性名作为下标来访问属性

anObject[
"
aMethod
"
]();
//
可以将对象当数组以方法名作为下标来调用方法

for
(
var
s
in
anObject)
//
遍历对象的所有属性和方法进行迭代化处理

alert(s
+

"
is a
"

+

typeof
(anObject[s]));

同样对于function类型的对象也是一样：

var
aFunction
=
function() {};
//
一个函数

aFunction.aProperty
=

"
Property of function
"
;
//
函数的一个属性

aFunction.aMethod
=

function
(){alert(
"
Method of function
"
)};
//
函数的一个方法

//
主要看下面：

alert(aFunction[
"
aProperty
"
]);
//
可以将函数当数组以属性名作为下标来访问属性

aFunction[
"
aMethod
"
]();
//
可以将函数当数组以方法名作为下标来调用方法

for
(
var
s
in
aFunction)
//
遍历函数的所有属性和方法进行迭代化处理

alert(s
+

"
is a
"

+

typeof
(aFunction[s]));

四、“this”指针

JavaScript
中也有this，但这个this却与C++、C#或Java等语言的this不同。一般编程语言的this就是对象自己，而
JavaScript的this却并不一定！同一个函数可以从不同的角度来调用，this并不一定是函数本身所属的对象。this只是在任意对象和
function元素结合时的一个概念，是种结合比起一般对象语言的默认结合更加灵活，显得更加超然和洒脱。

看下面的代码：

function
WhoAmI()
//
定义一个函数WhoAmI

{

alert(
"
I'm
"

+

this
.name
+

"
of
"

+

typeof
(
this
));

};

WhoAmI();
//
此时是this当前这段代码的全局对象，在浏览器中就是window对象，其name属性为空字符串。输出：I'm of object

var
BillGates
=
{name:
"
Bill Gates
"
};

BillGates.WhoAmI
=
WhoAmI;
//
将函数WhoAmI作为BillGates的方法。

BillGates.WhoAmI();
//
此时的this是BillGates。输出：I'm Bill Gates of object

var
SteveJobs
=
{name:
"
Steve Jobs
"
};

SteveJobs.WhoAmI
=
WhoAmI;
//
将函数WhoAmI作为SteveJobs的方法。

SteveJobs.WhoAmI();
//
此时的this是SteveJobs。输出：I'm Steve Jobs of object

WhoAmI.call(BillGates);
//
直接将BillGates作为this，调用WhoAmI。输出：I'm Bill Gates of object

WhoAmI.call(SteveJobs);
//
直接将SteveJobs作为this，调用WhoAmI。输出：I'm Steve Jobs of object

BillGates.WhoAmI.call(SteveJobs);
//
将SteveJobs作为this，却调用BillGates的WhoAmI方法。输出：I'm Steve Jobs of object

SteveJobs.WhoAmI.call(BillGates);
//
将BillGates作为this，却调用SteveJobs的WhoAmI方法。输出：I'm Bill Gates of object

WhoAmI.WhoAmI
=
WhoAmI;
//
将WhoAmI函数设置为自身的方法。

WhoAmI.name
=

"
WhoAmI
"
;

WhoAmI.WhoAmI();
//
此时的this是WhoAmI函数自己。输出：I'm WhoAmI of function

({name:
"
nobody
"
, WhoAmI: WhoAmI}).WhoAmI();
//
临时创建一个匿名对象并设置属性后调用WhoAmI方法。输出：I'm nobody of object

五、JavaScript对象表示法（JavaScript Object Notation，JSON）

JSON的形式就是用大括“{}”号包括起来的项目列表，每一个项目间并用逗号“,”分隔，而项目就是用冒号“:”分隔的属性名和属性值。这是典型的字典
表示形式，也再次表明了 JavaScript里的对象就是字典结构。不管多么复杂的对象，都可以被一句JSON代码来创建并赋值。

创建一个没有任何属性的对象：

var
o
=
{};

创建一个对象并设置属性及初始值：

var
person
=
{name:
"
Angel
"
, age:
18
, married:
false
};

创建一个对象并设置属性和方法：

var
speaker
=
{text:
"
Hello World
"
, say:
function
(){alert(
this
.text)}};

创建一个更复杂的对象，嵌套其他对象和对象数组等：

var
company
=

{

name:
"
Microsoft
"
,

product:
"
softwares
"
,

chairman: {name:
"
Bill Gates
"
, age:
53
, Married:
true
},

employees: [{name:
"
Angel
"
, age:
26
, Married:
false
}, {name:
"
Hanson
"
, age:
32
, Marred:
true
}],

readme:
function
() {document.write(
this
.name
+

"
product
"

+

this
.product);}

};

除JSON外，在JavaScript中我们可以使用new操作符结合一个函数的形式来创建对象。例如：

function
MyFunc() {};
//
定义一个空函数

var
anObj
=

new
MyFunc();
//
使用new操作符，借助MyFun函数，就创建了一个对象

JavaScript的这种创建对象的方式可真有意思，如何去理解这种写法呢？

其实，可以把上面的代码改写成这种等价形式：

function
MyFunc(){};

var
anObj
=
{};
//
创建一个对象

MyFunc.call(anObj);
//
将anObj对象作为this指针调用MyFunc函数

我们就可以这样理解，JavaScript先用new操作符创建了一个对象，紧接着就将这个对象作为this参数调用了后面的函数。其实，JavaScript内部就是这么做的，而且任何函数都可以被这样调用！

六、prototype

prototype
源自法语，软件界的标准翻译为“原型”，代表事物的初始形态，也含有模型和样板的意义。
JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对
象，因此我们也可以给这个prototype对象添加任意的属性和方法。

在构造函数的prototype上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。也可以这么说，prototype提供了一群同类对象共享属性和方法的机制。

代码：

function
Person(name)

{

this
.name
=
name;
//
设置对象属性，每个对象各自一份属性数据

};

Person.prototype.SayHello
=

function
()
//
给Person函数的prototype添加SayHello方法。

{

alert(
"
Hello, I'm
"

+

this
.name);

}

var
BillGates
=

new
Person(
"
Bill Gates
"
);
//
创建BillGates对象

var
SteveJobs
=

new
Person(
"
Steve Jobs
"
);
//
创建SteveJobs对象

BillGates.SayHello();
//
通过BillGates对象直接调用到SayHello方法

SteveJobs.SayHello();
//
通过SteveJobs对象直接调用到SayHello方法

alert(BillGates.SayHello
==
SteveJobs.SayHello);
//
因为两个对象是共享prototype的SayHello，所以显示：true

可以随时给原型对象动态添加新的属性和方法，从而动态地扩展基类的功能特性。这在静态对象语言中是很难想象的。

代码：

function
Person(name)

{

this
.name
=
name;

};

Person.prototype.SayHello
=

function
()
//
建立对象前定义的方法

{

alert(
"
Hello, I'm
"

+

this
.name);

};

var
BillGates
=

new
Person(
"
Bill Gates
"
);
//
建立对象

BillGates.SayHello();

Person.prototype.Retire
=

function
()
//
建立对象后再动态扩展原型的方法

{

alert(
"
Poor
"

+

this
.name
+

"
, bye bye!
"
);

};

BillGates.Retire();
//
动态扩展的方法即可被先前建立的对象立即调用

事实上，如果在JavaScript内置的那些如Object和Function等函数的prototype上添加些新的方法和属性，就能扩展JavaScript的功能。

比如微软的ASP.NET AJAX，就给这些内置函数及其prototype添加了大量的新特性，从而增强了JavaScript的功能。

下面是一段摘自MicrosoftAjax.debug.js中的代码：

String.prototype.trim
=

function
String$trim() {

if
(arguments.length
!==

0
)
throw
Error.parameterCount();

return

this
.replace(
/
^/s+|/s+$
/
g,
''
);

}