es6箭头函数

UnixAgain 发布于2019-08-26 10:59 / 1797人阅读

摘要：但是箭头函数并没有自己的其是继承了外层执行环境的，且不能改变，因此不能作为构造函数，此时，引擎会在报错。不能作为事件的回调在中，事件的回调函数中，会动态的指向监听的对象，但是由于监听是一个全局函数，所以箭头函数的回调中指向。

箭头函数

es6中添加了函数新的定义语法——箭头函数，当有大于一个形参的时候，必须使用()代表部分参数，函数体大于一行时，必须使用{}将函数体括起来，并使用return返回。

箭头函数不会创建自己的this

箭头函数会在自己的作用域链上的上一层寻找this。所以箭头函数会在定义时找到自己外层的this，并继承这个this的值。在后面的任何操作中，this的值都不会改变。
箭头函数的实现

var a =  1;
function func() {
    setTimeout(() => {
        console.log(this.a);
    }, 1000);
}
func.call({a: 2});
// 2

setTimeout使用的是箭头函数，所以this在定义的时候就确定了，继为外层func的this的值。在函数执行的时候，通过call改变了func的this指向{a:2},所以箭头函数继承func在执行环境中的指向，所以打印输出2。

普通函数的实现

var a =  1;
let func = function () {
    setTimeout(function () 
    {
        console.log(this.a);
    }, 1000);
}
func.call({a: 2});
//1

setTimeout使用的是普通的函数，所以其this指向为函数运行时的所在的作用域。在1秒之后函数是在全局作用域中执行的，此时this指向window对象，所以输出为1。

不能定义对象方法

let obj = {
    name: "lisi",
    a: function() 
    {
        console.log(this.name);
    },
    b: () =>{
        console.log(this.name);
        this.a();
    }
}

let name = "zhangsan";
obj.a();
obj.b();

//lisi
//zhangsan
//Uncaught TypeError: this.a is not a function

JS中对象方法的定义方式是在对象上定义一个指向函数的属性，当方法被调用的时候，方法内的this就会指向方法所属的对象。所以方法a中的this指向对象obj。但是在obj对象的{}无法形成一个多带带的作用域，所以obj是在window作用域中，方法b为箭头函数，指向上层obj的this === window，所以a方法输出obj的name属性，b方法输出全局name的值。且由于全局作用域上没有a方法，所以this.a()执行报错。所以用箭头函数定义对象方法时，不会有预想的输出。当要定义对象方法时，请使用函数表达式或者方法简写（es6）。

箭头函数不能当作构造函数

function Person (name, age) {
     this.age = age;
     this.name = name;
}
let person = new Person("lisi", 23);
console.log(person.name, person.age);
//lisi 23

js在new 生成一个新的实例对象的时候，首先在内部生成一个新的空对象，然后将this指向该对象，接着执行构造函数的指令，最后将该对象作为实例返回。

let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let person = new Person("lisi", 23);
console.log(person.name, person.age);
//Uncaught TypeError: Person is not a constructor

但是箭头函数并没有自己的this,其this是继承了外层执行环境的this，且不能改变，因此不能作为构造函数，此时，js引擎会在报错。Person不是一个构造函数。

this的指向改变

箭头函数this的指向不会因为call()、bind()、apply()而改变

var a = "haha"
let func = () =>{
    console.log(this.a)
}
func();
func.bind({a: 1})()
func.apply({a: 2});
func.call({a: 3});
//haha
//haha
//haha
//haha

在js中，可以使用bind()、apply()、call()来动态绑定函数的作用域，但是在箭头函数中，this由于已经固化在上层作用域链上，所以这三种方法不能改变this的指向，且不报错。

箭头函数不能使用arguments、super、new.target

function foo() {
  setTimeout(() => {
    console.log("args:", arguments);
  }, 100);
}

foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]

由于定时器的回调函数是一个箭头函数，所以其this指向上一层的foo函数的环境中的值。

在es6中可以使用rest参数代替arguments来访问函数的参数列表

let func = (...args) => {
    console.log(args);
}

func(1, 2, 3, 4, 5);
//[1,2,3,4,5]

