JavaScript 中的 this 指向

今天看到有些同学对this指向有疑问，总结了下。

首先，在普通函数中，this是指向调用此函数的对象。下面我们来看几个例子。

<button>按钮1</button>
<button>按钮2</button>

<script>
    let btns = document.getElementsByTagName('button')
    btns[0].onclick = function() {
        console.log(this === btns[0])
    }
    btns[1].addEventListener('click', function() {
        console.log(this === btns[1])
    })
</script>

//以下为控制台打印内容
true
true

可以看到，当我们点击这两个按钮时，返回的都是 true，这个相信大家都应该知道。那么我们看接下来的一个例子

<button onclick="pr()">按钮1</button>

<script>
function pr() {
    console.log(this)
}
</script>

//以下为控制台打印内容
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

当我们点击的时候，打印出来的是 Window 对象，这个pr函数通过上面的button点击调用，打印出来的不应该是button按钮吗？

其实这段代码我们可以这么理解

<button>按钮1</button>

<script>
function pr() {
    console.log(this)
}
document.querySelector('button').onclick = function() {
    pr()
}

这样子写的话，对打印出来的this是Window对象是不是就理解了呢？

看完了事件里面的this，我们再看一下另外的情况

<script>
let obj = {
    age: 18,
    say: function() {
        console.log(this.name)
    }
}
obj.say()
</script>

//以下为控制台打印内容
18

可以看到，打印出来的是  18 。这个相信大家没什么疑虑。

那我们给它变一变

<script>
let obj = {
    age: 18,
    say: function() {
        console.log(this.age)
    }
}
let fn = obj.say
fn()
</script>

//以下为控制台打印内容
undefined

这个就成了undefined，为什么呢？因为fn这个函数，也就是say这个函数，是window调用的。而window上时没有age这个属性的。

那我们再看一下箭头函数，箭头函数中的this是和调用者无关，指向的是定义箭头函数所在位置作用域的this

<button>按钮1</button>

<script>
document.querySelector('button').onclick = () => {
    let obj = {
        age: 18,
        say: () => {
            console.log(this)
        }
    }
    obj.say()
    
}
</script>

//以下为控制台打印内容
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

可以看到，打印出来的是Window对象。因为这两个都是箭头函数，所以this指向Window，没有问题。那我们修改下代码。

<button>按钮1</button>

<script>
document.querySelector('button').onclick = function() {
    let obj = {
        age: 18,
        say: () => {
            console.log(this)
        }
    }
    obj.say()
    
}
</script>

//以下为控制台打印内容
<button>按钮1</button>

可以看到，我们把上层的函数改为普通函数，this就指向调用对象了。

是不是很简单呢？