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

Question

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

Answer 1

结果是：

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的工作原理

Answer 2

问题是这个this，为题主提供个不错的说明，http://bonsaiden.github.io/JavaScript-Garden/zh/#function.this

Answer 3

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

Answer 4

可以看下我这篇JavaScript设计模式与开发实践 | 02 - this、call和apply，希望对你有帮助。

Answer 5

看完并看懂这个，javascript你就算真正入门啦You-Dont-Know-JS

Answer 6

JavaScript中的this

Answer 7

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

1. 方法调用模式

2. 函数调用模式

3. 构造器调用模式

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

MDN this

Answer 8

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);
}());