从面试题分析this

最新推荐文章于 2022-09-06 15:07:56 发布

Muscle_Mliu

最新推荐文章于 2022-09-06 15:07:56 发布

阅读量1.8k

点赞数

分类专栏：前端面试准备

本文链接：https://blog.csdn.net/liuzijiang1123/article/details/56481217

版权

本文通过一道面试题深入解析JavaScript中的this关键字，包括它的四种调用方式：普通函数调用、作为方法调用、作为构造函数调用以及使用apply/call/bind方法调用。通过实例分析了this的指向，并探讨了如何通过call、apply和bind改变this的指向。

摘要由CSDN通过智能技术生成

这几天工作贼忙~项目页面逻辑需要大的整改，一直忙到没时间看一些其他东西（回家倒头就想睡觉），好不容易抽了一个早上的时间，马上来学习一下this这个关键字。（毕竟这个是js中的基础中的基础，也是重难点）

OK废话不多说，还是老规矩，先上一个面试题，找了蛮久的，而且有个人的解释特别清晰（而且还涉及到了作用域和闭包），我就直接贴一下他的解释，然后自己再补充一点其他的知识点，扩展一下。

var number=2;
var obj={
   number:4,
   fn1:(function(){
           var number;
           this.number*=2;
           number=number*2;
           number=3;
           return function(){
                 var num=this.number;
                 this.number*=2;
                 console.log(num);
                 number*=3;
                 alert(number);
           }
    })(),

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

var fn1=obj.fn1;

alert(number);

fn1();
obj.fn1();
alert(window.number);
alert(obj.number);

大家有答案了么？

下面是别人的答案，十分的清晰，如果你对this有所了解的话，应该一下就能看明白，如果看不明白，也没关系，可以再看一下我后面的一些总结。

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，此时处于全局作用域内，因此上下文this是window。执行完语句(1)导致全局变量number的值变为4；执行语句(2)时临时变量number还没有被赋值，所以是NaN，但下一句会将其赋值为3；最后，匿名函数1返回了匿名函数2，因此obj.fn1=匿名函数2。（注意匿名函数2里面会用到临时变量n