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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user