diff --git a/05-JavaScript之ES6语法/06-ES6:箭头函数.md b/05-JavaScript之ES6语法/06-ES6:箭头函数.md index 20e11a2..13c66f1 100644 --- a/05-JavaScript之ES6语法/06-ES6:箭头函数.md +++ b/05-JavaScript之ES6语法/06-ES6:箭头函数.md @@ -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]); diff --git a/14-前端进阶/02-前端常见专有名词.md b/14-前端进阶/02-前端常见专有名词.md index 7d40cd5..83dbf93 100644 --- a/14-前端进阶/02-前端常见专有名词.md +++ b/14-前端进阶/02-前端常见专有名词.md @@ -18,3 +18,8 @@ - 多行文字截断 + +## others + +noop() 方法 +