This commit is contained in:
many2many 2024-09-24 14:32:53 +08:00
parent cec8fb5161
commit e5497f3510
2 changed files with 108 additions and 0 deletions

View File

@ -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字符编码和字符集(了解)

View 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>