this 指向

原创

菜园前端

发布于 2023-05-24 23:23:29

6320

发布于 2023-05-24 23:23:29

文章被收录于专栏：前端学习文档

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

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 在定义时是在 fn 函数作用域中，箭头函数本身不存在 this，所以它的 this 指向上一层作用域 sayHi 所在的对象 person，所以无论是谁调用了 fn ，this 始终指向 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 立即执行。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端工程师