当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 中级笔记 第三章

Javascript
用Javascript实现锚点(Anchor)间平滑跳转
实现png图片和png背景透明(支持多浏览器)的方法
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
用DIV完美模拟createPopup 弹出窗口(修正版),支持Firefox,ie,chrome
JavaScript 中级笔记 第一章
IE与Firefox在JavaScript上的7个不同写法小结
MooTools 1.2介绍
Mootools 1.2教程(2) DOM选择器
Mootools 1.2教程(3) 数组使用简介
在IE下获取object(ActiveX)的Param的代码
ExtJS 配置和表格控件使用
javascript 缓冲效果实现代码 推荐
html数组字符串拼接的最快方法
JavaScript 浮动定位提示效果实现代码
类似CSDN图片切换效果脚本
javascript 面向对象编程 function也是类
javascript 面向对象编程 聊聊对象的事
javascript 面向对象编程 function是方法(函数)
[原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]
jQuery slider Content(左右控制移动)

Javascript 中的 JavaScript 中级笔记 第三章


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-10   浏览: 207 ::
收藏到网摘: n/a

接着(2)来讲。笔记(2)已经讲了引用和函数重载,接下来讲解作用域。 3,作用域
所有的面向对象的语言都有某种形式的作用域,JavaScript也不例外。在JavaScript里,作用域是由函数划分的,而不是由块(while,if之类的)来划分的。
我们先来看一个简单的作用域的例子。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

在if块中,虽然foo的值改为“b“,但还是在全局作用域中,所以输出结果是“b“。
基于浏览器的JavaScript语言有一门有趣的特性是,所有属于全局作用域的变量都是window对象的属性。
看下面代码:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

我们再上例的基础上,再添加一个函数来修改foo的值,代码如下:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

结果也许有点另你意外,不过结果肯定是正确的。代码②的结果是输出 "b",而不是"c"。原因就是作用域有关,虽然调用change()来改变foo的值,但是此时的改变只
在函数作用域内起作用,并不会改变全局作用域内的foo的值。
如果想在change()函数内修改全局的foo的值,我们可以去掉变量的声明,例如:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

在JavaScript中,如果变量没有显式定义,它就是全局定义的。所以调用change()后,会修改全局foo的值。最终输出"c" 。
4,上下文对象
在JavaScript中,代码总是有一个上下文对象,代码处于该对象之内。上下文对象是通过this变量来体现的。这个变量永远指向当前代码所处的对象中。
全局对象其实是window对象的属性。
接下来,我们看一个上下文对象的例子。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

再此基础上,我们再看一个例子:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

本例中,我们把obj.hide变量的上下文对象变为window对象时,代码写得并不好理解。幸运的是,JavaScript提供了一套更好的方法来解决。
现在我们有请call和apply两位先生上场,通过它们也可以完成同样的功能。先看call:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

通过obj.hide.call(window),我们将此时的上下文对象改为window对象。call方法的第一个参数就是上下文对象。
call方法也可以传递更多的参数,如下所示:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

另外apply方法跟call类型,它的第一个参数也是上下文对象,不过后面的参数则是一个数组。如下所示:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

最后我们来看一个通过上下文,call和apply结合的例子。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

在setBodyColor函数中,apply的第二个参数是数组,而前面我们讲过,arguments 也是一个伪数组,那么它们2个能联系起来吗?
把 changeColor.apply( document.body , ["blue"]); 改为 changeColor.apply( document.body , arguments );,
然后给setBodyColor();函数传参数。如下代码所示:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

通过这些例子,你也许对上下文的概念比较熟悉了。上下文在面向对象的编程中非常重要。