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