this对象——this的指向及改变this指向的方法

this的指向

• 函数调用圆括号时，函数的this是window对象。如果设置了严格模式（‘user strict’）,函数名调用括号时this是underfined

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

• 如果在全局作用域里面直接输出this指向，指向的全局对象window（没有放在函数的内部）

console.log(this)

• 函数作为一个对象的方法，对象打点调用，函数的this就是这个对象

let obj = {
            name: '张三',
            say(){
                console.log(this)
                console.log(this.name)
            }
        }
        obj.say()

• 函数是事件处理函数时，函数的this就是触发这个this的对象

document.querySelector('button').onclick = function(){
             console.log(this)

• 如果是构造函数的实例化对象调用函数，this指向的是实例化对象本身

function Person(name){
            this.name = name
        }
        Person.prototype.say = function(){
            console.log(this)
        }
        new Person('张三').say()

• 箭头函数没有自己的this，它的this指向上一层代码

document.querySelector('button').onclick = ()=>{
             console.log(this)
         }

• 定时器调用函数时，this是window对象

setInterval(function(){
            console.log(this)
         }, 2000)

• 数组中存放的函数，被数组索引之后加圆括号调用，this就是这个数组

function fn(){
            console.log(this)
        }
        let arr = ['a', 'b', fn]
        arr[arr.length-1]()

• 构造函数调用静态方法，它方法里面this指向的是类本身

class Person{
            constructor(){}
            static say(){
                console.log(this)
            }
        }
        Person.say()

• this备份，在能找到this的方法进行备份，再使用

 document.querySelector('button').onclick = function(){
            // 在这个作用域里面可以找到this，并把它保存了
            let that = this
            setTimeout(function(){
                // 下面使用的是保存的this，把一个对象的地址赋值，在这里找到就是一个地址
                that.style.backgroundColor = 'hotpink'
            }, 3000)
        }

改变this指向

bind、call、apply方法可以改变当前this的指向。

• bind()方法：修改函数或方法中的this为指定的对象 ，并且会返回一个修改后的新函数给我们，也可以传递参数
• bind()方法除了修改this以外，还可以传递参数，只不过参数必须写在this对象的后面

let obj = {
            name: '张三'
        }
        function fn(a, b){
            console.log(a, b)
            console.log(this)
            console.log(this.name)
        }
        let res = fn.bind(obj, 10, 20)
        res()

• call()方法：修改函数或方法中的this为指定的对象，并且会立即调用修改之后的函数
• 注意点：call()方法除了可以修改this以外，还可以传递参数，只不过参数必须写在this对象的后面

 let obj = {
            name: '张三'
        }
        function fn(a, b){
            console.log(a, b)
            console.log(this)
            console.log(this.name)
        }
        fn.call(obj, 20, 30)

• apply（）方法：修改函数或方法中的this为指定的对象，并且会立即调用修改之后的函数
• 注意点：传递参数的时候，需要放在一个数组里面

let obj = {
            name: '张三'
        }
        function fn(a, b){
            console.log(a, b)
            console.log(this)
            console.log(this.name)
        }
        fn.apply(obj, [10, 20])
        
        // function demo(){
        //     console.log('hello')
        // }
        // console.log(demo())
        // document.querySelector('button').onclick = demo()