在JavaScript中,你的代码将总是有着某种形式的上下文(代码在其内部工作的
对象)。这也是其它面向对象语言所共有的功能,但它们都不如JavaScript处理得这样极端。上下文是通过变量this工作。变量this总是引用代
码当前所在的那个对象。记住全局对象实际上是window对象的属性。这意味着即使是在全局上下文里,this
变量仍然引用一个对象。上下文可以成为一个强大的工具,是面向对象代码不可或缺的一环。程序1展示了一些关于上下文的简单例子。
程序1. 在上下文中使用函数然后将其上下文切换到另一个变量的例子
代码
1
var
obj
=
{
2
yes:
function
(){
3
//
this == obj
4
this
.val
=
true
;
5
},
6
no:
function
(){
7
this
.val
=
false
;
8
}
9
};
10
//
我们看到,obj对象没有"val"的属性
11
alert( obj.val
==
null
);
12
//
我们运行yes函数,它将改变附着在obj 对象的val属性
13
obj.yes();
14
alert( obj.val
==
true
);
15
//
然而,我们现在让window.no指向obj.no方法,并运行之
16
window.no
=
obj.no;
17
window.no();
18
//
这导致obj对象保持不变(上下文则切换到了window对象),
19
alert( obj.val
==
true
);
20
//
而window的val属性被更新
21
alert( window.val
==
false
);
你
可能已经注意到,在程序1中,当我们切换obj.no方法的上下文到变量window时,笨重的代码需要切换函数的上下文。幸运的
是,JavaScript 提供了两种方法使这一过程变得更加易于理解和实现。程序2展示了恰能些目的的两种不同方法,call和apply。
程序2. 改变函数上下文的示例
代码
1
//
一个简单的设置其上下文的颜色风格的函数
2
function
changeColor( color ) {
3
this
.style.color
=
color;
4
}
5
//
在window对象上调用这个函数将会出错,因为window没有style对象
6
changeColor(
"
white
"
);
7
//
得到一个id为"main"的对象
8
var
main
=
document.getElementById(
"
main
"
);
9
//
用call方法改变它的颜色为黑
10
//
call方法将第一个参数设置为上下文,
11
//
并其它所有参数传递给函数
12
changeColor.call( main,
"
black
"
);
13
//
一个设置body元素的颜色的函数
14
function
setBodyColor() {
15
//
apply方法设置上下文为body元素
16
//
第一个参数为设置的上下文,
17
//
第二个参数是一个被作为参数传递给函数的数组
18
//
of arguments that gets passed to the function
19
changeColor.apply( document.body, arguments );
20
}
21
//
设置body元素的颜色为黑
22
setBodyColor(
"
black
"
);
分享到:
相关推荐
js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解js上下文理解
basicContext.js是一款功能强大的纯Js上下文菜单插件。该js上下文菜单插件可以制作左键菜单,右键菜单,可以自定义菜单的位置。它还可以和jquery结合使用,非常方便。
basicContext.js是一款功能强大的纯Js上下文菜单插件。该js上下文菜单插件可以制作左键菜单,右键菜单,可以自定义菜单的位置。它还可以和jquery结合使用,非常方便。
Javascript上下文菜单库-创建动态的右键单击或弹出菜单。 菜单 选项 isSticky 宽度 项目 菜单项 种类 子菜单 悬停菜单 分隔符 纽扣 自定义元素 多按钮(WIP) 选项 图标 cssIcon 标签 类型 onClick 捷径 子菜单 ...
可以使用HTML上下文菜单表示法来指定标记,也可以使用contextmenu对象提供的简单Javascript API构建DOM节点,并添加一些JavaScript以确保浏览器的兼容性。 API范例 var menu = contextmenu([ { label: "First ...
执行上下文(简称上下文)决定了Js执行过程中可以获取哪些变量、函数、数据,一段程序可能被分割成许多不同的上下文,每一个上下文都会绑定一个变量对象(variable object),它就像一个容器,用来存储当前上下文中...
Context.js 是一个用于 Web 的上下文菜单库,当然是用 JavaScript 编写的。 你可以试试这个。 安装 步骤1 将上下文文件夹复制到您的项目目录。 第2步 将 CSS 样式链接到您的 HTML 代码 < link rel =" ...
详细讲解javascript中执行上下文、函数堆栈、变量提升的原理,对代码解析运行过程有更深层的理解
具有FontAwesome支持的轻量级香草JavaScript上下文菜单库。 这个库是为在我的个人项目中使用而编写的,它是针对上下文菜单功能的AIO解决方案,我希望我只能分散在多个不同的上下文菜单库中。 这是很早的时候,我将...
Web应用程序的跨浏览器JavaScript上下文菜单控件。
详解JavaScript中的执行上下文及调用堆栈 目录 一、执行上下文是什么二、执行上下文栈是什么三、执行上下文栈的过程细节(一)创建阶段(二)执行阶段 一、执行上下文是什么 二、执行上下文栈是什么 三、执行...
作为一个前端开发人员,弄清楚JavaScript的执行上下文有助于我们理解js中一些晦涩的概念,比如闭包,作用域,变量提升等等。 执行栈 执行栈用于存储代码执行期间创建的所有执行上下文。具有FILO接口,也被称为调用...
basicContext.js是一款功能强大的纯Js上下文菜单插件。该js上下文菜单插件可以制作左键菜单,右键菜单,可以自定义菜单的位置。它还可以和jquery结合使用,非常方便。
JS鼠标右键上下文菜单配置插件是一款非常实用的纯JavaScript右键上下文菜单插件。
异步 相关异步资源之间共享的Node.js上下文