#博学谷IT学习技术支持#
目录
箭头函数基本使用
在ES6中可以使用 “箭头”(=>)来定义函数。
使用传统的方式定义一个函数。
示例代码如下:
// 使用传统方式定义函数
let f = function(x, y) {
return x + y;
}
console.log(f(3, 6));
通过上面的代码,可以发现传统方式来定义函数的时候,比较麻烦。
箭头函数的使用
let f = (x, y) => {
return x + y
};
console.log(f(9, 8));
在调用f这个函数的时候,将9和8传递给了x,y这两个参数,然后进行加法运算。
如果参数只有一个,可以省略小括号。
let f = num => {
return num / 2;
}
console.log(f(6));
如果没有参数,只需要写一对小括号就可以。
let f = () => {
return 9 / 3;
}
console.log(f());
上面我们写的代码中,发现函数体中只有一条语句,那么这时是可以省略大括号的。
let f = (x, y) => x + y;
console.log(f(3, 6));
把上面的代码转换成ES5的写法,发现和我们前面写的代码是一样的。
var f = function f(x, y) {
return x + y;
};
console.log(f(3, 6));
利用箭头函数直接返回对象
如果希望箭头函数直接返回一个对象,应该怎样写呢?
你可能认为很简单,可以采用如下的写法
let f = (id, name) => {
id: id,
userName: name
};
console.log(f(1, 'zs'));
但是上面的写法是错误的,因为这时大括号被解释为代码块,解决的办法是:在对象外面加上小括号,
所以,正确的写法如下:
let f = (id, name) => ({
id: id,
userName: name
});
console.log(f(1, 'zs'));
通过打印,发现输出的是一个对象。
可以采用如下的写法
let f = (id, name) => {
return {
id: id,
userName: name
}
};
console.log(f(1, 'zs'));
箭头函数中this的问题
let person = {
userName: 'ls',
getUserName() {
console.log(this.userName)
}
}
person.getUserName();
以上代码执行的结果为:'ls',并且在该程序中this
为当前的person对象。
将上面的代码修改一下,要求延迟1秒钟以后,再输出用户名的名称
let person = {
userName: 'ls',
getUserName() {
setTimeout(function() {
console.log(this.userName)
}, 1000)
}
}
person.getUserName();
上面的输出结果为:undefined
,因为在setTimeout中this指的是window,而不是person对象。
可以将代码进行如下的修改:
let person = {
userName: 'ls',
getUserName() {
let that = this;
setTimeout(function() {
console.log(that.userName)
}, 1000)
}
}
person.getUserName();
在进入setTimeout这个方法之前,提前将this赋值给that变量,然后在setTimeout中使用that,那么这时that指的就是person对象。
上面的解决方法比较麻烦,可以修改成箭头函数的形式,代码如下所示:
let person = {
userName: 'wangwu',
getUserName() {
setTimeout(() => {
console.log(this.userName);
},1000)
}
}
person.getUserName();
通过上面的代码,可以发现在箭头函数中直接使用this是没有问题的。
在箭头函数中是没有this的,如果在箭头函数中使用了this,那么实际上使用的是外层代码块的this. 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
找出定义箭头函数的上下文(即包含箭头函数最近的函数或者是对象),那么上下文所处的父上下文即为this.
setTimeout
函数中使用了箭头函数,箭头函数中用了this,
而这时this
指的是外层代码块也就是person
,所以箭头函数中使用的this指的就是person
箭头函数不适合的场景
第一:不能作为构造函数,不能使用new
操作符
构造函数是通过new
操作符生成对象实例的,生成实例的过程也是通过构造函数给实例绑定this
的过程,而箭头函数没有自己的this
,因此不能使用箭头函数作为构造函数。
如下代码:
function Person(name) {
this.name = name;
}
var p = new Person("zhangsan"); //正常
以上是我们前面经常使用的一种方式,没有问题
使用箭头函数作为构造函数时的情况
let Person = (name) => {
this.userName = name;
};
let p = new Person("lisi");
当执行上面的程序的时候,会出现错误
第二:没有prototype
属性
因为在箭头函数中没有this
,也就不存在自己的作用域,因此箭头函数是没有prototype
属性的。
let Person = (name) => {
this.userName = name;
};
console.log(Person.prototype); // undefined
第三:不适合将原型函数定义成箭头函数
在给构造函数添加原型函数时,如果使用箭头函数,其中的this
会指向全局作用域window
,而不会指向构造函数。
因此并不会访问到构造函数本身,也就无法访问到实例属性,失去了原型函数的意义。
function Person(name) {
this.userName = name;
}
Person.prototype.sayHello = () => {
console.log(this); // window
console.log(this.userName); // undefined
};
let p = new Person("zhangsan");
p.sayHello();