javascript中this执行上下文的改变

分手后的思念是犯贱 2022-08-23 03:48 191阅读 0赞

this关键字引用的是包含它的函数作为某个对象的方法被调用时的那个对象。   
哈哈，。。  
  
先看案例 ：  
 先编写一个库  ：  
   (function()\{

if(!window.yc)\{

window\['yc'\]=\{\};

\}  
          
        function $()\{

var elements=new Array();

//查找作为参数提供的所有元素

for( var i=0;i<arguments.length;i++)\{

var element=arguments\[i\];

//如果这个元素是一个string,则表明这是一个id

if( typeof element=='string')\{

element=document.getElementById( element);

if( arguments.length==1)\{

return element;

elements.push( element );

return elements;

\};

window\['yc'\]\['$'\]=$;    
  
       function addEvent( node, type, listener)\{

if( !isCompatible() )\{ return false;\}

if( !(node=$(node)))\{  return false; \}

//W3C加事件的方法

if( node.addEventListener)\{

node.addEventListener( type, listener, false);

return true;

\}else if( node.attachEvent )\{

//MSIE的事件

node\['e'+type+listener\]=listener;

node\[type+listener\]=function()\{

node\['e'+type+listener\](window.event);

node.attachEvent('on'+type,node\[type+listener\] );

return true;

\};

window\['yc'\]\['addEvent'\]=addEvent;  
  
    function addLoadEvent( func)\{

//将现有的window.onload事件处理函数的值存入变量oldOnLoad

var oldOnLoad=window.onload;

//如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它.

if( typeof window.onload!='function')\{

window.οnlοad=func;

\}else\{

//如果在这个处理函数上已经绑定了一些函数，则将新函数追加到现有指令的尾部.

window.οnlοad=function()\{

oldOnLoad();

func();

window\['yc'\]\['addLoadEvent'\]=addLoadEvent;    
  
\})();   
  
  
先看案例一:  
  <script type="text/javascript" src="js/yc1.js"></script>

//案例一:

function changeColor()\{

//请注意这里的this? 因为当前  changeColor函数是作用window对象的一个方法存在的. ,所以函数中的this关键字将会解析为包含它的函数作用方法被调用时所属的对象.

alert(  '在这里this代表的就是window: '+ (window==this)  );  //true

yc.addLoadEvent( changeColor );  
</script>   
  
  
再看案例二:  
<div id="example">hello world</div>

//写一个函数用于改变页面元素的颜色

function changeColor2()\{

this.style.color='red';    //这时，this已经不是window，而是  example元素了.  
                alert(  '在这里this代表的就是window: '+ (window==this)  );  //true

yc.addLoadEvent(  function()\{

var example=yc.$("example");

example.click=changeColor2;

yc.addEvent(example,'mouseover',changeColor2 );

\} );  
</script>  
  
  
再上案例三:  
  
<a href="" class="popup">close</a>

功能描述: 点页面上的close 链接，出现确认对话框. 想输出 "确定离开本页面"提示语，但出现"undefined",请分析...,并提出解决方案

function doubleCheck()\{

this.message="确定离开本页面?";

doubleCheck.prototype.sayGoodBye=function()\{

return confirm(this.message);

function initPage()\{

var clickedLink=new doubleCheck();

var links=document.getElementsByTagName('a');

for( var i=0;i<links.length;i++)\{

//注意不要在clickedLink.sayGoodBye后面加()

yc.addEvent( links\[i\],'click',clickedLink.sayGoodBye);

yc.addEvent( window, 'load', initPage);  
  
  
  
针对案例三问题的解决方案 四:

function doubleCheck2()\{

this.message="确定离开本页面?";

doubleCheck2.prototype.sayGoodBye2=function()\{

return confirm(this.message);

function initPage2()\{

var clickedLink=new doubleCheck2();

var links=document.getElementsByTagName('a');

for( var i=0;i<links.length;i++)\{

yc.addEvent( links\[i\],'click',clickedLink.sayGoodBye2.apply( clickedLink));

//因为以上绑定事件后，sayGoodBye中的this的上下文就是每个a链接了，不再是 doubleCheck()函数，所以在a链接对象中是不是访问到  message的.

//解决方案：改变 sayGoodBye执行的上下文.  doubleCheck函数是在window环境中的，所以this.message中的this也是指的window, 所以要将sayGoodBye的执行上下文改为 window即可.

// 可以使用   函数.call(目标对象, 参数1, 参数2,...) 或 函数.apply(目标对象,参数数组)

yc.addEvent( window, 'load', initPage2);    
  
  
  
  
   最后将这个功能（ 改变一个函数的执行上下文环境）加入到库中  
  function bindFunction( obj, func)\{  
       return function()\{  
                func.apply(obj,arguments);  
      \};  
 \}  
window\['yc'\]\['bindFunction'\]= bindFunction;