javascript - 这是一道js的笔试题 里面的this有点模糊,能给我说说原因吗
巴扎黑
巴扎黑 2017-04-10 17:12:37
0
2
243

<!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>

巴扎黑
巴扎黑

全部回覆(2)
PHPzhong

还是给你逐一解释吧。

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);
  • 当定义obj的时候执行了匿名函数1,此时处于全局作用域内,因此上下文thiswindow。执行完语句(1)导致全局变量number的值变为4;执行语句(2)时临时变量number还没有被赋值,所以是NaN,但下一句会将其赋值为3;最后,匿名函数1返回了匿名函数2,因此obj.fn1=匿名函数2。(注意匿名函数2里面会用到临时变量number,老生常谈的闭包)

  • 来到语句(3),这句会把fn1这个变量赋值为obj.fn1,也就是匿名函数2

  • 由于全局变量number已经在语句(1)中变为了4,所以语句(4)弹出的对话框结果为4

  • 语句(5)执行的是fn1(),它与执行obj.fn1()的区别是两者this不一样。前者为null,而后者thisobj。但是又由于JS规定,thisnull时相当于全局对象window,所以这句代码执行时函数的thiswindow。在匿名函数2里会将全局变量number更新为8,同时将匿名函数1中被闭包的临时变量number更新为9

  • 语句(6)的效果在上面已经分析过了,thisobj,所以obj.number更新为8,闭包的number更新为27

黄舟
//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
*/
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板