详解ES6(五)-箭头函数

在ES6中,箭头函数是其中最有趣的新增特性。顾名思义,箭头函数是一种使用箭头(=>)定义函数的新语法,但是它与传统的JavaScript函数有些许不同,主要集中在以下方面:

  • 没有this、super、arguments和new.target绑定,其值由外围最近一层非箭头函数决定
  • 不能通过new关键字调用
  • 没有原型
  • 不可以改变this的绑定
  • 不支持arguments对象
  • 不支持重复的命名参数

箭头函数的语法

先来看一个例子:

let reflect = value => value;
//相当于
let reflect = function(value){
    return value;
};

简单来说,就是箭头左边为参数,右边为函数体,如果要传入多个参数,可以这样写:

let sum = (num1, num2) => num1 + num2;

如果没有参数,要写括号,就像这样:

let getName = () => "Nicholas";

如果函数体超过一个表达式,即函数体为多个表达式,就需要加花括号:

let sum2 = (num1, num2) => {
    return num1 + num2;
};

如果想要让箭头函数向外返回一个对象字面量,则需要将该字面量包裹在小括号里:

let getTempItem = id => ({
    id: id,
    name: "temp"
});

创建立即执行函数表达式

我们时常会用到立即执行函数表达式,在ES5中我们经常用这种方法创建块级作用域,就像这样:

(function(){
	var count = 5;
	console.log(count);//5
})();

对于箭头函数也可以创建立即执行表达式,就像这样:

let person = ((name) => {
    return {
        getName: function () {
            return name;
        }
    };
})("Nicholas");
console.log(person.getName());

没有自己的this绑定

箭头函数的this值为由外围最近一层非箭头函数决定,即使使用call等函数为其指定也无效,我们看下面的例子:

//箭头函数也可以使用call等函数,但this值不会受到影响
this.name = "Jack";
var person = {name: "Job"};
//非箭头函数
var getName2 = function(age, job){ return this.name + " " + age + " " + job;};
console.log(getName2.call(person, 11, "none"));
console.log(getName2.apply(person, [11, "none"]));
var boundgetName = getName2.bind(person, 11, "none");
console.log(boundgetName());
//箭头函数
var getName = (age, job) => this.name + " " + age + " " + job;
console.log(getName.call(person, 11, "none"));
console.log(getName.apply(person, [11, "none"]));
var boundgetName = getName.bind(person, 11, "none");
console.log(boundgetName());

在这里插入图片描述
因此如果箭头函数准备使用call等函数,一般会这样写:

getName.call(null, 11, "none");

没有自己的arguments绑定

与this一样,箭头函数的arguments也是由外围最近一层非箭头函数决定,我们看下面这个例子:

function createArrowFunctionReturningArg() {
    return (index) => arguments[index];
}
var arrowFunction = createArrowFunctionReturningArg(2, 3, 4, 5, 6);
console.log(arrowFunction(1)); //3
console.log(arrowFunction(2)); //4 


猜你喜欢

转载自blog.csdn.net/qq_45467083/article/details/106610903