一.摘要
本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节. 适合希望巩固javascript理论知识和基础知识的开发人员阅读.
二.前言
最近面试过一些人, 发现即使经验丰富的开发人员, 对于一些基础的理论和细节也常常会模糊. 写本文是因为就我自己而言第一次学习下面的内容时发现自己确实有所收获和感悟. 其实我们容易忽视的javascript的细节还有更多, 本文仅是冰山一角. 希望大家都能通过本文有所斩获.
三.Javascript面向对象
Javascript是一门面向对象的语言, 虽然很多书上都有讲解,但还是有很多初级开发者不了解.
创建对象
ps: 以前写过一篇详细的创建对象的文章(原型方法, 工厂方法等)但是找不到了, 回头如果还能找到我再添加进来.下面仅仅简单介绍.
在C#里我们使用new关键字创建对象, 在javascript中也可以使用new关键字:
var objectA = new Object();
但是实际上"new"可以省略:
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];
静态方法与实例方法
静态方法是指不需要声明类的实例就可以使用的方法.
实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法.
function staticClass() { }; //声明一个类
staticClass.staticMethod = function() { alert("static method") }; //创建一个静态方法
staticClass.prototype.instanceMethod = function() { "instance method" }; //创建一个实例方法
上面首先声明了一个类staticClass, 接着为其添加了一个静态方法staticMethod 和一个动态方法instanceMethod. 区别就在于添加动态方法要使用prototype原型属性.
对于静态方法可以直接调用:
staticClass.staticMethod();
但是动态方法不能直接调用:
staticClass.instanceMethod(); //语句错误, 无法运行.
需要首先实例化后才能调用:
var instance = new staticClass();//首先实例化
instance.instanceMethod(); //在实例上可以调用实例方法
四.全局对象是window属性
通常我们在<script>标签中声明一个全局变量, 这个变量可以供当前页面的任何方法使用:
<script type="text/javascript">
var objectA = new Object();
</script>然而我们还应该知道, 实际上全局变量objectA是创建在window对象上, 可以通过window对象访问到:
window.objectA
五.函数究竟是什么
我们都知道如何创建一个全局函数以及如何调用:
function myMethod()
{
alert("Hello!");
}
myMethod();
其实同全局对象一样, 使用function关键字创建的方法(也可以创建类)的名称, 实际上是为window对象创建了myMethod属性, 并且值是一个匿名方法, 上面的语句等同于:
window.myMethod = function()
{
alert("Hello!");
}无论使用哪种方式声明, 实际保存时都是使用函数名创建window对象的属性. 并且值只有函数体没有函数名称.
所以,下面三种声明方式是等效的:
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是start函数体内的变量, 通常我们理解count的作用于是在start()函数内, 在调用start()函数结束后应该也会消失.但是此示例的结果是count变量会一直存在,并且每次被加1:
因为count变量是setInterval中创建的匿名函数(就是包含count++的函数)的闭包的一部分!
再通俗的讲, 闭包首先就是函数本身, 比如上面这个匿名函数本身, 同时加上在这个函数运行时需要用到的count变量.
javascript中的闭包是隐式的创建的, 而不像其他支持闭包的语言那样需要显式创建. 我们在C#语言中很少碰到是因为C#中无法在方法中再次声明方法. 而在一个方法中调用另一个方法通常使用参数传递数据.
本文不再详细讲解闭包, 深入学习请参考下面的文章: http://www.felixwoo.com/archives/247
八.总结
分享到:
相关推荐
jquery2 novice to ninjia pdf 文档 新手到忍者是一种最佳实践jQuery的解决方案的编制,以满足具挑战性的JavaScript的问题。在这本问答式的jQuery书里,你会发现一个现成的解决方案,以帮助去到你的网页具有新鲜感。
2. **性能提升**:在2.x版本中,jQuery团队进行了大量的优化工作,使得库的运行速度比1.x系列更快,特别是在现代浏览器中。 3. **API变化**:一些不常用或者过时的方法在2.x版本中被移除,例如`$.browser`,鼓励...
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
2. **事件处理**:详述jQuery中的事件绑定与解绑,如click、mouseover等常见事件,以及如何使用事件委托来优化性能。同时,会讨论事件对象和自定义事件的使用。 3. **DOM操作**:详细解析jQuery中的DOM操作方法,如...
2.jQuery选择器 3.jQuery中的DOM操作 4.jQuery中的事件和动画 5.jQuery对表单、表格的操作及更多应用 6.jQuery与Ajax的应用 7.jQuery插件的使用和写法 8.用jQuery打造个性网站 9.jQuery Mobile 10.jQuery各个版本的...
- **jQuery 2.x系列**:从2.0.0开始,jQuery不再支持IE6/7,专注于现代浏览器,2.0.3是该系列的一个版本,提供了更小的文件大小和更快的速度。 3. **jQuery性能优化** - **文档就绪($(document).ready())**:...
### 2. jQuery 1.6至1.9的关键特性与改进 - **jQuery 1.6**: - 引入了`$.fn.jquery`来获取jQuery版本号。 - `attr()`和`prop()`方法分离,分别用于获取/设置属性和特性。 - **jQuery 1.7**: - 引入了事件代理...
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
"jquery-3.4.1_sangat1_jquery3.4.1"可能指的是一个特定的项目或者命名约定,"sangat1"可能是项目名或者是个人开发者的名字,而"jquery3.4.1"是jQuery库的另一种写法,它们都指向同一种资源——jQuery 3.4.1。...
2 Creating the wrapped element set 3 Bringing pages to life with jQuery 4 Events are where it happens 5 Sprucing up with animations and effects 6 jQuery utility functions 7 Extending jQuery with ...
2、jQuery优势 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。 很多大公司都在使用 jQuery, 例如: Google Microsoft IBM Netflix 3、jQuery安装 “jquery-1.10.2....
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
锋利的JQuery第二版
5. **jQuery2文档**:jquery2.doc可能是对jQuery 2.x版本的文档或教程,由于jQuery 2.x主要移除了对IE6/7的支持,适合现代浏览器环境的开发。 三、实战篇 6. **jQuery validate插件**:jQuery[1].validate.js+API...
2. **DOM操作**:`$(selector).html()`用于获取或设置元素的HTML内容,`$(selector).append()`和`.prepend()`可以向元素内部追加或预置内容,`$(selector).remove()`则可以删除匹配的元素。 3. **事件处理**:`$...
最完整的 jquery版本,包括 jquery1.10.1,jquery1.10.2,jquery1.11.0, jquery1.32, ...jquery2.0,jquery2.0.2,jquery2.0.3, (jQuery 2.x 不支持。 ) jquery2.1.0(jQuery 2.x 不支持。 )
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
**jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。在“jQuery例子大全 jQuery demo”这个压缩包中,包含了一系列的示例,旨在帮助用户快速...