<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>Document</title>
</head>
<body>
? <!-- 普通函数的this指向window -->
? <script>
? ? let arr1 = [1, 2]
? ? let arr2 = arr1.splice(0, 1)
? ? function fn1(par1) {
? ? ? console.log(this, '普通函数的this指向');
? ? }
? ? fn1()
? ? // 对象的方法中this指向对象本身
? ? let obj = {
? ? ? a: 12,
? ? ? fn2: function () {
? ? ? ? console.log(this, '对象中普通函数this指向')
? ? ? }
? ? }
? ? obj.fn2()
? ? // 构造函数的this指向新创建的对象
? ? function Fn3() {
? ? ? this.a = 12
? ? ? console.log(this, '构造函数this指向')
? ? }
? ? let obj3 = new Fn3()
? ? let obj3_copy = new Fn3()
? ? // 箭头函数的this指向定义时所在的对象
? ? let obj4 = {
? ? ? a: 12,
? ? ? fn5: function () {
? ? ? ? console.log(this)
? ? ? }
? ? }
? ? obj4.fn5()
? ? // 改变普通函数的this指向的方法
? ? // 在函数定义时，使用call方法，apply方法，bind方法改变this指向
? ? obj4.fn5.call(window) //call方法 ?
? ? obj4.fn5.apply(window) ?//apply方法
? ? obj4.fn5.bind(window)() ? //bind方法
? ? // 箭头函数的this指向定义时所在的对象
? ? let obj6 = {
? ? ? a: 12,
? ? ? fn7: () => {
? ? ? ? console.log(this)
? ? ? }
? ? }
? ? obj6.fn7() //一般的写法
? ? var fn8 = () => {
? ? ? console.log(this)
? ? }
? ? fn8()
? ? // 使用function定义的函数，this的指向随着调用环境的变化而变化，而箭头函数中的this指向是固定不变的，一直指向定义函数的环境。
? </script>
</body>
</html>