您的位置：首页 > Web前端 > JQuery

从零开始学习jQuery(剧场版) 你必须知道的javascript

2011-06-27 18:35 781 查看

一.摘要

本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节. 适合希望巩固javascript理论知识和基础知识的开发人员阅读.

二.前言

最
近面试过一些人, 发现即使经验丰富的开发人员, 对于一些基础的理论和细节也常常会模糊.
写本文是因为就我自己而言第一次学习下面的内容时发现自己确实有所收获和感悟. 其实我们容易忽视的javascript的细节还有更多,
本文仅是冰山一角. 希望大家都能通过本文有所斩获.

三.Javascript面向对象

Javascript是一门面向对象的语言, 虽然很多书上都有讲解,但还是有很多初级开发者不了解.

创建对象

ps: 以前写过一篇详细的创建对象的文章(原型方法, 工厂方法等)但是找不到了, 回头如果还能找到我再添加进来.下面仅仅简单介绍.

在C#里我们使用new关键字创建对象, 在javascript中也可以使用new关键字:

var
objectA = new
Object();

var
objectA = Object();

但是我建议为了保持语法一直, 总是带着new关键字声明一个对象.

创建属性并赋值

在javascript中属性不需要声明, 在赋值时即自动创建:

objectA.name = "my name"
;

访问属性

一般我们使用"."来分层次的访问对象的属性:

alert(objectA.name);

嵌套属性

对象的属性同样可以是任何javascript对象:

var
objectB = objectA;

objectB.other = objectA;
//此时下面三个值相当, 并且改变其中任何一个值其余两个值都改变

objectA.name;

objectB.name;

objectB.other.name;

使用索引

如果objectA上有一个属性名称为"school.college", 那么我们没法通过"."访问,因为"objectA.school.college"语句是指寻找objectA的school属性对象的college属性.

这种情况我们需要通过索引设置和访问属性:

objectA["school.college"
] = "BITI"
;

alert(objectA["school.college"
]);

objectA["school.college"
] = "BITI"
;
var
key = "school.college"

alert(objectA["school.college"
]);

alert(objectA["school"
+ "."
+ "college"
]);

alert(objectA[key]);

JSON 格式语法

JSON是指Javascript Object Notation, 即Javascript对象表示法.

我们可以用下面的语句声明一个对象,同时创建属性:

//JSON

var
objectA = {

name: "myName"
,

age: 19,

school:

{

college: "大学"
,
"high school"
: "高中"

},

like:["睡觉"
,"C#"
,"还是睡觉"
]

}

JSON的语法格式是使用"{"和"}"表示一个对象, 使用"属性名称:值"的格式来创建属性, 多个属性用","隔开.

上例中school属性又是一个对象. like属性是一个数组. 使用JSON格式的字符串创建完对象后, 就可以用"."或者索引的形式访问属性:

objectA.school["high school"
];

objectA.like[1];

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }

静态方法与实例方法

静态方法是指不需要声明类的实例就可以使用的方法.

实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法.

function
staticClass() { }; //声明一个类

staticClass.staticMethod = function
() { alert("static method"
) }; //创建一个静态方法

staticClass.prototype.instanceMethod = function
() { "instance method"
}; //创建一个实例方法

staticClass.staticMethod();

staticClass.instanceMethod(); //语句错误, 无法运行.

var
instance = new
staticClass();//首先实例化

instance.instanceMethod(); //在实例上可以调用实例方法

四.全局对象是window属性

通常我们在<script>标签中声明一个全局变量, 这个变量可以供当前页面的任何方法使用:

    <
script
type
="text/javascript"
>

var
objectA = new
Object();
</
script
>

window.objectA

五.函数究竟是什么

我们都知道如何创建一个全局函数以及如何调用:

function
myMethod()

{

alert("Hello!"
);

}

myMethod();

window.myMethod = function
()

{

alert("Hello!"
);

}

function
myMethod()

{

alert("Hello!"
);

}

window.myMethod = function
()

{

alert("Hello!"
);

}

myMethod = function
()

{

alert("Hello!"
);

}

六."this"究竟是什么

在C#中,this变量通常指类的当前实例. 在javascript则不同, javascript中的"this"是函数上下文,不是由声明决定,而是由如何调用决定.
因为全局函数其实就是window的属性, 所以在顶层调用全局函数时的this是指window对象.

下面的例子可以很好的说明这一切:

var
o1 = { name: "o1 name"
};

window.name = "window name"
;

function
showName()

{

alert(this
.name);

}

o1.show = showName;

window.show = showName;

showName();

o1.show();

window.show();

结果证明在顶层调用函数和使用window对象调用函数时, this都指向window对象. 而在对象中调用函数时this指向当前对象.

七.javascript中的闭包

闭包的概念比较难以理解, 先看闭包的定义:

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

简单表达:

闭包就是function实例以及执行function实例时来自环境的变量.

先看下面的例子:

<!
DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>

<
html
xmlns
="http://www.w3.org/1999/xhtml"
>

<
head
>

<
title
></
title
>

</
head
>

<
body
>

<
div
id
="divResult"
></
div
>

<
script
type
="text/javascript"
>

function
start()

{
var
count = 0;

window.setInterval(function
()

{

document.getElementById("divResult"
).innerHTML += count + "<br/>"
;

count++;

}, 3000);

};

start();
</
script
>

</
body
>

</
html
>

因为count变量是setInterval中创建的匿名函数(就是包含count++的函数)的闭包的一部分!

再通俗的讲, 闭包首先就是函数本身, 比如上面这个匿名函数本身, 同时加上在这个函数运行时需要用到的count变量.

javascript中的闭包是隐式的创建的, 而不像其他支持闭包的语言那样需要显式创建. 我们在C#语言中很少碰到是因为C#中无法在方法中再次声明方法. 而在一个方法中调用另一个方法通常使用参数传递数据.

本文不再详细讲解闭包, 深入学习请参考下面的文章: http://www.felixwoo.com/archives/247

八.总结

[剧终]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript jquery function object json c#

相关文章推荐

新的分享

章节导航