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 person = {
    name:‘jike‘,
    init:function(){
        //为body添加一个点击事件,看看这个点击后的this属性有什么不同
        document.body.onclick = ()=>{
            alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?
        }
    }
}
person.init();

上例中,init是function,以person.init调用,其内部this就是person本身,而onclick回调是箭头函数,
其内部的this,就是父作用域的this,就是person,能得到name。

let person = {
    name:‘jike‘,
    init:()=>{
        //为body添加一个点击事件,看看这个点击后的this属性有什么不同
        document.body.onclick = ()=>{
            alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?
        }
    }
}
person.init();

上例中,init为箭头函数,其内部的this为全局window,onclick的this也就是init函数的this,也是window,
得到的this.name就为undefined。

(2). 箭头函数不能作为构造函数,不能使用new

//构造函数如下:
function Person(p){
    this.name = p.name;
}
//如果用箭头函数作为构造函数,则如下
var Person = (p) => {
    this.name = p.name;
}

由于this必须是对象实例,而箭头函数是没有实例的,此处的this指向别处,不能产生person实例,自相矛盾。

(3). 箭头函数没有arguments,caller,callee

箭头函数本身没有arguments,如果箭头函数在一个function内部,它会将外部函数的arguments拿过来使用。
箭头函数中要想接收不定参数,应该使用rest参数...解决。

let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

(4). 箭头函数通过call和apply调用,不会改变this指向,只会传入参数

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1));  // 11
console.log(obj2.c(1)); // 11

(5). 箭头函数没有原型属性

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ?}

(6). 箭头函数不能作为Generator函数,不能使用yield关键字

(7). 箭头函数返回对象时,要加一个小括号

var func = () => ({ foo: 1 }); //正确
var func = () => { foo: 1 };   //错误

(8). 箭头函数在ES6 class中声明的方法为实例方法,不是原型方法

//deom1
class Super{
    sayName(){
        //do some thing here
    }
}
//通过Super.prototype可以访问到sayName方法,这种形式定义的方法,都是定义在prototype上
var a = new Super()
var b = new Super()
a.sayName === b.sayName //true
//所有实例化之后的对象共享prototypy上的sayName方法

//demo2
class Super{
    sayName =()=>{
        //do some thing here
    }
}
//通过Super.prototype访问不到sayName方法,该方法没有定义在prototype上
var a = new Super()
var b = new Super()
a.sayName === b.sayName //false
//实例化之后的对象各自拥有自己的sayName方法,比demo1需要更多的内存空间

因此,在class中尽量少用箭头函数声明方法。

(9). 多重箭头函数就是一个高阶函数,相当于内嵌函数

const add = x => y => y + x;
//相当于
function add(x){
  return function(y){
    return y + x;
  };
}

原文地址:https://www.cnblogs.com/1571523732-qq/p/10060209.html

时间: 2024-10-11 06:22:17

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.如果传入的参数多于一个,同样也需要

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的箭头函数详解:

箭头函数是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的箭头函数使用与内部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] 箭头函数简化了原先的函数语法,不需要再写 functi

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学习之函数扩展

函数默认参数 function test(x = 1, y = 2) { return x + y } test(5, 6) //11 test() //3 若默认参数在必须参数之前,要想取得默认参数,只有当传入的值为undefined才能取到 function test(x = 1, y) { console.log(x,y) } test(5, 6) //5,6 test(1) //3 undefined test(null,1) //null 1 test(undefined,1) //1

进阶路上有你我-相互相持篇之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