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指向谁?面试中有没有遇到过

赞 (1)
分享到:更多 ()

发表评论 0