千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 什么是箭头函数?箭头函数中this关键字的用法

什么是箭头函数?箭头函数中this关键字的用法

来源:千锋教育
发布人:syq
时间: 2023-05-26 17:25:00 1685093100

  箭头函数是 ES6 中新增的一种函数写法,它的语法比传统的函数更简洁,主要使用箭头(=>)来定义函数。

什么是箭头函数

  一个基本的箭头函数的形式为:

(param1, param2, …, paramN) => { statements; }

   其中:

  - `param1, param2, …, paramN` 是函数的参数。

  - `statements` 是函数的执行代码块。

  与传统函数不同的是,箭头函数没有自己的this关键字,它继承了父级作用域的this值。这意味着,在箭头函数中使用this关键字,它的作用域是外层的函数作用域,而不是箭头函数自身的作用域。

  例如:

let obj = {
name: 'Jack',
sayHi: function() {
console.log(`Hi, my name is ${this.name}.`);
},
sayHiArrow: () => {
console.log(`Hi, my name is ${this.name}.`);
}
}

obj.sayHi(); // 输出:Hi, my name is Jack.
obj.sayHiArrow(); // 输出:Hi, my name is undefined.

   在上面的例子中,`obj.sayHi` 是一个传统函数,它的作用域是 `obj`,所以在打印时输出了正确的结果。而`obj.sayHiArrow` 是一个箭头函数,它的作用域是定义它的作用域,即全局作用域。所以在打印时,`this.name` 取不到值,输出了 undefined。

  需要注意的是,当箭头函数作为对象方法时,this指向仍可被修改。例如:

let obj = {
name: 'Jack',
sayHiArrow: () => {
console.log(`Hi, my name is ${this.name}.`);
},
sayHi: function() {
console.log(`Hi, my name is ${this.name}.`);
},
sayHiWithCall: function() {
console.log(`Hi, my name is ${this.name}.`);
}
}

obj.sayHiArrow(); // 输出:Hi, my name is undefined.
obj.sayHi(); // 输出:Hi, my name is Jack.
obj.sayHiWithCall.call({name: 'Tom'}); // 输出:Hi, my name is Tom.

   在上述例子中,我们可以通过将传统函数`sayHi`的普通调用方式修改为使用 `call` 方法传入一个新的上下文来改变this指向,而对于箭头函数`sayHiArrow`,无论如何都指向全局作用域。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT