add: 箭头函数的 this 指向

This commit is contained in:
qianguyihao 2020-07-16 21:23:18 +08:00
parent ea8c465b43
commit 62c56cc64d
2 changed files with 38 additions and 5 deletions

View File

@ -75,7 +75,7 @@ console.log(fn2(1, 2)); //输出结果3
在箭头函数中如果形参只有一个参数则可以把`()`省略写法如下
```js
const fn2 = a => {
const fn2 = (a) => {
console.log('haha');
return a + 1;
};
@ -83,13 +83,40 @@ const fn2 = a => {
console.log(fn2(1)); //输出结果2
```
### this 的指向
## 箭头函数的 this 的指向
> 箭头函数只是为了让函数写起来更简洁优雅吗当然不只是这个原因还有一个很大的作用是与 this 的指向有关
ES5 this 指向的是函数被调用的对象 ES6 的箭头函数中this 指向的是函数被定义时
ES6 之前的普通函数中this 指向的是函数被调用的对象也就是说谁调用了函数this 就指向谁
简单来说箭头函数中的 this是不会变的是永远绑定在当前的环境下
ES6 的箭头函数中箭头函数不绑定 thisthis 指向的是**箭头函数定义位置的 this**也就是说箭头函数在哪个位置定义的this 就指向哪里
代码举例
```js
const obj = { name: '千古壹号' };
function fn1() {
console.log(this); // 第一个 this
return () => {
console.log(this); // 第二个 this
};
}
const fn2 = fn1.call(obj);
fn2();
```
打印结果
```
obj
obj
```
代码解释一定要好好理解下面这句话
上面的代码中箭头函数是在 fn1()函数里面定义的所以第二个 this 第一个 this 指向的是**同一个位置**又因为在执行 `fn1.call(obj)`之后第一个 this 就指向了 obj所以第二个 this 也是指向 obj
## 参数默认值
@ -188,7 +215,8 @@ fn(1, 2, 3);
现在我们有了扩展运算符就不用担心报错的问题了代码可以这样写
```javascript
function fn(...arg) { //当不确定方法的参数时,可以使用扩展运算符
function fn(...arg) {
//当不确定方法的参数时,可以使用扩展运算符
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);

View File

@ -18,3 +18,8 @@
- 多行文字截断
## others
noop() 方法