让写函数更加简洁。
ES6 之前的写法
1
1
2
3
| function sum(x, y) {
return x + y;
}
|
2
1
2
3
4
| const s = function sum(x, y) {
return x + y;
}
console.log(s(1,2));
|
ES6 箭头函数
1
2
3
4
| const s = (x, y) => {
return x + y;
}
console.log(s(1, 2));
|
箭头函数写法
一句话方法体
1
2
| const s = (x, y) => x + y;
console.log(s(1, 2));
|
单参数
1
2
3
4
| const s = x => {
return x + 1;
}
console.log(s(1));
|
箭头函数里面的 this
之前的 this
1
2
3
4
5
6
7
8
9
| <body>
<button id="btn">按钮</button>
<script>
const oBtn = document.querySelector('#btn');
oBtn.addEventListener('click',function (){
this.style.backgroundColor = '#f00';
})
</script>
</body>
|
关于 this ，官方说指的是，对于当前对象的引用。
所以，这里面的 this 指的是 oBtn。
箭头函数的 this
1
2
3
4
5
6
7
8
9
| <body>
<button id="btn">按钮</button>
<script>
const oBtn = document.querySelector('#btn');
oBtn.addEventListener('click',() => {
this.style.backgroundColor = '#f00';
})
</script>
</body>
|
上述运行是错误的。
Uncaught TypeError: Cannot set property ‘backgroundColor’ of undefined
这个 this 的指向是 Window 顶层对象。
在箭头函数中是没有 this 的。根据，js 的语法规则，js 会自动寻找 this，因为箭头函数没有 this ，所以，js 会在作用域链的上面继续寻找，找到了 Window。
那些场景可以用 this
作为回调函数使用
比如
1
2
3
4
5
6
7
8
9
| <body>
<button id="btn">按钮</button>
<script>
const oBtn = document.querySelector('#btn');
oBtn.addEventListener('click',() => {
this.style.backgroundColor = '#f00';
})
</script>
</body>
|
根据上面的解释，这里的 this 指向的是 Window，所以，使用的时候一定要注意。
修改为
1
2
3
4
5
6
7
8
| <button id="btn">按钮</button>
<script>
const oBtn = document.querySelector('#btn');
let that = oBtn;
oBtn.addEventListener('click', () => {
that.style.backgroundColor = '#f00';
})
</script>
|
对象方法
看例子
1
2
3
4
5
6
7
| const o = {
name: "1",
showName: function () {
console.log(this.name);
}
}
o.showName();
|
如果改为箭头函数
1
2
3
4
5
6
7
| const o = {
name: "1",
showName: () => {
console.log(this.name);
}
}
o.showName();
|
什么都不输出。
原因，和前面相同，这里的 this 也是指向 Window。
ps: Window 有一个 name 属性，是一个空字符串。如果把 上面代码改为 name1 ,则输出为 undefined。
argments
传统方法
1
2
3
4
5
| function sum(x, y) {
console.log(arguments);
}
sum(5, 6);
|
有东西输出。
1
2
3
4
5
| const sum = (x, y) => {
console.log(arguments);
}
sum(5, 6);
|
报错。
ES5 的定义类
ES5
1
2
3
4
| function cat(name, sleep) {
this.name = name;
this.sleep = sleep;
}
|
箭头函数
1
2
3
4
5
6
| const cat = (name, sleep) => {
this.name = name;
this.sleep = sleep;
}
const c1 = new cat("1",50);
console.log(c1);
|
报错
Uncaught TypeError: cat is not a constructor
同样，箭头函数不适合原型方法。
举一个 ES5 的例子。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function Cat (name, age, color) {
this.name = name
this.age = age
this.color = color
}
Cat.prototype.foot = 4
Cat.prototype.makeSound = function () {
alert("喵喵")
}
Cat.prototype.sayName = function () {
alert(this.name)
}
var cat1 = new Cat('Tom', 3, 'black')
|
Cat.prototype.makeSound 这个就是原型方法。
