这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，今天是虎年的第二天，也是正月初二，走完亲戚的我又来更文了。前面更了很多好玩的项目，其中不有些需要js来实现，那主要就是操作dom，但是我们需要考虑到this的指向性问题，在不同的函数中，this的指向肯定是不同的。

什么是this

简单来说在调用函数时，指向正在调用函数的对象的 关键字

普通函数

这里给一个普通函数并且调用，函数内部打印this,如下所示:

     let sum = function() {
            console.log(this);
        }
        sum()

结果如下所示,普通函数的this指向window

严格模式下

 let sum = function() {
            "use strict"
            console.log(this);
        }
        sum()

在严格模式下this指向undefined

事件处理函数

事件处理函数，我们常常操作dom时，我们能够用到，比如点击事件，键盘事件，表单事件等。比如我们现在给document赋予一个点击事件，函数内部打印this，触发点击事件才打印。

 document.onclick = function() {
            console.log(this);
        }

控制台打印结果如下：this指向事件源，也就是这里的document。

对象中的方法中的this

对象中的方法也有this的指向问题，我们在这里定义一个对象，对象中有方法并且打印this

 let obj = {
            name: '不吃鱼d猫',
            age: 21,
            say: function() {
                console.log(this);
            }
        }
        obj.say()

控制台打印结果如下，对象中的方法中的this指向对象本身。

箭头函数

箭头函数，只有匿名函数才能写成箭头函数。并且箭头函数中没有arguments
还是在上面的对象中我们声明一个定时器，打印this

  let obj = {
            name: '不吃鱼d猫',
            age: 21,
            say: function() {
                console.log(this);
                setTimeout(function() {
                    console.log(this);
                }, 1000)
            }
        }
        obj.say()

结果在控制台打印window，此时作比较我们将定时器改写成箭头函数的写法

改写成箭头函数


        let obj = {
            name: '不吃鱼d猫',
            age: 21,
            say: function() {
                console.log(this);
                setTimeout(() => {
                    console.log(this);
                }, 1000)
            }
        }
        obj.say()

如下控制台打印结果显示，this的指向发生了改变。指向了对象本身，与它的父元素的this指向一样

总结

箭头函数可以维持this的指向，箭头函数没有自己的this指向，父元素指向谁，箭头函数的this就指向谁。

每日补充

很多人不成想过的冷知识，函数是有长度的，面试时会问到的。函数的长度就是函数参数的个数。

 function add(a, b, c) {
            console.log(a, b, c);
        }
        console.log(add.length);

快速理解js中的this指向问题

前言