全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

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

发布时间:2023-05-26 17:25:00
发布人:syq

  箭头函数是 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`,无论如何都指向全局作用域。

相关文章

python写入json文件?

python写入json文件?

2023-11-02
vscode设置tab为4个空格?

vscode设置tab为4个空格?

2023-11-02
更新pycharm?

更新pycharm?

2023-11-02
anaconda每次打开都要安装?

anaconda每次打开都要安装?

2023-11-02

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取