mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 14:40:55 +08:00
changed
This commit is contained in:
parent
cec8fb5161
commit
e5497f3510
@ -311,6 +311,80 @@ CSS选择器用以筛选出要添加样式的元素。
|
||||
|
||||
#### 2.2.3.5 ES6+特性
|
||||
- **箭头函数**:简化函数定义。
|
||||
|
||||
ES6允许使用 “箭头”( => )定义函数。
|
||||
|
||||
|
||||
示例:
|
||||
```javascript
|
||||
let v = v => v
|
||||
|
||||
// 等同于
|
||||
let f = function(f){
|
||||
return f
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
如果箭头函数 不需要参数 或 需要多个参数 ,就在剪头前使用()括起来参数部分。
|
||||
```javascript
|
||||
let f = () => 5
|
||||
// 等同于
|
||||
let f = function() { return 5 }
|
||||
|
||||
let sum = (num1, num2) => num1 + num2
|
||||
// 等同于
|
||||
let sum = function(num1, num2){
|
||||
return num1 + num2
|
||||
}
|
||||
|
||||
```
|
||||
箭头函数的一个用处是简化回调函数。
|
||||
```javascript
|
||||
// 普通函数写法
|
||||
let values = [2,5,8,6]
|
||||
|
||||
let result = values.sort(function (a, b){
|
||||
return a - b
|
||||
})
|
||||
console.log(result) // 2,5,6,8
|
||||
|
||||
// 箭头函数写法
|
||||
let values = [2,5,8,6]
|
||||
|
||||
let result = values.sort((a, b) => a - b)
|
||||
console.log(result) // 2,5,6,8
|
||||
|
||||
```
|
||||
**使用注意点**
|
||||
> 箭头函数没有自己的 this 对象。
|
||||
>
|
||||
> 不可以当作构造函数,也就是说,不可以对箭头函数使用new命令,否则会抛出一个错误。
|
||||
|
||||
> 对于普通函数来说,内部的 this 指向函数运行时所在的对象,但是这一点对箭头函数不成立。它没有自己的 this 对象,内部的 this 就是定义时上层作用域中的 this。也就是说,箭头函数内部的 this 指向是固定的,相比之下,普通函数的 this 指向是可变的。
|
||||
|
||||
```javascript
|
||||
function Timer(){
|
||||
this.s1 = 0
|
||||
this.s2 = 0
|
||||
// 箭头函数
|
||||
setInterval(() => {
|
||||
this.s1++;
|
||||
console.log("****", this);
|
||||
}, 1000)
|
||||
// 普通函数
|
||||
setInterval(function (){
|
||||
this.s2++
|
||||
console.log("####", this)
|
||||
}, 1000)
|
||||
}
|
||||
var timer = new Timer()
|
||||
|
||||
setTimeout(() => console.log('s1: ', timer.s1),3200) //s1: 3
|
||||
setTimeout(() => console.log('s2: ', timer.s2),3200) //s2: 0
|
||||
|
||||
```
|
||||
|
||||
- **模板字符串**:使用反引号(``)创建字符串。
|
||||
|
||||
#### 2.2.4字符编码和字符集(了解)
|
||||
|
34
examples/chapter02/test-arrow-function.html
Normal file
34
examples/chapter02/test-arrow-function.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<script>
|
||||
function Timer(){
|
||||
this.s1 = 0;
|
||||
this.s2 = 0;
|
||||
// 箭头函数
|
||||
setInterval(() => {
|
||||
this.s1++;
|
||||
console.log("****", this);
|
||||
}, 1000);
|
||||
// 普通函数
|
||||
setInterval(function (){
|
||||
console.log("####", this);
|
||||
console.log("####", this.s2);
|
||||
this.s2++;
|
||||
console.log("####", this.s2);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
var timer = new Timer();
|
||||
|
||||
setTimeout(() => console.log('s1: ', timer.s1),3200); //s1: 3
|
||||
setTimeout(() => console.log('s2: ', timer.s2),3200); //s2: 0
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
hi!!
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user