怎么理解下面的this

IF进ELSE退
  • 1.1k
var getSingle = function(fn) {
            var result;
            return function() {
                return result || (result = fn.call(this));
                //这个fn.call(this)的this是指向哪,是不是看他是那里调用
                //指的就是createLoginLayer这个对象???
            }
        }
        var createLoginLayer = function() {
            var div = document.createElement("div");
            div.innerHTML = "我是登录浮窗";
            div.style.display = "none";
            document.body.appendChild(div);
            return div;
        }
        var createSingleLoginLayer = getSingle(createLoginLayer);
        document.getElementById("loginBtn").onclick = function() {
            var loginLayer = createSingleLoginLayer();
            loginLayer.style.display = "block";
        }
评论
阅读 2k
7 个回答

函数体内的这种this,归根结底就两句话,this的普通调用(函数调用)指向上下文(或者说全局),this的对象方法调用指向当前调用方法的该对象(call和apply除外)。
这里应该是前者,指向getSingle的上下文,也就是window或者global。

你这个createLoginLayer不是对象吧,this的值指的是调用上下文, 你在里面加个(console.log(this))试验下就知道了。

这里的话应该是全局对象window,你这里的getSingle()函数是作为嵌套函数来调用的(作为嵌套函数调用在非严格模式下this指向window,严格模式下undefined),如果被某个对象调用this指当前对象。

做个demo一目了然(我在你代码里加了个输出this,打开console看看就知道了):
demo

var getSingle = function(fn) {
            var result;
            return function() {
              console.log(this) //运行你的代码输出this为window
                return result || (result = fn.call(this));    
                }
        }

this对象在js中有挺多复杂情况的,有时确实搞不清,结合call,bind之类的方法体会多了就知道了。可以看下这里:
Understanding JavaScript Function Invocation and "this"

应该是全局对象

把代码展开有助于你的理解
getSingle执行后返回一个函数对象,我们假设为AA

function() {
    return result || (result = fn.call(this));
}

此时不能确定this到底指向哪个,函数还未被执行
赋值给createSingleLoginLayer变量并且在click回调中执行
也就是AA被执行,此时AA只作为一个函数被调用的,this就自然指向全局对象-window了

宣传栏