博主信息
Lon
博文
22
粉丝
0
评论
0
访问量
2428
积分:0
P豆:48

ES6 箭头函数和this

2021年09月29日 17:46:11阅读数:92博客 / Lon/ ES6

ES6 箭头函数和this

了解更多请访问https://www.bilibili.com/video/BV1QE411q7C2

一.箭头函数

1、ES6 新增了一个使用(=>)箭头符号定义函数的语法特性

  1. // 传统函数代码写法
  2. let fn = function(name){
  3. return name;
  4. }
  5. //ES6箭头函数写法
  6. let fn = name => name;
  7. console.log(fn('Mr.Lon'));

从例子我们可以看出,省略了function,花括号‘{}’用‘=>’代替了。这种写法更简洁了。

2、箭头函数也可以传递两个或以上的参数,并实现运算后返回

  1. let fn = (x , y) => x + y;
  2. console.log(fn(10,20));
  3. //翻译成函数代码为
  4. let fn = function(x,y){
  5. return x + y;
  6. }

3、如果你定义的函数,并不需要传递参数,可以用()括号方式直接返回

  1. let fn = () => 'Mr.Lon';
  2. console.log(fn());
  3. //翻译成函数代码为
  4. let fn = function(){
  5. return 'Mr.Lon';
  6. }

4、如果函数体需要更复杂的操作,可以将箭头符号右边使用传统函数体

  1. let fn = (x , y)=>{
  2. return x + y;
  3. }
  4. console.log(fn(10 , 20))

5、如果箭头符号右边是对象,返回的是对象,则需要用圆括号包含着

  1. let fn = name => ({name : name , age : 100})
  2. console.log(fn('Mr.Lon').name)
  3. //翻译成函数代码为
  4. let fn = function(name){
  5. return{
  6. name : name,
  7. age : 100
  8. }
  9. }

6、自我立即执行函数,也可以使用箭头符号来创建,具体如下:

  1. ((name) => {
  2. console.log(name);
  3. })('Mr.Lon')
  4. //翻译成函数代码为
  5. (function(name){
  6. console.log(name);
  7. })('Mr.Lon')

二.绑定 this

1、ES6 之前有一个比较头疼的问题,就是 this 指向的问题,比如下面例子

  1. let obj = {
  2. name : 'Mr.Lon',
  3. age : 100,
  4. fn : function(){
  5. setTimeout(function(){
  6. console.log(this.name + ',' + this.age)
  7. }, 500);
  8. }
  9. }
  10. obj.fn()

上面的例子比较典型,this 全局指向 window,在某个对象内部指向当前对象
当 obj 对象下包含了类似 setTimeout 函数内部,这时 this 指向就出现问题了
Web 环境下,它指向了 Window,而 node 环境下它指向 setTimeout
所以,我们通俗的做法,就是将 this 在 setTimeout 外部进行赋值保存

  1. let obj = {
  2. name : 'Mr.Lon',
  3. age : 100,
  4. fn : function(){
  5. /*
  6. 在setTimeout里面,如果我们直接写this的话,这个this是指向window的。
  7. 因此我们需要在setTimeout函数之前先保存that = this;
  8. */
  9. let that = this;
  10. setTimeout(function(){
  11. console.log(that.name + ',' + that.age)
  12. }, 500);
  13. }
  14. }
  15. obj.fn()

箭头函数的出现,彻底解决了 this 在内部指向的问题,直接指向我们所需要;
因为,箭头函数中的 this 是最外层定义的函数绑定,不受内部影响;

  1. let obj = {
  2. name : 'Mr.Lee',
  3. age : 100,
  4. fn : function(){
  5. setTimeout(() => {
  6. console.log(this.name + ',' + this.age)
  7. }, 500);
  8. }
  9. }
  10. obj.fn()

三、箭头扩展

1、箭头也支持一些内置函数的使用,比如 sort()排序;

  1. let arr = [3,1,2].sort((a,b) => a - b);
  2. console.log(arr)
  3. //翻译后的代码为:
  4. let arr = [3,1,2].sort(function(a,b){
  5. return a - b;
  6. });

2、箭头函数不支持 arguments 绑定,请直接使用…other 模式(rest 运算符);

  1. //下面这种写法不支持
  2. let fn = (x , y) =>{
  3. return arguments[0] + arguments[1]
  4. }
  5. //不确定参数,使用...
  6. let fn = (...other) => {
  7. return other[0] + other[1]
  8. }
  9. console.log(fn(10,20))

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 区别:是“=>”,普通是“function”。不能作为构造,不能使用new。不绑定arguments,但普通可以。
    普通区别
    ES6很多很棒的新特性中, (或者大)就是其中值得关注的一个!
    ES6很多很棒的新特性中, 就是其中值得关注的一个!
    的理解
    本篇文章给大家介绍一下es6。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
    的确与传统有不同之处,但仍存在共同的特点,对进行typeof操作会返回“function”,与传统最大的不同之处在,禁用new操作,本文总结了常用的语法。
    称为的短闭包是PHP7.4版本将带来的期待已久的功能之一,它是由Nikita Popov、Levi MorrisonBob Weinan 提出的,你可以在此处阅读原RFC。
    jquery改变this指向的方法:1、利用赋值【var that=this;】来改变嵌套的【this】指向;2、利用es6改变this指向,代码为【$('div').on('click',
    this指向问题,在没有之前,this就是运行时所在的环境对象,但是在this就是定义时所在的对象,先说大家熟知的:运行时所在的环境对象。
    es6中,“=>”指的是,是一种的简写方法,它将原的“function”关键字名都删掉,并使用“=>”连接参列表体;例语句“v=>v;”,就相当于“
    Excel在计算比对的同时自动标记上升或下降的的方法:首先选中单元格,点击条件格式;然后点击图标,并选择条件格式栏下的【管理规则】选项;接着进入编辑规则页面进行编辑;最后求据即可。
    区别:1、es6新增了,es5没有;2、ES6中新增了块级作用域,es5没有;3、ES6引入Class概念,不再像ES5一样使用原型链实现继承;4、ES6中可以设置默认,es5不行;5、
    es6新特性:const与let变量、模板字面量、解构、增强的对象字面量、for...of循环、展开运算符(...)
    react写点击事件的方法:1、使用bind绑定,代码为【this.clicked.bind(this,"hello world")】;2、使用,代码为【onClick={(
    this指向:1、普通或作为对象属性,指向window对象;2、事件绑定中,指向绑定事件的元素;3、构造中,指向类的实例;4、中,指向其最近父级上下文中的this;5、call/apply
    es5es6继承的区别: ES5的继承是通过原型或构造机制实现的;它先创建子类,再实例化父类并添加到子类this中。
    golang不是面向对象的,go是面向过程的语言,也不是式编程范式,其表现在缺少,需要显式声明lambda,而且不讲究纯immutable。
    javascript特性有:1、展开操作符;2、剩余参;3、字符串插值;4、简写属性;5、方法属性;6、解构赋值;7、组方法;8、模块;9、Promises+Async/Await;10、字典作用域
    java中this关键字的用法:1、当成员变量局部变量重名时,在方法中使用this时,表示的是该方法所在类中的成员变量;2、在构造中,通过this可以调用同一类中别的构造;3、使用this同时传递多个参