ES6中的箭头函数

箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时。我们通过一个例子来理解:

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(function() {
            this.func();
        }, 100);
    }
};

o.test(); // TypeError : this.func is not a function

如果把代码改成这样

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        var _this = this;
        setTimeout(function() {
            _this.func();
        }, 100);
    }
};

o.test();

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了箭头函数的 this 始终指向函数定义时的 this,而非执行时。所以我们将上面的代码修改如下:

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(() => { this.func() }, 100);
    }
};

o.test();

这回this就指向o了。

时间: 2024-11-03 21:39:05

ES6中的箭头函数的相关文章

es6学习笔记--箭头函数

基本用法 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 = funct

从 ES6 高阶箭头函数理解函数柯里化

前言:第一次看到多个连续箭头函数是在一个 react 项目中,然鹅确认了下眼神,并不是对的人,因为看得一脸懵逼.em......于是开始各种搜索,先是知道了多个连续箭头函数就是 es6 的多次柯里化的写法,对于函数柯里化,很久以前就知道这个名次,但是并不理解,也没有去了解.为了弄明白多个连续箭头函数,开始了简化之路. 首先看到了这样的一个例子: let add = a => b => a + b 以上是一个很简单的相加函数,把它转化成 ES5 的写法如下: let add = function

ECMAscript中的箭头函数

ECMAscript6中新增了一些新的内容,今天来谈谈其中的箭头函数: 箭头函数: 箭头函数相当于匿名函数,并且简化了函数定义. 格式: (参数)=>{函数体}; 相当于匿名函数: function(参数){函数体}; 箭头函数与匿名函数的区别就是this的指向不同: 1.箭头函数中this默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window: 2.普通函数中的this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj:

ES6中的async函数

一.概述 async 函数是 Generator 函数的语法糖 使用Generator 函数,依次读取两个文件代码如下 var fs = require('fs'); var readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error, data) { if (error) return reject(error); re

map中使用箭头函数遇到的坑

箭头函数提供了更简洁和更短的语法,其中一个可用功能是可以将函数编写为具有隐式返回值的lambda表达式.这对于功能样式代码很方便,比如使用函数映射数组: const numbers = [1,2,3,4]; numbers.map(n => n * n); 这个箭头函数将按照预期的方式工作,它将值自身相乘并返回到包含的新数组[1, 4, 9, 16] 但是,如果你尝试映射到对象,例如,假设将数字映射到包含如下值的对象数组: const numbers = [1,2,3,4]; numbers.m

ECMAScript中的箭头函数 => 使用注意事项

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数. 使用时要注意的点: 1. 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 例如: page({ A:function(){ wx.login({ success:function(res){ console.log(this)                    // 此情况

es6 中的generator函数控制流程

Generator函数跟普通函数的写法有非常大的区别: 一是,function关键字与函数名之间有一个星号: 二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是"产出"). 最简单的Generator函数如下: function* g() { yield 'a'; yield 'b'; yield 'c'; return 'ending'; } g(); // 返回一个对象 g函数呢,有四个阶段,分别是'a','b','c','ending'. Gen

ES6 中箭头函数 this 指向问题

在上一讲当中,我们知道了es5 中函数的 this 指向问题,即:指向直接调用它的那个对象.那么,在es6 中,箭头函数中的 this 指向是不是会有所不同呢?答案是必然的,今天我们就来聊聊箭头函数的this指向~ 首先来简单对比一下: [es5普通函数] // es5: var str = 'window' var obj = { str: 'obj', fn: function () { console.log(this.str) } } obj.fn() // obj [es6箭头函数]

es6之箭头函数

es6之箭头函数 es6中的箭头函数实际上是一种语法糖,使用起来会更加方便. 1. 即它允许使用箭头(=>)来定义函数. 如 var f = v =>v; 这个箭头函数就等同于: var f = function (v) { return v; }; 2. 如果不需要给这个函数传递参数,就使用圆括号来代表参数部分,如下所示: var f = () =>8; 这个箭头函数就等同于: var f = function () { return 8; }; 3.如果传入的参数多于一个,同样也需要