关于es6的箭头函数使用与内部this指向

特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法。

‘use strcit‘;
let arr = [1,2,3];
//ES5
let es5 = arr.map(function(n){
    return n*2;
});
//ES6
let es6 = arr.map(n => n*2);
console.log(es5);    //[2,4,6]
console.log(es6);    //[2,4,6]

箭头函数简化了原先的函数语法,不需要再写 function ,如果函数体只有一行代码的话连 return 都不用写,这个特性对于热衷于简化流程和工作的程序员来说相当对胃口。

箭头函数支持两种模式的函数体写法,我们姑且叫他简洁函数体和块级函数体。

‘use strcit‘;
// 简洁函数体
let fn = x => x * x;

// 块级函数体
let fn = (x, y) => {return x + y;};

简介函数体默认会把表达式的结果返回,块级函数体需要手动 return 。如果想要返回一个对象又想使用简洁函数体的话,需要这么写:

‘use strcit‘;
let fn = () => ({});
fn();   // {}

如果写成 var fn = () => {} ,那么执行 fn() 只能返回 undefined 。

‘use strict‘;
//第一种
let Person = function(){
    this.age = 2;
    let that = this;
    setTimeout(function(){
     that.age++;
        console.log(that.age);
    },1000);
};

//第二种
let Person = function(){
    this.age = 2;
    setTimeout(function(){
     this.age++;
        console.log(this.age);
    }.bind(this),1000);
};
new Person();

之前我们想操作setTimeout参数function内部的this可能会用上述两种方法,看上去不错了, 但是现在有了箭头函数就不一样了,代码如下:

‘use strict‘;
let Person = function(){
    this.age = 2;
    setTimeout(() => {
     this.age++;
        console.log(this.age);
    },1000);
};
new Person();  

由于箭头函数已经绑定了this 的值,即使使用apply或者call也不能只能起到传参数的作用,并不能强行改变箭头函数里的this。

‘use strict‘;
let obj = {
    x:1,
    show1:function(y){
        let fn = y => y+this.x;
        return fn(y);
    },
    show2:function(y){
        let fn = v => v + this.x;
        let whatever = {
            x: 2
        };
        return fn.call(whatever, y);
    }
};
console.log(obj.show1(1));    //2
console.log(obj.show2(2));    //3

箭头函数不能与new 关键字一起使用,会报错

‘use strict‘;
let Fn = () => {
    this.a = 1;
};
let f = new Fn();    // Error
时间: 2024-10-23 05:57:34

关于es6的箭头函数使用与内部this指向的相关文章

ES6学习--箭头函数

1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + num2; [1,2,3].map(x => x * x); 2. 箭头函数基本特点 (1). 箭头函数this为父作用域的this,不是调用时的this 箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind.普通函数的this指向调用它的那个对象. let pe

es6之箭头函数

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

ES6中箭头函数的作用

我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => "abc"; let test2=() => { return "abc"}; let sum=(a,b) => a+b; 比如上面的3个ES6的箭头函数的写完,如果用ES5就像下面的写完一样. 其实其等同于下面的ES5的写法: function test1() { return "abc" } functio

ES6的箭头函数

ES6的箭头函数 普通函数 let f2 = function(a) { return a; } f1(1); //1 箭头函数 // 参数 => 函数体let f1 = v => v;f1(1); //1 这两种写法都是输出1,相当于把function给省略了,再在括号后面加上=> let show1 = function () { console.log('show1'); } let show2 = () => { console.log('show2'); } show1(

ES6中箭头函数与普通函数this的区别

普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window 3.在严格模式下,没有直接调用者的函数中的this是 undefined 4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象 箭头函数中的this 默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能

ES6的箭头函数详解:

箭头函数是ES6中新增一个函数表达形式,它是对函数的一种简化ES6允许使用"箭头"(=>)定义函数. Eg: var f = v => v; 等同于之前 var f = function(v) { return v; }; const Even = n => n % 2 == 0; const Square = n => n * n; 注: 箭头函数就是省略了function 参数集与函数体之间一定要有一个箭头=> 对于参数集而言: 零个参数用 () 表示

ES6笔记② 箭头函数

特性介绍 箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. //ES5 function fun(x,y){ return x+y; } console.log(fun(5,10));//15 //ES6 var fun6 = (x,y) => {return x+y;} console.log(fun6(6,10));//16 ES6简化了声明函数,不需要再写 function . 好像除了简化代码,并没有什么新奇的对不对,那我们往下慢慢看. —————————

Es6 之箭头函数 初学

不积跬步,无以至千里;不积小流,无以成江海! // ES5 var selected = allJobs.filter(function (job) { return job.isSelected(); }); // ES6 var selected = allJobs.filter(job => job.isSelected()); 当你只需要一个只有一个参数的简单函数时,可以使用新标准中的箭头函数,它的语法非常简单:标识符=>表达式.你无需输入 function 和 return,一些小括

进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题

首先复习下普通函数里的this指向: 1 function test(){ 2 console.log(this) 3 } 4 test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数  函数里的this就指向谁,test()等价于window.test(),所以是window 1 var name="outername" 2 var o={ 3 name:"innername", 4 getname:function(){ 5 consol