理解ES6 “箭头”函数（=>）

bawn 发布于2019-08-21 17:37 / 2995人阅读

摘要：允许使用箭头定义函数。等同于如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。如果箭头函数直接返回一个对象，必须在对象外面加上括号。匿名函数的指向。

ES6允许使用“箭头”（=>）定义函数。

var f = v => v;

等同于：

var f = function(v) {
  return v;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };


var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

//若你想使用标准的函数体，或者函数体内可能有更多的语句要执行，则要用大括号将函数体括起来，并明确定义返回值。
var sum = (num1, num2) => { return num1 + num2; }

//如果箭头函数直接返回一个对象，必须在对象外面加上括号。
var getTempItem = id => ({ id: id, name: "Temp" });

//以上例子出处  https://www.cnblogs.com/huansky/p/5684867.html

至此，我们已经理解怎么用它了；那么它跟普通的function定义函数最大的区别是什么？

箭头函数中的 this

箭头函数中的 this，指向的是它定义时所在的this；实际上，箭头函数没有自己的this；它的作用域是词法作用域，会跟着作用域链找到最近的一个this引用；

var name = 456
var obj = {
        name:"123",
        fn:function () {
            console.log(this.name);//123 对象的属性方法中的this 指向对象。
            setTimeout(function () {
                console.log(this.name)//456 匿名函数的 this 指向window。
            },1000);
            setTimeout(()=>{console.log(this.name)},2000);//123 找到this是指向obj的；
            obj.do(()=>{console.log(this)});//obj对象 找到定义时的this是指向obj的（即obj.fn 的this）；
        },
        do:function (fn) {
            fn();
        }
    };
    obj.fn();

匿名函数的 this 始终是指向window 的

var obj = {
          fn:function () {
            (function () {
                console.log(this); //window
            })();
            console.log(this); //obj
        }
    }
    obj.fn();

普通函数的this 可以这样概括

（来自知乎）

函数执行时，this 总是指向调用该函数的对象，规则可以简单概括如下：

有对象就指向调用对象

没调用对象就指向全局对象

用new构造就指向新对象

通过 apply 或 call 或 bind 可以改变this的指向

其实也就是根据点的左边是什么东西来判断。

this用于继承

方法 call ，可以改变执行上下文环境。通过call去拿到其他对象的方法，继承为自己的方法；

function superClass () {     
    this.a = 1;     
    this.print = function () {         
        console.log(this.a);     
    } 
}  
function subClass () {     
    superClass.call(this);     
    this.print(); 
}  
subClass(); // 1

subClass通过call方法，继承了superClass的print方法和a变量，同时subClass还可以扩展自己的其他方法

GPU云服务器云服务器箭头函数这个函数怎么理解 ES6 es6-系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89784.html

面试题目别有洞天 -> 从es6优雅解法，到降级polyfill，再到redux reduce

摘要：每次被执行时，和被传入，这个根据进行累加或者是自身消减，英文原意，进而返回最新的。之前的一篇文章：从一道面试题，到我可能看了假源码讨论了bind方法的各种进阶Pollyfill，今天再分享一个有意思的题目。从解这道题目出发，我会谈到数组的Reduce方法，ES6特性和Redux数据流框架中Reducer的命名等等。一道典型的题目，却如唐代诗人章碣《对月》诗中所云：别有洞天三十六，水...

econi 2019-08-21 11:33 评论0 收藏0
让你的代码更简短，更整洁，更易读的ES6小技巧

摘要：让你的代码更简短，更整洁，更易读的小技巧写在文章前面这篇文章翻译自文章就代码整洁方面对进行了总结。如果你正在使用的代码使用的语法，这个是你需要注意的事情。更多还提供了我们很多很多其他的方式来使我们的代码更简洁，更易读，以及更稳定。让你的代码更简短，更整洁，更易读的ES6小技巧写在文章前面这篇文章翻译自ES6 tips and tricks to make your code cl...

wpw 2019-08-26 11:42 评论0 收藏0
学习js中的'this'关键字

　　在JavaScript中‘this’关键字是一个非常重要的概念，我们虽然知道它重要，但它也十分的晦涩难懂，也给我们学习造成不小的困扰。　　什么是'this'关键字　　'this'关键字是为每个执行上下文(每个函数)创建的一个特殊变量；所以一般来说，在使用'this'关键字的函数中，'this'永远是取其所有者的值。总结一句话是该函...

3403771864 2022-10-23 14:17 评论0 收藏0