phpstudy集成环境

 首页 > 这是一道js的笔试题 里面的this有点模糊，能给我说说原因吗

这是一道js的笔试题 里面的this有点模糊，能给我说说原因吗

<!DOCTYPE html >
<html >
<head>
<title> new document </title>

<meta charset="utf-8" />
</head>

<body>
<script>

var number=2;
var obj={
   number:4,
   /*匿名函数自调*/
   fn1:(function(){
           var number;
           this.number*=2;//4

           number=number*2;//NaN
           number=3;
           return function(){
                 var num=this.number;
                 this.number*=2;//6
                 console.log(num);
                 number*=3;//9
                 alert(number);
           }
    })(),

    db2:function(){
        this.number*=2;
    }
}

var fn1=obj.fn1;

alert(number);//4....

fn1();//9

obj.fn1();//27

alert(window.number);//8....

alert(obj.number);//8

</script>
</body>
</html>

//obj里面的那些值可以理解吧
var fn1=obj.fn1; //到这句的时候，你把它理解成 fn1跟obj.fn1指向通过地址，然后那个地址里面的内容，也就是下面这段
/*
(function(){
           var number;
           //this.number*=2;//4

           //number=number*2;//NaN
           number=3;
           return function(){
                 var num=this.number;
                 this.number*=2;//6
                 console.log(num);
                 number*=3;//9
                 alert(number);
           }
    })()
*/
这时候的执行环境是在window下面，因此这时候的this指向的是window，所以this.number 是2，上面那段代码的return  function 里面 this.number*=2 //4  改变了外面的number值，所以alert(number);//4....


/*
至于  fn1();//9
fn1执行的是返回的函数
return function(){
     var num=this.number;
     this.number*=2;//6
     console.log(num);
     number*=3;//9
     alert(number);
   }
这里由于作用域的原因，找到的是它外面那个函数定义的 number=3；所以输出了9，还就就是这里的this指向的是window，因此this.number  又*2=8（alert(window.number);//8....）；
*/


/*
obj.fn1();//27  这里在执行obj.fn1()的时候，this指向的是obj，上面obj的number 已经是  9了，这回又*3=27
*/

还是给你逐一解释吧。

var number=2;
var obj={
   number:4,
   fn1:(function(){ // 匿名函数1
           var number;
           this.number*=2;// (1)
           number=number*2;// (2)
           number=3;
           return function(){ // 匿名函数(2)
                 var num=this.number;
                 this.number*=2;
                 console.log(num);
                 number*=3;
                 alert(number);
           }
    })(),
    db2:function(){
        this.number*=2;
    }
}
var fn1=obj.fn1; // (3)
alert(number);// (4)
fn1();// (5)
obj.fn1();// (6)
alert(window.number);
alert(obj.number);
【热门文章】
【热门文章】