一篇文章帮你搞定this指向

this 指向

原文链接：https://note.noxussj.top/?source=sifo

this 指向分为两种情况，一种是普通函数中使用的 this，另外一种是箭头函数中的 this。

普通函数

this 指向调用者。

场景 1

    function sayHi() {
        console.log(this)
    }

    sayHi() // window

这里的 this 指向 window，因为 sayHi 的调用者是 window，可是我没有看见有 window 啊，我们要知道 window 一般都是可以省略不写的，同等于 window.sayHi()。

场景 2

    const person = {
        sayHi: function () {
            console.log(this)
        }
    }

    person.sayHi() // person

这里的 this 指向 person，sayHi 是谁调用了？ 很明显一看就知道是 person 。

场景 3

    const person = {
        sayHi: function () {
            console.log(this)
        }
    }
    
    const xiaoming = person.sayHi
    
    xiaoming() // window

这里的 this 指向 window，首先是 person.sayHi 赋值给了 xiaoming，这个时候是还没调用的。那么 xiaoming 就是一个函数了，最后我们执行 window.xiaoming() ，调用者就是 window。

场景 4

    class Person {
        constructor() {}
    
        sayHi() {
            console.log(this)
        }
    }
    
    const xiaoming = new Person()
    
    xiaoming.age = 18
    
    xiaoming.sayHi()

构造函数（类）中的 this 也是一样的，sayHi 的调用者是 xiaoming，所以 this 指向它。

场景 5

    const div = document.querySelector('.content')
    
    div.onclick = function () {
        console.log(this)
    }
    
    div.onclick() // 我们去页面点击元素，实际上就是执行的这行代码

dom 元素添加了点击事件，但是还没执行。当我们执行 div.onclick() 的时候，调用者就是 div ，所以 this 指向它。

---

箭头函数

这里就不用看谁是调用者了，而是看它定义时所在的环境（作用域）。箭头函数本身不存在 this，所以它的 this 指向上一层作用域所在的对象。

场景 1

    const sayHi = () => {
        console.log(this)
    }
    
    sayHi() // window

sayHi 是一个箭头函数，本身没有 this，所以 sayHi 的 this 指向上一层作用域所在的对象，也就是 window。

场景 2

    const person = {
        sayHi: () => {
            console.log(this)
        }
    }
    
    person.sayHi() // window

sayHi 的上层作用域就是全局作用域，所在的对象是 window，所以 this 指向 window。

场景 3

    const person = {
        sayHi: function () {
            return {
                fn: () => {
                    console.log(this)
                }
            }
        }
    }
    
    const xiaoming = person.sayHi()
    
    xiaoming.fn() // person

---

改变 this 指向

通过 call() apply() bind() 可以改变 this 指向。

apply

    const Person = {
        name: 'xiaoming'
    }
    
    function fn(age, sex) {
        console.log(this) // {name: 'xiaoming'}
    }
    
    fn.apply(Person, [18, '男'])

call

    const Person = {
        name: 'xiaoming'
    }
    
    function fn(age, sex) {
        console.log(this) // {name: 'xiaoming'}
    }
    
    fn.call(Person, 18, '男')

bind

    const Person = {
        name: 'xiaoming'
    }
    
    function fn(age, sex) {
        console.log(this) // {name: 'xiaoming'}
    }
    
    const ex = fn.bind(Person, 18, '男')
    
    ex()
    

以上三者的传参方式和执行方式不同。

apply、call 的区别：接受参数的方式不一样。

bind：不立即执行。而 apply、call 立即执行。

---

原文链接：https://note.noxussj.top/?source=sifo

---