add: 箭头函数的 this 指向
This commit is contained in:
parent
ea8c465b43
commit
62c56cc64d
@ -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 的箭头函数中:箭头函数不绑定 this,this 指向的是**箭头函数定义位置的 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]);
|
||||
|
@ -18,3 +18,8 @@
|
||||
|
||||
- 多行文字截断
|
||||
|
||||
|
||||
## others
|
||||
|
||||
noop() 方法
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user