問(wèn)題描述

js小白 遇到的問(wèn)題先上代碼

var name = 'John';var myObject = function() { return {getName: function() { return this.name;} }}();alert(myObject.getName());

輸出的結(jié)果是undefined 我的問(wèn)題是1. return里面的getName的function是不是匿名函數(shù) 我現(xiàn)在理解的是匿名函數(shù) 那么這個(gè)this應(yīng)該就是指向全局吧？就是window 那為啥不輸出john 2.讓我更困惑的是，我在調(diào)試時(shí)候一步步走，走到this.name的時(shí)候，this指向的是Object 而當(dāng)輸出完undefined的時(shí)候，我在監(jiān)視那里的this變成了window，this.name也變成了john，不太明白，求大蝦解救！

問(wèn)題解答

這個(gè)問(wèn)題需要一步一步看，首先是myObject是一個(gè)對(duì)象，上面有個(gè)屬性是getName，值是一個(gè)匿名函數(shù)，alert(myObject.getName());，就是這個(gè)對(duì)象在調(diào)用這個(gè)方法，所有這個(gè)時(shí)候的this就是undefined。

//var name = 'John';var myObject = function() { return {getName: function() { return this.name;} }}();var f = myObject.getName;alert(f()); //John// 這樣就返回的是John,因?yàn)檫@個(gè)時(shí)候的getName是在全局執(zhí)行的，this指向的就是window。var name = 'John';var myObject = function() { return {getName: () => { return this.name;} }}();alert(myObject.getName()); //John// 也可以通過(guò)es6修正this的指向

再次做下擴(kuò)展，看下面的代碼

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

object.getName(）方法返回的是一個(gè)匿名函數(shù)，執(zhí)行環(huán)境是全局作用域，this的指向基于函數(shù)的執(zhí)行作用域所以是window，這個(gè)時(shí)候window.name是John。如果我們想返回lucy，就需要通過(guò)創(chuàng)建一個(gè)箭頭函數(shù)或者閉包來(lái)實(shí)現(xiàn)。

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

箭頭函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

至于你說(shuō)的調(diào)試this指向改變問(wèn)題，是因?yàn)槟涿瘮?shù)原本的作用域是window，但當(dāng)執(zhí)行的時(shí)候是myObject調(diào)用了它，所以this在那一刻指向了myObject。

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

getName 的 this 指的是 myObject，因?yàn)?getName 直接是 myObject 所調(diào)用的，所以這里的 this 指的是 ———— 調(diào)用函數(shù)的那個(gè)對(duì)象

myObject.getName()通常情況下誰(shuí)調(diào)用了某個(gè)函數(shù)，這個(gè)函數(shù)中的this就指向誰(shuí)啦