美文网首页
ES6-箭头函数

ES6-箭头函数

作者: zhenghongmo | 来源:发表于2020-03-13 16:37 被阅读0次

基本语法

  1. 当有多个参数时

(参数1,参数2,...参数n)=>{函数体}

  1. 当只有一个return时,{}可以省略

(参数1,参数2,...参数n)=>表达式

  1. 当只有一个参数时,()可以省略

参数=>{函数体}

  1. 当没有参数时,只写一个()即可

()=>{函数体}

箭头函数不绑定this

  • 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
  • 传统函数
function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}
  • 箭头函数
function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向person 对象
  }, 1000);
}

通过 call 或 apply 调用

  • 由于 箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this),他们的第一个参数会被忽略。
var adder1 = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },
adder1.add(1) //2

var adder2 = {
  add : function(a) {
    var f = v => v + this.base;
    var b={base:1}
    return f.call(b,a);
  },
adder2.add(1,3) //1会被忽略,a=3,返回4

相关文章

  • ES6-箭头函数

    箭头函数中的this ES6函数参数默认值 箭头函数不适用的场景

  • es6-箭头函数

    1 变量定义 let只在局部代码块中有效 const不希望修改,差不多跟常量一个意思吧 2 箭头函数 【主...

  • ES6-箭头函数

    基本语法 当有多个参数时 (参数1,参数2,...参数n)=>{函数体} 当只有一个return时,{}可以省略 ...

  • ES6-箭头函数

    ES6允许使用箭头(=>)定义函数,箭头函数的语法多变,根据实际的使用场景有多种形式,但需要由函数参数、箭头和函数...

  • ES6-函数箭头

    var coverSupport = 'CSS' in window && typ...

  • ES6-箭头函数

    声明和特点 声明 特点 1.this是静态的,this始终指向声明时所在作用域下的值 2.不能作为构造函数实例化对...

  • ES6-函数与箭头函数

    一、设置默认值 二、箭头函数 单个参数 多个参数 实际应用 箭头函数体内的this指向定义时所在的对象,而非实例化...

  • ES6~箭头函数

    什么是箭头函数 单表达式箭头函数 相当于 多表达式箭头函数 箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有...

  • 箭头函数和立即执行函数

    箭头函数 箭头函数和普通函数有什么区别?如果把箭头函数转换为不用箭头函数的形式,如何转换主要是this的差别,箭头...

  • 学习 ES 6 箭头函数

    箭头函数的用法 ES6 允许使用“箭头”(=>)定义函数。 箭头函数的一个用处是简化回调函数。 箭头函数 this...

网友评论

      本文标题:ES6-箭头函数

      本文链接:https://www.haomeiwen.com/subject/gbnujhtx.html