javascript - js中 this的問題

問題描述

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，不太明白，求大蝦解救！

問題解答

這個問題需要一步一步看，首先是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。

var name = 'John';var myObject = function() { return {getName: function() { return this.name;}, name: ’eczn’ }}();myObject.getName(); // => // 'eczn'

getName 的 this 指的是 myObject，因為 getName 直接是 myObject 所調用的，所以這里的 this 指的是 ———— 調用函數的那個對象

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