精华内容
下载资源
问答
  • ES6 箭头函数的主要区别如下: 箭头函数不绑定arguments,可以使用...args代替; 箭头函数可以进行隐式返回; 箭头函数内的this是词法绑定的,与外层函数保持一致; 箭头函数没有prototype属性,不能进行 new ...

    ES6 箭头函数的主要区别如下:

    • 箭头函数不绑定 arguments,可以使用 ...args 代替;
    • 箭头函数可以进行隐式返回;
    • 箭头函数内的 this 是词法绑定的,与外层函数保持一致;
    • 箭头函数没有 prototype 属性,不能进行 new 实例化,亦不能通过 call、apply 等绑定 this;
    • 在定义类的方法时,箭头函数不需要在 constructor 中绑定 this
    展开全文
  • ES6箭头函数与普通函数的区别

    千次阅读 2019-04-05 20:23:58
    作为ES6中新加入的箭头函数语法,深受广大开发人员的喜爱,也是平时前端面试过程中经常会被提及问道的典型题目。它不仅简化了我们的代码,而且也让开发人员摆脱了“飘忽不定”的this指向,本文就箭头函数与普通函数...

    箭头函数与普通函数的区别

    作为ES6中新加入的箭头函数语法,深受广大开发人员的喜爱,也是平时前端面试过程中经常会被提及问道的典型题目。它不仅简化了我们的代码,而且也让开发人员摆脱了“飘忽不定”的this指向,本文就箭头函数与普通函数的区别进行一些分析。

    在我看来,面试官最关注的也是两者最关键的区别就是this指向的区别,普通函数中的this指向函数被调用的对象,因此对于不同的调用者,this的值是不同的。而箭头函数中并没有自己的this(同时,箭头函数中也没有其他的局部变量,如this,argument,super等),所以箭头函数中的this是固定的,它指向定义该函数时所在的对象。

    普通函数

    相信大家对普通函数的用法已经非常熟悉了,下面我们举一个简单的例子。

    var a  = 3;
    var obj = {
        a : 1,
        foo : function(){
            console.log(this.a);
        }
    }
    obj.foo(); //1
    var bar = obj;
    bar.a = 2;
    bar.foo(); //2
    var baz = obj.foo;
    baz(); //3
    

    上述代码中,出现了三种情况:

    1. 直接通过obj调用其中的方法foo,此时,this就会指向调用foo函数的对象,也就是obj;
    2. 将obj对象赋给一个新的对象bar,此时通过bar调用foo函数,this的值就会指向调用者bar;
    3. 将obj.foo赋给一个新对象baz,通过baz()调用foo函数,此时的this指向window;

    由此我们可以得出结论:

    • 普通函数的this总是指向它的直接调用者。
    • 在严格模式下,没找到直接调用者,则函数中的this是undefined。
    • 在默认模式下(非严格模式),没找到直接调用者,则函数中的this指向window。

    再考虑一下下面的情况:

    var obj = {
        a : 1,
        foo : function(){
            setTimeout(
                function(){console.log(this.a),3000})
        }
    }
    obj.foo(); //undefined
    

    你可能会认为此时的输出应该为1,但是结果却是undefined。因为此时this的指向是全局的window对象。
    通过以上例子,可以得出以下总结:

    • 对于方法(即通过对象调用了该函数),普通函数中的this总是指向它的调用者。
    • 对于一般函数,this指向全局变量(非严格模式下)或者undefined(严格模式下)。在上例中setTimeout中的function未被任何对象调用,因此它的this指向还是window对象。因此,这也可以总结成:javascript 的this 可以简单的认为是后期绑定,没有地方绑定的时候,默认绑定window或undefined。

    如果我们希望可以在上例的setTimeout函数中使用this要怎么做呢?在箭头函数出现之前,我们往往会使用以下两种方法:

    1. 在setTimeout函数的外部,也就是上层函数foo内部通过将this值赋给一个临时变量来实现。
    var obj = {
        a : 1,
        foo : function(){
            var that  = this;
            setTimeout(
                function(){console.log(that.a),3000})
        }
    }
    obj.foo(); //1
    
    1. 通过bind()来绑定this。
    var obj = {
        a : 1,
        foo : function(){
            setTimeout(
                function(){console.log(this.a),3000}.bind(this))
        }
    }
    obj.foo(); //1
    

    这种现象在ES6引入箭头函数后得到了改善。

    箭头函数

    箭头函数是ES6中引入的新特性,使用方法为:

    ()=>{console.log(this)}
    

    其中()内是要带入的参数,{}内是要执行的语句。箭头函数是函数式编程的一种体现,函数式编程将更多的关注点放在输入和输出的关系,省去了过程的一些因素,因此箭头函数中没有自己的this,arguments,new target(ES6)和 super(ES6)。箭头函数相当于匿名函数,因此不能使用new来作为构造函数使用。
    箭头函数中的this始终指向其父级作用域中的this。换句话说,箭头函数会捕获其所在的上下文的this值,作为自己的this值。任何方法都改变不了其指向,如call(), bind(), apply()。在箭头函数中调用 this 时,仅仅是简单的沿着作用域链向上寻找,找到最近的一个 this 拿来使用,它与调用时的上下文无关。我们用代码来解释一下。

    var obj = {
        a: 10,
        b: () => {
          console.log(this.a); // undefined
          console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
        },
        c: function() {
          console.log(this.a); // 10
          console.log(this); // {a: 10, b: ƒ, c: ƒ}
        },
        d:function(){
            return ()=>{
                console.log(this.a); // 10
            }
        },
        e:function(){
          setTime
        }
    
      }
      obj.b(); 
      obj.c();
      obj.d()();
    

    简单分析一下代码,obj.b()中的this会继承父级上下文中的this值,也就是与obj有相同的this指向,为全局变量window。obj.c()的this指向即为调用者obj,obj.d().()中的this也继承自父级上下文中的this,即d的this指向,也就是obj。
    通过这个例子,也就可以大概的让我们理解普通函数中的this和匿名函数中的this指向差别,从而更好的在工作中根据我们的需求正确合理地使用这两种函数。


    链接:https://www.jianshu.com/p/e5fe25edd78a

    展开全文
  • JavaScript ES6箭头函数是一个来自ECMAScript 2015(又称ES6)的全新特性,有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上下
  • ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,接下来通过本文给大家分享ES6箭头函数中的this,感兴趣的朋友一起看看吧
  • 参考:...ES6箭头函数提供了一种更加简洁的函数书写方式。基本语法是:参数=>函数体,如常见的: const fff=name=>console.log(name) //const 函数名=参数=>...

    参考:https://www.runoob.com/w3cnote/es6-function.htmlhttps://www.jianshu.com/p/87008f4f8513

     

    ES6的箭头函数提供了一种更加简洁的函数书写方式。基本语法是:参数=>函数体,如常见的:

    const fff=name=>console.log(name)
    //const 函数名=参数=>内容
    例如:
    var f = v => v;
    //等价于
    var f = function(v){
     return v;
    }
    f(1);  //1

     如果函数的参数只有一个,不需要使用( )包起来:

    const greet = name => `Hello ${name}!`;//const声明变量不是指值不变,而是指存值的地址不变
    
    greet('Asser');

    空参数列表需要写( ),不写( )代表参数只有一个:

    const sayHi = () => console.log('Hello Udacity Student!');

    多个参数需要写( ):

    var f = (a,b) => a+b;
    f(6,2);  //8
    const orderIceCream = (flavor, cone) => console.log(`Here's your ${flavor} ice cream in a ${cone} cone.`);
    orderIceCream('chocolate', 'waffle');//调用

    一般箭头函数都只有一个表达式作为函数主题,在函数主体周围没有{ },自动返回表达式:

    const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(
    
    name => name.toUpperCase()
    
    );

     但是如果箭头函数的主体内需要多行代码, 则需要使用常规主体语法:它将函数主体放在{ }内需要使用 return 语句来返回内容:

    var f = (a,b) => {
     let result = a+b;
     return result;
    }
    f(6,2);  // 8
    const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map( name => {
    
    name = name.toUpperCase();
    
    return `${name} has ${name.length} characters in their name`;
    
    });

     当箭头函数要返回对象的时候,为了区分于代码块,要用 () 将对象包裹起来:

    // 报错
    var f = (id,name) => {id: id, name: name};
    f(6,2);  // SyntaxError: Unexpected token :
     
    // 不报错
    var f = (id,name) => ({id: id, name: name});
    f(6,2);  // {id: 6, name: 2}

    箭头函数里面没有 this 对象,没有 this、super、arguments 和 new.target 绑定.

    箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象。

    var func = () => {
      // 此时的 this 是外层的 this 对象,即 Window 
      console.log(this)
    }
    func(55)  // Window 
     
    var func = () => {    
      console.log(arguments)
    }
    func(55);  // ReferenceError: arguments is not defined

     

    function fn(){
      setTimeout(()=>{
        // 定义时,this 绑定的是 fn 中的 this 对象
        console.log(this.a);
      },0)
    }
    var a = 20;
    // fn 的 this 对象为 {a: 19}
    fn.call({a: 18});  // 18

     

    展开全文
  • 箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,是受到了CoffeeScript的影响,并且它与CoffeeScript中的=>语法一样,共享this...

    胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,是受到了CoffeeScript的影响,并且它与CoffeeScript中的=>语法一样,共享this上下文。

    箭头函数的产生,主要由两个目的:更简洁的语法和与父作用域共享关键字this。接下来,让我们来看几个详细的例子。

    新的函数语法

    传统的JavaScript函数语法并没有提供任何的灵活性,每一次你需要定义一个函数时,你都必须输入function () {}。CoffeeScript如今之所以那么火,有一个不可忽略的原因就是它有更简洁的函数语法。更简洁的函数语法在有大量回调函数的场景下好处特别明显,让我们从一个Promise链的例子看起:

    function getVerifiedToken(selector){

    return getUsers(selector)

    .then(function (users){ return users[0]; })

    .then(verifyUser)

    .then(function (user, verifiedToken){ return verifiedToken; })

    .catch(function (err){ log(err.stack); });

    }

    以下是使用新的箭头函数语法进行重构后的代码:

    function getVerifiedToken(selector){

    return getUsers(selector)

    .then(users => users[0])

    .then(verifyUser)

    .then((user, verifiedToken) => verifiedToken)

    .catch(err => log(err.stack));

    }

    以下是值得注意的几个要点:

    function和{}都消失了,所有的回调函数都只出现在了一行里。

    当只有一个参数时,()也消失了(rest参数是一个例外,如(...args) => ...)。

    当{}消失后,return关键字也跟着消失了。单行的箭头函数会提供一个隐式的return(这样的函数在其他编程语言中常被成为lamda函数)。

    这里再着重强调一下上述的最后一个要求。仅仅当箭头函数为单行的形式时,才会出现隐式的return。当箭头函数伴随着{}被声明,那么即使它是单行的,它也不会有隐式return:

    const getVerifiedToken = selector => {

    return getUsers()

    .then(users => users[0])

    .then(verifyUser)

    .then((user, verifiedToken) => verifiedToken)

    .catch(err => log(err.stack));

    }

    如果我们的函数内只有一条声明(statement),我们可以不写{},这样看上去会和CoffeeScript中的函数非常相似:

    const getVerifiedToken = selector =>

    getUsers()

    .then(users => users[0])

    .then(verifyUser)

    .then((user, verifiedToken) => verifiedToken)

    .catch(err => log(err.stack));

    你没有看错,以上的例子是完全合法的ES6语法。当我们谈论只包含一条声明(statement)的箭头函数时,这并不意味着这条声明不能够分成多行写。

    这里有一个坑,当忽略了{}后,我们该怎么返回空对象({})呢?

    const emptyObject = () => {};

    emptyObject(); // ?

    不幸的是,空对象{}和空白函数代码块{}长得一模一样。。以上的例子中,emptyObject的{}会被解释为一个空白函数代码块,所以emptyObject()会返回undefined。如果要在箭头函数中明确地返回一个空对象,则你不得不将{}包含在一对圆括号中(({})):

    const emptyObject = () => ({});

    emptyObject(); // {}

    下面是一个更完整的例子:

    function (){ return 1; }

    () => { return 1; }

    () => 1

    function (a){ return a * 2; }

    (a) => { return a * 2; }

    (a) => a * 2

    a => a * 2

    function (a, b){ return a * b; }

    (a, b) => { return a * b; }

    (a, b) => a * b

    function (){ return arguments[0]; }

    (...args) => args[0]

    () => {} // undefined

    () => ({}) // {}

    this

    JavaScript中this的故事已经是非常古老了,每一个函数都有自己的上下文。以下例子的目的是使用jQuery来展示一个每秒都会更新的时钟:

    $('.current-time').each(function (){

    setInterval(function (){

    $(this).text(Date.now());

    }, 1000);

    });

    当尝试在setInterval的回调中使用this来引用DOM元素时,很不幸,我们得到的只是一个属于回调函数自身上下文的this。一个通常的解决办法是定义一个that或者self变量:

    $('.current-time').each(function (){

    var self = this;

    setInterval(function (){

    $(self).text(Date.now());

    }, 1000);

    });

    但当使用胖箭头函数时,这个问题就不复存在了。因为它不产生属于它自己上下文的this:

    $('.current-time').each(function (){

    setInterval(() => $(this).text(Date.now()), 1000);

    });

    arguments变量

    箭头函数与普通函数还有一个区别就是,它没有自己的arguments变量:

    function log(msg){

    const print = () => console.log(arguments[0]);

    print(`LOG: ${msg}`);

    }

    log('hello'); // hello

    再次重申,箭头函数没有属于自己的this和arguments。但是,你仍可以通过rest参数,来得到所有传入的参数数组:

    function log(msg){

    const print = (...args) => console.log(args[0]);

    print(`LOG: ${msg}`);

    }

    log('hello'); // LOG: hello

    关于yield

    箭头函数不能作为generator函数使用。

    最后

    箭头函数是我最喜欢的ES6特性之一。使用=>来代替function是非常便捷的。但我也曾见过只使用=>来声明函数的代码,我并不认为这是好的做法,因为=>也提供了它区别于传统function,其所独有的特性。我个人推荐,仅在你需要使用它提供的新特性时,才使用它:

    当只有一条声明(statement)语句时,隐式return。

    需要使用到父作用域中的this。

    展开全文
  • ES6箭头函数特性

    2018-07-17 17:07:57
    3.箭头函数没有arguments,使用rest参数代替。 4.不能作为构造器,即不能使用new 关键字。 5.箭头函数没有原型。 6.不能简单返回对象字面量,返回用var func = ()=>({...//必须用原括号括起来}) 7....
  • ES6 箭头函数this指向

    2019-09-22 19:38:18
    箭头函数有几个使用注意点。 (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。 (3)不可以使用...
  • 箭头函数转换 箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 // ES6写法 var handler = { id: "123456", init: function () { document.addEventListener( "click", (event) =>...
  • ES6特性箭头函数语法、如何正确使用箭头函数

    万次阅读 多人点赞 2018-07-03 13:45:49
    ES6标准新增了一种新的函数:Arrow Function(箭头函数)。 基础语法 通常函数的定义方法 ...使用ES6箭头函数语法定义函数,将原函数的“function”关键字和函数名都删掉,并使用“=>”连接参数...
  • ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,接下来通过本文给大家分享ES6箭头函数中的this,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,...
  • ES6箭头函数的this指向问题 今天依旧给大家带来的是一道前端的面试题,有关的是ES6中箭头函数的this指向问题,以及它能否被call,apply或者bind方法来改变。 箭头函数的this特性 正式解决问题前,我们需要先来了解下...
  • ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿 它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this 一针见血式总结: 普通函数中的this: 1. this...
  • JS ES6 箭头函数

    2020-10-22 11:02:22
    箭头函数特性 函数体内的 this 值,绑定的定义时所在的作用域的 this 不可以当作构造函数 不可以使用 arguments 对象 function fn (){} // 语法:()=>{} var f = () = {console.log(123)} f() // 123 var add...
  • 箭头函数 箭头函数提供了一种更加简洁的函数书写方式:参数 => 函数体 var f = v => v; // 等价于 var f = function(v){ return v; } f(1); // 1 当箭头函数没有参数或者有多个参数,要用 () 括起来 var f = ...
  • es6箭头函数 使用场景

    千次阅读 2017-04-25 17:07:52
    我们知道es6有很多的新特性,那么本篇我们就来详细介绍一下es6箭头函数。 对于一个知识点的运用无非是了解它的使用场景,这是灵活变通的基础。 匿名回调// 按钮的单事件 var btn = document.getElementById(...
  • es6箭头函数详解

    2019-06-17 15:31:58
    箭头函数es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过new关键字调用 没有原型...
  • es6有很多优秀的新特性,其中最有价值的特性之一就是箭头函数,他简洁的语法以及更好理解的this值都非常的吸引我。但是新事物也是有两面性的,箭头函数有他的便捷有他的优点,但是他也有缺点,他的优点是代码简洁,...
  • es6箭头函数 =>

    万次阅读 2016-11-29 18:29:13
    //上面的箭头函数等同于: var f = function(v) { return v; }; //如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。 var f = () => 5; // 等同于 var f = function () { return 5 }...
  • 参考:JavaScript reduce() 方法http://www.runoob.com/jsref/jsref-reduce.htmlES6新特性概览https://www.cnblogs.com/Wayou/p/es6_new_features.html 具体是 <不定参数> 这一章节和 traceur 调试...
  • ES6特性箭头函数

    2020-07-29 16:00:31
    箭头函数以及声明特点 ES6允许使用箭头(=>)定义函数 声明一个函数 // let fn = function() { // // } // ES6 let fn = (a, b) => { return a + b } this是静态的,this始终指向函数声明时所在作用域下的...
  • ES6箭头函数和它的作用域

    千次阅读 2016-07-17 08:33:40
    ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了作用域, 快捷方便的在现在使用以前我们用的技术, 减少了很多代码……但是如果你不了解箭头函数原理...
  •   箭头函数作为 ES6 关于函数扩展方面的一大特性,其实是很好了解和掌握的,即通过对比 ES6 和 ES5 规范下函数的写法上的区别便可快速入手。 案例展示   例一(无参数并返回简单数据类型的函数): //es6...
  • ES6箭头函数

    2020-06-12 17:09:33
    箭头函数 1、箭头函数是匿名函数 JS 中的箭头函数是匿名(anonymous)的,函数的name属性是空字符。 2、箭头函数没有自己的this,arguments,super或new.target,没有原型prototype,不能new对象。 如果你在箭头...
  • 箭头函数特性 不能通过new关键字调用,箭头函数没有[[Construct]]方法,所以不能被用作构造函数,如果通过new关键字调用箭头函数,程序会抛出错误。 没有原型 由于不可以通过new关键字调用箭头函数,因而没有构建...
  • ECMAScript6-ES6箭头函数:箭头函数语法、箭头函数里的this指向
  • 箭头函数的基本使用 我们学过了一些函数的定义方式,当然,箭头函数也是一种定义函数的方式: 1.方式一 const aaa=function(){ ...//3.ES6中的箭头函数 const ccc=(参数列表)=>{ } 箭头函数的参数和返回值 1...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,948
精华内容 5,179
关键字:

es6箭头函数的特性