js中的this

js中的this永远指向一个对象
这个指向会随着执行环境的变化而变化

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。//函数中的函数也是一样，因为找不到从属对象，虽然函数也是对象，但是是比较特殊的对象，this不能指向函数对象，否者可以通过this给函数随意添加成员
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 立即执行函数this必定指向window
• 在事件中，this 表示接收事件的元素。
• 箭头函数中，this指向父级作用域指向的对象，注意对象中的箭头函数的父级作用域不是对象（对象不存在作用域），而是那个对象所属的作用域
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

总结来说，也就一句话，函数中的this都是在函数执行的时候才会有确切的值，这个值由调用函数的对象决定，如果往上层找到最后，那this指向的就是window对象，如果调用函数的是dom节点，那this指向的就是dom节点。call和apply是函数对象的两个成员函数，可以指定函数的执行环境，两个参数分别是调用函数的对象和函数的参数，区别在于参数的写法，apply传入一个参数数组，call则把参数按顺序传入

新增项目中遇到的问题

下面一段代码

<template>
    <div id="test">111
        <div class="test" v-if="state"></div>
    </div>
</template>
<script>
export default {
    name: 'FirstDay',
    data(){
        return {
            state:false
        }
    },
    mounted(){
        var dom = document.querySelector('#test')
        if(dom){
            let that = this
            console.log(this) //vue实例
            console.log('dom is exist')
            console.log(that) //vue实例
            dom.addEventListener('click', function (){
                console.log(111)
                console.log(this) //调用这个函数的时候，对象是dom节点，所以this指向dom节点 
            })
            
            dom.addEventListener('click',()=>{
            	cosole.log(222)
            	cosole.log(this)//对于箭头函数，其中的this指向其父级作用域所属的对象，自己的作用域是addEventListener,父级作用域是mounted函数，mounted函数所属对象是vue实例
            })
        }
    }
}

</script>