精华内容
下载资源
问答
  • JavaScript 箭头函数

    2019-11-17 16:51:49
    JavaScript 箭头函数 箭头函数 可以将原来传统的函数格式变的跟简单方便 原来的函数 function Person(params){ return params+2; } 使用箭头函数 var Person=(params)=>{params+2}; 通过上面的简单例子可以...

    JavaScript 箭头函数

    箭头函数 可以将原来传统的函数格式变的跟简单方便

    原来的函数

    function Person(params){
        return params+2;
    }
    

    使用箭头函数

    var Person=(params)=>{params+2};
    

    通过上面的简单例子可以知道箭头函数和传统函数的区别点了:

    1:不需要function 关键字

    2:省略了return 关键字

    关于箭头函数还有跟简洁的写法:

    以上面的例子为例来:

    1:如果没有参数,那么可以进一步简化

    var Person =()=>{statements};
    

    2:如果只有一个参数,可以省略括号:

    var Person=params=>{return params+2};
    
    展开全文
  • JavaScript箭头函数

    2020-03-08 16:36:48
    JavaScript箭头函数前言语法提升this总结 前言 ES6标准新增了箭头函数表达式,它的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方...

    JavaScript箭头函数

    前言

    ES6标准新增了箭头函数表达式,它的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。1

    // 匿名函数
    function(x){
    	return x*x;
    }
    // 箭头函数
    x => x*x;
    

    语法

    当只有一个参数,圆括号可以省略

    // 当只有一个参数,圆括号可以省略
    param => statements ;
    // 当没有参数或有多个参数,保留圆括号
    () => statements ;
    (param1,param2) => statements ;
    //当函数体只有一个分支,可省略return
    param => ++param ;
    param => {
    	if(param > 0){
    		return param;
    	}else{
    		return ++param;
    	}
    }
    
    

    提升this

    先上代码

    var obj = {
        color : 'blue',
        changeColor : function(){
            this.color = 'red';
        }
    }
    obj.changeColor();
    console.log(obj.color);
    console.log(this.color);
    

    输出
    在这里插入图片描述

    var obj = {
        color : 'blue',
        changeColor : () => this.color = 'red'
    }
    obj.changeColor();
    console.log(obj.color);
    console.log(this.color);
    

    输出
    在这里插入图片描述
    由此可见,箭头行数会将方法体中的this提升到作用域的上一层

    总结

    箭头函数其实JavaScript匿名函数的简洁版本,语法和Java的lambda相似2,它会在方法体中提升this的作用域,可以减少对bind、var self = this等语法的使用,但是不建议在构造函数中去使用,还有一些不是很常用的可以去MDN的Arrow_functions中查看


    1. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions ↩︎

    2. https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/ ↩︎

    展开全文
  • Javascript 箭头函数

    2021-01-21 16:11:50
    javascript 箭头函数箭头函数进阶 箭头函数进阶 1.函数的写法,我们先了解下函数定义的几种写法,为箭头函数的学习做铺垫 (1) 这是最常见的写法 function func(){ console.log('hellow') } (2)不常用的一种...

    javascript 箭头函数

    箭头函数进阶

    1.函数的写法,我们先了解下函数定义的几种写法,为箭头函数的学习做铺垫
    (1) 这是最常见的写法

    function func(){
    	console.log('hellow')
    }
    

    (2)不常用的一种写法,这种用的少,了解下即可

    var func = new Function ([arg1, arg2, ...argN], functionBody);
    

    (3)还有一种写法

    var func= function(){
    	console.log('hellow')
    }
    

    2.我们先可以简单理解,箭头函数是匿名函数的优化写法,我们来看下什么是匿名函数,上文(3)中等号的右边便是匿名函数,我们用箭头函数来代替便是:

    var func= ()=>{
    	console.log('hellow')
    }
    

    3.箭头函数书写简洁方便,由此可见,除了=>不能省之外,一些情况下,其他的都可以省:

    x=>x*x
    

    等价于

    function(x){
    reurn x*x
    }
    

    4、箭头函数解决了函数内部this指向的一个bug问题:

    'use strict'
    var obj={
    	birth:1990,
    	getAge:function(){
       		 var b = this.birth
     		 var fn = function(){
      			console.log(this)
      		    return new Date().getFullYear() - this.b
     		 }
     		 return fn()
    	}
    }
    console.log(obj.getAge())
    

    也就是在函数嵌套中,内部函数fn的this被识别为undefined,这个时候this.b就会报错。在之前我们一般是怎么解决这个问题的呢?看下面的代码:

    'use strict'
    var obj={
    	birth:1990,
    	getAge:function(){
       		var that = this
     		 var fn = function(){
      		    return new Date().getFullYear() - that.birth
     		 }
     		 return fn()
    	}
    }
    console.log(obj.getAge())
    

    同样的问题,我们用箭头函数代替,就可以解决这个问题
    附:(这里涉及到一个闭包的概念,一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。)

    'use strict'
    var obj={
    	birth:1990,
    	getAge:function(){
       		 var b = this.birth
     		 var fn = ()=>{
      			console.log(this)
      		    return new Date().getFullYear() - this.birth
     		 }
     		 return fn()
    	}
    }
    console.log(obj.getAge())
    

    箭头函数,修复了函数this指向性错误的问题。使用箭头函数,之前经常用到的that=this的写法就可以不用了

    5.如果传参就是一个函数,那么调用写参数的时候就是一个匿名函数,这个时候用箭头函数就比较简洁,有代表性的用法是异步嵌套,如:

    this.doSomethingAsync().then((result) => {
      this.storeResult(result);
    });
    

    6.箭头函数不易使用的地方

    class Counter {
      counter = 0;
      handleClick = () => {
        this.counter++;
      }
    }
    

    这种情况还是建议使用

    class Counter {
      counter = 0;
      function handleClick {
        this.counter++;
      }
    }
    
    展开全文
  • js 箭头函数

    千次阅读 2016-10-18 16:20:48
    js 箭头函数

    ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

    为什么叫Arrow Function?因为它的定义用的就是一个箭头:

    x => x * x
    

    上面的箭头函数相当于:

    function (x) {
        return x * x;
    }
    

    箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }return

    x => {
        if (x > 0) {
            return x * x;
        }
        else {
            return - x * x;
        }
    }
    

    如果参数不是一个,就需要用括号()括起来:

    // 两个参数:
    (x, y) => x * x + y * y
    
    // 无参数:
    () => 3.14
    
    // 可变参数:
    (x, y, ...rest) => {
        var i, sum = x + y;
        for (i=0; i<rest.length; i++) {
            sum += rest[i];
        }
        return sum;
    }
    

    如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:

    // SyntaxError:
    x => { foo: x }
    

    因为和函数体的{ ... }有语法冲突,所以要改为:

    // ok:
    x => ({ foo: x })
    

    this

    箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

    回顾前面的例子,由于JavaScript函数对this绑定的错误处理,下面的例子无法得到预期结果:

    var obj = {
        birth: 1990,
        getAge: function () {
            var b = this.birth; // 1990
            var fn = function () {
                return new Date().getFullYear() - this.birth; // this指向window或undefined
            };
            return fn();
        }
    };
    

    现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj

    var obj = {
        birth: 1990,
        getAge: function () {
            var b = this.birth; // 1990
            var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
            return fn();
        }
    };
    obj.getAge(); // 25
    

    如果使用箭头函数,以前的那种hack写法:

    var that = this;
    

    就不再需要了。

    由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

    var obj = {
        birth: 1990,
        getAge: function (year) {
            var b = this.birth; // 1990
            var fn = (y) => y - this.birth; // this.birth仍是1990
            return fn.call({birth:2000}, year);
        }
    };
    obj.getAge(2015); // 25

    展开全文
  • js箭头函数

    2021-09-27 10:47:24
    转自:js箭头函数https://www.pinlue.com/article/2020/03/2712/1010058934236.html
  • Js箭头函数

    千次阅读 2020-04-29 14:07:52
    Js箭头函数 箭头函数是ES6新增的语法,提供了一种更加简洁的函数书写方式,类似于匿名函数,并且简化了函数定义。 完整写法 完整写法类似于匿名函数,省略了function关键字。 var s = (a,b) => { console.log(a,...
  • Javascript箭头函数

    2020-02-07 09:05:03
    箭头函数相当于其他语言的 Lambda 表达式或闭包语法,箭头函数是普通函数的简化写法。箭头函数的语法格式如下 (pararnl , pararn2,..., pararnN) => { statements } 该箭头函数实际上相 当于定义了如下函数 ...
  • javascript 箭头函数

    2019-01-30 10:27:03
    注意 箭头函数JavaScript标准中的ES6新增项。 由于JavaScript中会使用大量函数,增加简化创建函数方式的语法十分有意义,也能让我们开发者生活更愉快。在很多方式中,箭头函数是函数表达式的简化版。 var ...
  • javascript箭头函数

    2020-02-19 18:22:56
    JavaScript初学者必看“箭头函数箭头函数看上去只是语法的变动,其实也影响了this的作用域。 一、更简洁的语法 我们先来按常规语法定义函数: function funcName(params) { return params + 2; } funcName(2);...
  • JS 箭头函数

    2020-05-08 22:04:49
    ES6标准新增了一种新的函数:Arrow Function(箭头函数)。 为什么叫Arrow Function?因为它的定义用的就是一个箭头: 类似Java8出现的Lamda表达式,复习时注意一并复习Lamda表达式。 x => x * x 上面的箭头函数...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,677
精华内容 25,470
关键字:

js箭头函数