javascript - js中 this的問題

Question

js小白 遇到的問題先上程式碼

var name = "John";

var myObject = function() {

    return {
        getName: function() {
            return this.name;
        }
    }
}();

alert(myObject.getName());

輸出的結果是undefined
我的問題是1. return裡面的getName的function是不是匿名函數我現在理解的是匿名函數那麼這個this應該就是指向全域吧？就是window 那為啥不輸出john 2.讓我更困惑的是，我在調試時候一步步走，走到this.name的時候，this指向的是Object 而當輸出完undefined的時候，我在監視那裡的this#變成了 window，this.name也變成了john，不太明白，求大蝦解救！

Answer 1

這個問題需要一步一步看，首先是myObject是一個對象，上面有個屬性是getName，值是一個匿名函數，alert(myObject.getName());，就是這個對像在呼叫這個方法，所有這個時候的this就是undefined。

//
var name = "John";

var myObject = function() {

    return {
        getName: function() {
            return this.name;
        }
    }
}();

var f = myObject.getName;

alert(f()); //John

// 这样就返回的是John,因为这个时候的getName是在全局执行的，this指向的就是window。

var name = "John";

var myObject = function() {

    return {
        getName: () => {
            return this.name;
        }
    }
}();

alert(myObject.getName()); //John

// 也可以通过es6修正this的指向

再次做下擴展，看下面的程式碼

    var object = {
        name: 'lucy',
        getName: function() {
            return function () {
                return this.name
            }
        }
    }
 console.log(object.getName()()) //John

object.getName(）方法回傳的是匿名函數，執行環境是全域作用域，this的指向基於函數的執行作用域所以是window，這時候window.name是John。
如果我們想回傳lucy，就需要透過建立一個箭頭函數或是閉包來實現。

var object = {
    name: 'lucy',
    getName: function() { console.log(this)
        return  () => {
            return this.name
        }
    }
}
 console.log(object.getName()()) //lucy
 
 var object = {
    name: 'lucy',
    getName: function() {
        var that = this;
        return function () {
            return that.name
        }
    }
}
 console.log(object.getName()()) //lucy

箭頭函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

至於你說的調試this指向改變問題，是因為匿名函數原本的作用域是window，但當執行的時候是myObject調用了它，所以this在那一刻指向了myObject。

Answer 2

var name = "John";

var myObject = function() {

    return {
        getName: function() {
            return this.name;
        }, 
        name: 'eczn'
    }
}();

myObject.getName(); 
// => 
// "eczn"

getName 的 this 指的是 myObject，因為 getName 直接是 myObject 所呼叫的，所以這裡的 this 指的是 ———— 一個指的是 ————那個

Answer 3

myObject.getName()
通常情況下誰呼叫了某個函數，這個函數中的this就指向誰啦