JS中的THIS指向的5种情况

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

前言

在项目中经常使用到this的情况，这次做个总结，浅谈一下自己总结的5种情况，this指向应该讨论的是，指向的是内存中的哪块地址。如有说的不对的地方，可以在评论区指出。

THIS的第一种情况

给元素绑定某事件，事件触发时，回调函数里面的this指向的一般是该元素本身。具体情况可看下面代码。

<button id="btn">点击这个按钮</button>

const mybtn = document.getElementById('btn')
        mybtn.onclick = function () {
            console.log(this) 
            // <button id="btn">点击这个按钮</button>
            this.innerText = '点击了'
            // 给这个元素内容重新赋值
        }

点击后的回调函数里面的this指向了该元素，也就是这个按钮，利用this,给元素内容重新赋值。

THIS的第二种情况

普通函数执行时，这种情况一般有个技巧，就是，你调用的那个方法前面有没有点“.”，点“.”前面是谁,你执行的那个方法里面的THIS指向的就是谁。如果函数前面没有点“.”，就指向window(严格模式下是undefined)，自执行函数里面的this指的是window。

下面就举例说明一下

• 不使用严格模式：

    let x = 10
    function fn() {
        console.log(x) // 10
        console.log(this) // window
    }
    fn()
    // 可以理解为fn()执行时，前面没有点“.”，所以该方法执行时，里面的this指向的是window

• 使用严格模式

   'use strict'
    let x = 10
    function fn() {
        console.log(x) // 10
        console.log(this) // undefined
    }
    fn()
    // 前面没有点“.”，所以该方法执行时，在严格模式下，里面的this指向的是undefined

• 自执行函数

    (function fn() {
        console.log(this) // window
    })()

THIS的第三种情况

构造函数执行，当根据构造函数创建实例对象时，此时new构造函数里面的this指向的是这个实例对象。相当于new Fun(),此时Fun()中的this是当前类的实例，可以向这个实例对象里面添加或者修改属性和方法。具体可看下面代码。

    function Fun(value) {
        this.aaa = value
        // 这里的this指向的是myfun这个实例对象。
        this.sing = function () {
            console.log(this)
            // 这里的this指向的是：谁调用它，就指向谁。
        }
    }
    const myfun = new Fun('bbb')
    myfun.sing()
    // sing()方法里面的this指向的是myfun：{aaa: "bbb", sing: ƒ}

这里涉及到的知识点，可以看一下new构造函数的实现过程。new构造函数其实在内部是创建了一个空对象，执行完成之后，返回这个创建的空对象（可能这个空对象里面已经有了一些属性和方法），const myfun就赋值成了这个空对象。

THIS的第四种情况

箭头函数中的this,就记住一点，箭头函数中没有自身的this，要想在里面写this就要看一下他的上下文中（创建这个箭头函数时）的this指向的是谁。

    let obj = {
        name: '箭头函数',
        getName: () => {
            console.log(this) // window
        }
    }
    obj.getName()

注意：这个就不能用上面的点规则来判断this指向了，因为箭头函数中没有自己的this指向，所以看他创建时候的this指向是哪里，在代码中，可见创建这个箭头函数是在obj这个上下文之中，这个obj对象中的this指向的是window,所以getName这个箭头函数中的this指向的也是window。所以，平时要用到this的话，要慎用箭头函数。其他情况可以用箭头函数。

THIS的第五种情况

基于call,apply,bind,可以强行改变函数中的this指向，但是不能改变箭头函数里面的，因为箭头函数里面没有this.

• CALL/APPLY

  第一个参数就是改变的this指向，写谁就是谁（特殊：非严格模式下，传递null/undefined指向的也是window）,唯一区别：执行函数，传递的参数方式有区别，call是一个个的传递，apply是把需要传递的参数放到数组中整体传递。

• BIND

  call/apply都是改变this的同时直接把函数执行了，而bind不是立即执行函数，属于预先改变this和传递一些内容

最后

以上就是介绍了this常用的5种情况，具体情况具体分析。还遗留了一个知识点，重写call,apply,bind方法。这个只能等到下次再更新了。感谢你能阅读到此，有问题欢迎指出，谢谢~