关于前端:一篇文章帮你搞定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