没有原型

由于箭头函数没有自己的this，,所以箭头函数没有自己的原型。

let sayHi = () => {
    console.log("Hello World !")
};
console.log(sayHi.prototype); // undefined

不能作为事件的回调

在js中，事件的回调函数中，this会动态的指向监听的对象，但是由于监听是一个全局函数，所以箭头函数的回调中this指向window。

var button = document.getElementById("press");
button.addEventListener("click", () => {
  this.innerHtml = "hello"
});

在全局上下文下定义的箭头函数执行时 this 会指向 window，当单击事件发生时，浏览器会尝试用 button 作为上下文来执行事件回调函数，但是箭头函数预定义的上下文是不能被修改的，这样 this.innerHTML 就等价于 window.innerHTML，而后者是没有任何意义的。

GPU云服务器云服务器箭头函数 ES6 es6-系列 ES6入门

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

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

es6 - 箭头函数

摘要：也就是说箭头函数的的值不再根据调用时上下文确定，而是像普通变量那样根据定义时的作用域链进行查找。箭头函数中的依然要根据定义时的作用域链进行查找。知乎这篇文章对箭头函数的一些不适合的场景进行了总结，可以作为参考。 es6 - 箭头函数哇，箭头函数...，听起来好NB，但是如果你知道它是因为使用了=>这样类似箭头的符号，所以才叫箭头函数。瞬间感觉：呵，这名字起的...。 es6增加了...

13651657101 2019-08-26 11:46 评论0 收藏0
ES6学习笔记之箭头函数

摘要：特性介绍箭头函数是新增的特性之一，它为这门语言提供了一种全新的书写函数的语法。用生成的函数会定义一个自己的，而箭头函数没有自己的，而是会和上一层的作用域共享。本文同步自我得博客：http://www.joeray61.com JS中的箭头箭头在JS里并不算是个新鲜的玩意儿，一直以来，JS都支持-->这样的箭头。很早的时候有些浏览器还不支持JS，当时的人们为了兼容这些浏览器，需要这...

Vultr 2019-08-19 18:12 评论0 收藏0
深入ES6：箭头函数

摘要：令人震惊的箭头函数引入了写入函数的新语法。使用箭头函数创建简单对象时有一个警告。代码因此被默默地解释为一个不执行任何操作并返回未定义的箭头函数。内部函数是一个箭头函数，所以它从封闭范围继承此函数。箭头从一开始就一直是JavaScript的一部分。第一个JavaScript教程建议在HTML注释中包装内联脚本。这会阻止不支持JS的浏览器错误地将JS代码显示为文本。你会写这样的东西： ...

MasonEast 2019-08-22 17:14 评论0 收藏0
ES6 箭头函数从了解到深入

摘要：有传闻说，箭头函数的语法，是受到了的影响，并且它与中的语法一样，共享上下文。箭头函数是新增加的一个特性。箭头函数没有自己的值，其值是通过继承其它传入对象而获得的通常来说是上一级外部函数的的指向。箭头函数 1. 简单的定义：胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，箭头函数的语法=>，...

Eminjannn 2019-08-20 16:37 评论0 收藏0
ES6~你跟箭头函数升华之路

摘要：箭头函数简单的定义胖箭头函数，又称箭头函数，是一个来自又称的全新特性。箭头函数是新增加的一个特性。使用箭头函数的注意点箭头函数在参数和箭头之间不能换行。值得注意的一点就是对象的指向是可变的，但在箭头函数内是固定的。箭头函数 1. 简单的定义：胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，...

Faremax 2019-08-21 17:16 评论0 收藏0
关于ES6中箭头函数的this问题

摘要：对象的指向是可变的，但是在箭头函数中，它是固定的。同样的由于箭头函数没有自己的所以传统的显性绑定无效内部的指向外部在的学习中，的指向问题一直是个难点，特别是在对象方法中使用时，必须更加小心。由此箭头函数在很大程度上减少了我们的困扰。什么是箭头函数用法 ES6 允许使用箭头（=>）定义函数测试 var p1 = document.getElementById(test1)...

LeviDing 2019-08-22 10:53 评论0 收藏0