码迷,mamicode.com
首页 > Web开发 > 详细

js上下文

时间:2015-12-13 21:51:04      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

在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上下文

标签:

原文地址:http://www.cnblogs.com/zyfdeboke/p/5043620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!