es6箭头函数的理解及面试题

2019-03-26 16:27:52 浏览数 (1)

箭头函数的介绍

箭头函数是es6当中对函数的一种全新表示法。其将函数的简洁性发扬到了极致!先来看一个最简单的箭头函数:

代码语言:javascript复制
let fn=v=>v;
console.log(fn("好酷的箭头函数!"));//好酷的箭头函数!

初次接触箭头函数的人可能会为其简洁性的语法而惊讶!和之前的写法进行一次比较:

代码语言:javascript复制
let fn=function(v){
    return v;
}
console.log(fn("好酷的箭头函数!"));//好酷的箭头函数!
箭头函数的写法

1、如果只有一条语句,可以将{}和return省略掉

代码语言:javascript复制
v=>v v;
//相当于
function (v){.
    return v v;
}

2、如果语句为多条,则不可以省略{}和return

代码语言:javascript复制
v=>{
    var sum=0;
    for(let i=0;i<v;i  ){
        sum =i;
    }
    return sum;
}

有两点需要注意:

*当没有参数或有多个参数时,需要用括号()括起来:
代码语言:javascript复制
(num1,num2)=>num1 num2;
*当省略{}和return时,如果返回的内容是一个对象,对象需要用括号()括起来:
代码语言:javascript复制
()=>({name:"laoliu"});
箭头函数不能用于构造函数

先看不是箭头函数的构造函数代码,一切正常!

代码语言:javascript复制
var Box=function(age){
    this.myAge=age;
}
var obj=new Box(20);
console.log(obj.myAge);//20

如果改为箭头函数的形式,再来看看:

代码语言:javascript复制
var Box=age=>{
    this.myAge=age;
}
var obj=new Box(20);//Box is not a constructor
console.log(obj.myAge);
箭头函数没有prototype属性
代码语言:javascript复制
var Foo = () => {};
console.log(Foo.prototype); // undefined
箭头函数不绑定arguments

一道面试题可以说明一切:

代码语言:javascript复制
var arguments = 42;
var fn = () => arguments;
console.log(fn()); // 42
function foo() {
    var f = (i) => arguments[0] i;
    return f(2);
}
console.log(foo(1)); // 3
箭头函数不绑定this

箭头函数中的this指向的是定义时的this,而不是执行时的this。也就是说箭头函数没有自己的this,其内部的this绑定到它的外围作用域。对象内部的箭头函数若有this,则指向对象的外围作用域。 再来看道面试题:

代码语言:javascript复制
window.color = "red";
//let 声明的全局变量不具有全局属性,即不能用window.访问
let color = "green";
let obj = {
    color: "blue",
    getColor: () => {
        return this.color;//this指向window
    }
};
let sayColor = () => {
    return this.color;//this指向window
};
obj.getColor();//red
sayColor();//red
箭头函数无法使用 call()或 apply()来改变其运行的作用域。

再来一道面试题

代码语言:javascript复制
window.color = "red";
let color = "green";
let obj = {
  color: "blue"
};
let sayColor = () => {
  return this.color;
};
sayColor.apply(obj);//red

0 人点赞