this指向谁？面试中有没有遇到过

下面先上代码：

var a=10;
var foo={
    a:20,
    bar:function(){
        var a=30;
        return this.a;
    }
}
console.log(foo.bar(),(foo.bar)(),(foo.bar=foo.bar)(),(foo.bar,foo.bar)())

结果下面很多同学贴出的答案诸如：30 20 20 20，20 20 20 20等等，然而正确的答案是：20 20 10 10。
对于这个问题是怎么进行分析的呢？
我总结了一下，一句话解释：this总是指向的上一级对象（最后调用的）；通过new操作符生成的对象，this值指向的是该对象。现在通过不同的案例来说明这句话
1.this对象指向的上一级对象；

var obj={
    a:10,
    b:{
        a:20,
        bar:function(){
            return this.a;
        }
    }
}
console.log(obj.b.bar());
window.console.log(obj.b.bar());

//输出的都是20
此时this指向的是其上一级对象

var a=30;
var obj={
    a:10,  
    b:{
        a:20,
        bar:function(){
            return this.a;
        }
    }
}
var f=obj.b.bar;
console.log(f());

//输出的都是30
此时调用f的window,f()也就是window.f()的意思，造成这种原因就是最后调用this的是window而不是obj,所有输出的是window.a=30;

var M=function(){
  this.a=10;
  return 1
}
var obj=new M();
console.log(obj==.a)

返回的是10，但当将return的内容换成{}时候，输出的是undefined，换成其他的引用类型诸如数组，函数等等，返回的都是undefined；
当return的内容是诸如“string”、true、100等基本类型时，返回的是10;
特别的是当return的内容是null,undefined，返回的也是undefined
一般通过构造函数生成对象，不会在构造函数内部去使用return 语句，这里只是为了说明一下特例而已；构造函数创建对象，首先会建立一个空对象，然后使用apply方法使得构造函数里面的this值指向该对象；

var a=10;
var obj={
    a:20,
    bar:function(){
        return this.a;
    }
}
var f=obj.bar;
console.log(f());
console.log((obj.bar,obj.bar)())

这里返回的都是10，因为最后调用this的是window，f()其实是window.f()的简写，(obj.bar,obj.bar)是一个逗号表达式调用过程类似f()，所以返回的都是window.a

欢迎分享本文，转载请保留出处：前端ABC » this指向谁？面试中有没有遇到过