ES6中function函数及箭头函数的this指向

2022-05-13 01:04:24 阅读：144 来源： 互联网

标签：function ES6 obj 函数指向 show 箭头 console

箭头函数中的this：

重要特性：箭头函数没有this，所以this是定义的时候，外部所在的对象是他的this。调用的时候的this也没有arguments值；

当在函数中使用一个变量的时候,首先在本函数内部查找这个变量,如果找不到那就去找他的父级函数,依次往上推，最后到window对象,全局变量默认挂载是在window对象下的

console.log(this);        
let obj = {
x: 100, //属性x
  show() {
   console.log(this);
//延迟500毫秒，输出x的值
   setTimeout(function () {
console.log(this.x);//因为这里的setTimeout的this指向的是window对象，而在window中并没有找到x，所以返回undefined
      }, 500)
    }
};
obj.show();     //undefined

如果是使用箭头函数的话就会改变this的指向

console.log(this);
var obj = {
    x: 100, //属性x
        show() {
            //延迟500毫秒，输出x的值
            setTimeout(() => {
                console.log(this);
                console.log(this.x);
            }, 500);
        },
    };
    obj.show(); //打印结果：100

当定义obj的show( )方法的时候，我们在箭头函数编写this.x，此时的this是指的obj，所以this.x指的是obj.x。而在show()被调用的时候，this依然指向的是被定义时候所指向的对象，也就是obj对象，故打印出：100。

注：箭头函数中的this指向的是定义时的this，而不是执行时的this

箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁

箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题简化。

简化方法：

以前javascript写法

function sum(num1, num2) {
            return num1 + num2;
        }

ES6箭头函数写法

const sum =(num1,num2)=>{
            return num1 + num2;
        }

更简化的方法

const sum = (num1, num2) => num1 + num2;

可以看出箭头函数对代码的简化非常大。

标签：function,ES6,obj,函数,指向,show,箭头,console
来源： https://www.cnblogs.com/qq3229277827/p/16265134.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6中function函数及箭头函数的this指向

箭头函数中的this：

简化方法：