ES6新特性之箭头函数与function的区别

CarterLi 发布于2019-08-26 13:36 / 1036人阅读

摘要：写法不同的写法箭头函数的写法的指向不同在中，指向的是调用该函数的对象使用定义的函数而在箭头函数中，永远指向定义函数的环境。变量提升存在变量提升，可以定义在调用语句后箭头函数以字面量形式赋值，是不存在变量提升的

1.写法不同

// function的写法
function fn(a, b){
    return a+b;
}

// 箭头函数的写法
let foo = (a, b) =>{ return a + b }

2.this的指向不同

在function中，this指向的是调用该函数的对象；

//使用function定义的函数
function foo(){
    console.log(this);
}
var obj = { aa: foo };
foo(); //Window
obj.aa() //obj { aa: foo }

而在箭头函数中，this永远指向定义函数的环境。

//使用箭头函数定义函数
var foo = () => { console.log(this) };
var obj = { aa:foo };
foo(); //Window
obj.aa(); //Window

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => {
     this.s1++;
     console.log(this);
  }, 1000); // 这里的this指向timer
  // 普通函数
  setInterval(function () {
    console.log(this);
    this.s2++; // 这里的this指向window的this
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log("s1: ", timer.s1), 3100);
setTimeout(() => console.log("s2: ", timer.s2), 3100);
// s1: 3
// s2: 0

3.箭头函数不可以当构造函数

//使用function方法定义构造函数
function Person(name, age){
    this.name = name;
    this.age = age;
}
var lenhart =  new Person(lenhart, 25);
console.log(lenhart); //{name: "lenhart", age: 25}

//尝试使用箭头函数
var Person = (name, age) =>{
    this.name = name;
    this.age = age;
};
var lenhart = new Person("lenhart", 25); //Uncaught TypeError: Person is not a constructor

另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

4.变量提升

function存在变量提升，可以定义在调用语句后；

foo(); //123
function foo(){
    console.log("123");
}

箭头函数以字面量形式赋值，是不存在变量提升的；

arrowFn(); //Uncaught TypeError: arrowFn is not a function
var arrowFn = () => {
    console.log("456");
};

console.log(f1); //function f1() {}   
console.log(f2); //undefined  
function f1() {}
var f2 = function() {}

云服务器 GPU云服务器 es6新特性 es6的新特性 html5新特性之webrtc function函数

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

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

ECMAScript 6新特性印象之一：新语法

摘要：下例实现了一个数组的迭代器在中，可迭代数据结构比如数组都必须实现一个名为的方法，该方法返回一个该结构元素的迭代器。原话是还可以传递返回值。前记按照规划，明年年中，ECMAScript 6(ES6)就要正式发布了。最近抽空看了Dr. Axel Rauschmayer的几篇文章和演讲PPT，对新特性有了些了解。趁没忘，抓紧记录下，夹杂自己的感受。计划分三部分：新语法...

马忠志 2019-08-21 12:28 评论0 收藏0
ES6 class继承与super关键词深入探索

摘要：请看对应版本干了什么可知，相当于以前在构造函数里的行为。这种写法会与上文中写法有何区别我们在环境下运行一下，看看这两种构造函数的有何区别打印结果打印结果结合上文中关于原型的论述，仔细品味这两者的差别，最好手动尝试一下。 ES6 class 在ES6版本之前，JavaScript语言并没有传统面向对象语言的class写法，ES6发布之后，Babel迅速跟进，广大开发者也很快喜欢上ES6带...

jubincn 2019-08-26 10:58 评论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学习笔记之箭头函数

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

Vultr 2019-08-19 18:12 评论0 收藏0