js面试题目:结果是什么,并解释结果原因

function foo(){
    console.log(this.a);
}
function doFoo(fn){
    fn();
}
function doFoo2(o){
    o.foo();
}
var obj = {
    a: 2,
    foo: foo
};
var a = "I'm an a";
doFoo(obj.foo);
doFoo2(obj);

大体知道这是在考察 js this关键字的运行上下文的指向知识点, 可是类似这这方面的问题一直很懵懂,这次弄懂了差不多了, 下次见了又要分析的有点吃力, 这个应该怎样掌握扎实呢,5555

阅读 4k
8 个回答

结果是:

doFoo(obj.foo); //字符串"I'm an a"
doFoo2(obj); //2

doFoo(fn)函数的作用就是执行fn函数,相当于fn自执行,(fn(){})();
所以doFoo(obj.foo);相当于(foo(){console.log(this.a);})(); 此时的this指向全局对象,所以结果为"I'm an a";
doFoo2(obj);是对象的方法调用,this指向该对象,所以结果为2。

关于this的用法总结,推荐参考JavaScript秘密花园-this的工作原理

function foo(){
    console.log(this.a);
}
function doFoo(fn){
    fn();           // doFoo(obj.foo);  obj.foo 是 foo() 的引用
                    // 这里等于直接 foo(); 相当于 window.foo() 其内部的  this  ===  window
}
function doFoo2(o){
    o.foo();        // 理解上面了 就好理解这个.    o.foo()    this === o  
}
var obj = {
    a: 2,
    foo: foo
};
var a = "I'm an a";
doFoo(obj.foo);
doFoo2(obj);

所以输出

I'm an a
2

实际上你只要搞清楚 JS 的四种调用方式在this初始化上的差异就行了:

  1. 方法调用模式

  2. 函数调用模式

  3. 构造器调用模式

  4. apply/call/bind 调用模式
    也可以参考《JavaScript 语言精粹》第四章函数——4.3调用

MDN this

function foo(){
    console.log(this.a);
}
function doFoo(fn){
    fn();
}
function doFoo2(o){
    o.foo();
}
var obj = {
    a: 2,
    foo: foo
};
var a = "I'm an a";
doFoo(obj.foo);
doFoo2(obj);

在浏览器环境下,
1)如果代码加载script标签内内联的方式加载执行,结果为 I’m an a和2
2)如果通过script标签文件加载的方式,结果为 I’m an a和2
3)如果代码放在一个函数内容的话,结果为undefined和2
4)在nodejs环境下,结果为undefined和2
5)在nodejs的REPL环境下,结果为 I’m an a和2
3,4的情况如同

(function(){
    function foo(){
    console.log(this.a);
}
function doFoo(fn){
    fn();
}
function doFoo2(o){
    o.foo();
}
var obj = {
    a: 2,
    foo: foo
};
var a = "I'm an a";
doFoo(obj.foo);
doFoo2(obj);
}());
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