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

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


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


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

  1. 方法调用模式

  2. 函数调用模式

  3. 构造器调用模式

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

MDN this


问题是这个this,为题主提供个不错的说明,http://bonsaiden.github.io/JavaScript-Garden/zh/#function.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);
}());

JavaScript中的this


结果是:

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

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

【热门文章】
【热门文章】