Skip to content

Commit a975c0c

Browse files
committed
docs(oop/this): fix wangdoc#165
1 parent 136026a commit a975c0c

File tree

2 files changed

+30
-30
lines changed

2 files changed

+30
-30
lines changed

docs/oop/this.md

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -694,11 +694,11 @@ var f = function (){
694694
$('#button').on('click', f);
695695
```
696696

697-
上面代码中,点击按钮以后,控制台将会显示`true`。由于`apply`方法(或者`call`方法)不仅绑定函数执行时所在的对象,还会立即执行函数,因此不得不把绑定语句写在一个函数体内。更简洁的写法是采用下面介绍的`bind`方法。
697+
上面代码中,点击按钮以后,控制台将会显示`true`。由于`apply()`方法(或者`call()`方法)不仅绑定函数执行时所在的对象,还会立即执行函数,因此不得不把绑定语句写在一个函数体内。更简洁的写法是采用下面介绍的`bind()`方法。
698698

699699
### Function.prototype.bind()
700700

701-
`bind`方法用于将函数体内的`this`绑定到某个对象,然后返回一个新函数。
701+
`bind()`方法用于将函数体内的`this`绑定到某个对象,然后返回一个新函数。
702702

703703
```javascript
704704
var d = new Date();
@@ -708,16 +708,16 @@ var print = d.getTime;
708708
print() // Uncaught TypeError: this is not a Date object.
709709
```
710710

711-
上面代码中,我们将`d.getTime`方法赋给变量`print`,然后调用`print`就报错了。这是因为`getTime`方法内部的`this`,绑定`Date`对象的实例,赋给变量`print`以后,内部的`this`已经不指向`Date`对象的实例了。
711+
上面代码中,我们将`d.getTime()`方法赋给变量`print`,然后调用`print()`就报错了。这是因为`getTime()`方法内部的`this`,绑定`Date`对象的实例,赋给变量`print`以后,内部的`this`已经不指向`Date`对象的实例了。
712712

713-
`bind`方法可以解决这个问题。
713+
`bind()`方法可以解决这个问题。
714714

715715
```javascript
716716
var print = d.getTime.bind(d);
717717
print() // 1481869925657
718718
```
719719

720-
上面代码中,`bind`方法将`getTime`方法内部的`this`绑定到`d`对象,这时就可以安全地将这个方法赋值给其他变量了。
720+
上面代码中,`bind()`方法将`getTime()`方法内部的`this`绑定到`d`对象,这时就可以安全地将这个方法赋值给其他变量了。
721721

722722
`bind`方法的参数就是所要绑定`this`的对象,下面是一个更清晰的例子。
723723

@@ -734,7 +734,7 @@ func();
734734
counter.count // 1
735735
```
736736

737-
上面代码中,`counter.inc`方法被赋值给变量`func`。这时必须用`bind`方法将`inc`内部的`this`,绑定到`counter`,否则就会出错。
737+
上面代码中,`counter.inc()`方法被赋值给变量`func`。这时必须用`bind()`方法将`inc()`内部的`this`,绑定到`counter`,否则就会出错。
738738

739739
`this`绑定到其他对象也是可以的。
740740

@@ -754,9 +754,9 @@ func();
754754
obj.count // 101
755755
```
756756

757-
上面代码中,`bind`方法将`inc`方法内部的`this`,绑定到`obj`对象。结果调用`func`函数以后,递增的就是`obj`内部的`count`属性。
757+
上面代码中,`bind()`方法将`inc()`方法内部的`this`,绑定到`obj`对象。结果调用`func`函数以后,递增的就是`obj`内部的`count`属性。
758758

759-
`bind`还可以接受更多的参数,将这些参数绑定原函数的参数。
759+
`bind()`还可以接受更多的参数,将这些参数绑定原函数的参数。
760760

761761
```javascript
762762
var add = function (x, y) {
@@ -772,9 +772,9 @@ var newAdd = add.bind(obj, 5);
772772
newAdd(5) // 20
773773
```
774774

775-
上面代码中,`bind`方法除了绑定`this`对象,还将`add`函数的第一个参数`x`绑定成`5`,然后返回一个新函数`newAdd`,这个函数只要再接受一个参数`y`就能运行了。
775+
上面代码中,`bind()`方法除了绑定`this`对象,还将`add()`函数的第一个参数`x`绑定成`5`,然后返回一个新函数`newAdd()`,这个函数只要再接受一个参数`y`就能运行了。
776776

777-
如果`bind`方法的第一个参数是`null``undefined`,等于将`this`绑定到全局对象,函数运行时`this`指向顶层对象(浏览器为`window`)。
777+
如果`bind()`方法的第一个参数是`null``undefined`,等于将`this`绑定到全局对象,函数运行时`this`指向顶层对象(浏览器为`window`)。
778778

779779
```javascript
780780
function add(x, y) {
@@ -785,19 +785,19 @@ var plus5 = add.bind(null, 5);
785785
plus5(10) // 15
786786
```
787787

788-
上面代码中,函数`add`内部并没有`this`,使用`bind`方法的主要目的是绑定参数`x`,以后每次运行新函数`plus5`,就只需要提供另一个参数`y`就够了。而且因为`add`内部没有`this`,所以`bind`的第一个参数是`null`,不过这里如果是其他对象,也没有影响。
788+
上面代码中,函数`add()`内部并没有`this`,使用`bind()`方法的主要目的是绑定参数`x`,以后每次运行新函数`plus5()`,就只需要提供另一个参数`y`就够了。而且因为`add()`内部没有`this`,所以`bind()`的第一个参数是`null`,不过这里如果是其他对象,也没有影响。
789789

790-
`bind`方法有一些使用注意点。
790+
`bind()`方法有一些使用注意点。
791791

792792
**(1)每一次返回一个新函数**
793793

794-
`bind`方法每运行一次,就返回一个新函数,这会产生一些问题。比如,监听事件的时候,不能写成下面这样。
794+
`bind()`方法每运行一次,就返回一个新函数,这会产生一些问题。比如,监听事件的时候,不能写成下面这样。
795795

796796
```javascript
797797
element.addEventListener('click', o.m.bind(o));
798798
```
799799

800-
上面代码中,`click`事件绑定`bind`方法生成的一个匿名函数。这样会导致无法取消绑定,所以,下面的代码是无效的
800+
上面代码中,`click`事件绑定`bind()`方法生成的一个匿名函数。这样会导致无法取消绑定,所以下面的代码是无效的
801801

802802
```javascript
803803
element.removeEventListener('click', o.m.bind(o));
@@ -814,7 +814,7 @@ element.removeEventListener('click', listener);
814814

815815
**(2)结合回调函数使用**
816816

817-
回调函数是 JavaScript 最常用的模式之一,但是一个常见的错误是,将包含`this`的方法直接当作回调函数。解决方法就是使用`bind`方法,将`counter.inc`绑定`counter`
817+
回调函数是 JavaScript 最常用的模式之一,但是一个常见的错误是,将包含`this`的方法直接当作回调函数。解决方法就是使用`bind()`方法,将`counter.inc()`绑定`counter`
818818

819819
```javascript
820820
var counter = {
@@ -833,7 +833,7 @@ callIt(counter.inc.bind(counter));
833833
counter.count // 1
834834
```
835835

836-
上面代码中,`callIt`方法会调用回调函数。这时如果直接把`counter.inc`传入,调用时`counter.inc`内部的`this`就会指向全局对象。使用`bind`方法将`counter.inc`绑定`counter`以后,就不会有这个问题,`this`总是指向`counter`
836+
上面代码中,`callIt()`方法会调用回调函数。这时如果直接把`counter.inc`传入,调用时`counter.inc()`内部的`this`就会指向全局对象。使用`bind()`方法将`counter.inc`绑定`counter`以后,就不会有这个问题,`this`总是指向`counter`
837837

838838
还有一种情况比较隐蔽,就是某些数组方法可以接受一个函数当作参数。这些函数内部的`this`指向,很可能也会出错。
839839

@@ -852,7 +852,7 @@ obj.print()
852852
// 没有任何输出
853853
```
854854

855-
上面代码中,`obj.print`内部`this.times``this`是指向`obj`的,这个没有问题。但是,`forEach`方法的回调函数内部的`this.name`却是指向全局对象,导致没有办法取到值。稍微改动一下,就可以看得更清楚。
855+
上面代码中,`obj.print`内部`this.times``this`是指向`obj`的,这个没有问题。但是,`forEach()`方法的回调函数内部的`this.name`却是指向全局对象,导致没有办法取到值。稍微改动一下,就可以看得更清楚。
856856

857857
```javascript
858858
obj.print = function () {
@@ -867,7 +867,7 @@ obj.print()
867867
// true
868868
```
869869

870-
解决这个问题,也是通过`bind`方法绑定`this`
870+
解决这个问题,也是通过`bind()`方法绑定`this`
871871

872872
```javascript
873873
obj.print = function () {
@@ -882,19 +882,19 @@ obj.print()
882882
// 张三
883883
```
884884

885-
**(3)结合`call`方法使用**
885+
**(3)结合`call()`方法使用**
886886

887-
利用`bind`方法,可以改写一些 JavaScript 原生方法的使用形式,以数组的`slice`方法为例。
887+
利用`bind()`方法,可以改写一些 JavaScript 原生方法的使用形式,以数组的`slice()`方法为例。
888888

889889
```javascript
890890
[1, 2, 3].slice(0, 1) // [1]
891891
// 等同于
892892
Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]
893893
```
894894

895-
上面的代码中,数组的`slice`方法从`[1, 2, 3]`里面,按照指定位置和长度切分出另一个数组。这样做的本质是在`[1, 2, 3]`上面调用`Array.prototype.slice`方法,因此可以用`call`方法表达这个过程,得到同样的结果。
895+
上面的代码中,数组的`slice`方法从`[1, 2, 3]`里面,按照指定的开始位置和结束位置,切分出另一个数组。这样做的本质是在`[1, 2, 3]`上面调用`Array.prototype.slice()`方法,因此可以用`call`方法表达这个过程,得到同样的结果。
896896

897-
`call`方法实质上是调用`Function.prototype.call`方法,因此上面的表达式可以用`bind`方法改写。
897+
`call()`方法实质上是调用`Function.prototype.call()`方法,因此上面的表达式可以用`bind()`方法改写。
898898

899899
```javascript
900900
var slice = Function.prototype.call.bind(Array.prototype.slice);

docs/stdlib/array.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Array 对象
1+
Array 对象
22

33
## 构造函数
44

@@ -282,13 +282,13 @@ a // ["c", "b", "a"]
282282

283283
### slice()
284284

285-
`slice`方法用于提取目标数组的一部分,返回一个新数组,原数组不变。
285+
`slice()`方法用于提取目标数组的一部分,返回一个新数组,原数组不变。
286286

287287
```javascript
288288
arr.slice(start, end);
289289
```
290290

291-
它的第一个参数为起始位置(从0开始),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员。
291+
它的第一个参数为起始位置(从0开始,会包括在返回的新数组之中),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员。
292292

293293
```javascript
294294
var a = ['a', 'b', 'c'];
@@ -300,9 +300,9 @@ a.slice(2, 6) // ["c"]
300300
a.slice() // ["a", "b", "c"]
301301
```
302302

303-
上面代码中,最后一个例子`slice`没有参数,实际上等于返回一个原数组的拷贝。
303+
上面代码中,最后一个例子`slice()`没有参数,实际上等于返回一个原数组的拷贝。
304304

305-
如果`slice`方法的参数是负数,则表示倒数计算的位置。
305+
如果`slice()`方法的参数是负数,则表示倒数计算的位置。
306306

307307
```javascript
308308
var a = ['a', 'b', 'c'];
@@ -320,7 +320,7 @@ a.slice(4) // []
320320
a.slice(2, 1) // []
321321
```
322322

323-
`slice`方法的一个重要应用,是将类似数组的对象转为真正的数组。
323+
`slice()`方法的一个重要应用,是将类似数组的对象转为真正的数组。
324324

325325
```javascript
326326
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
@@ -330,11 +330,11 @@ Array.prototype.slice.call(document.querySelectorAll("div"));
330330
Array.prototype.slice.call(arguments);
331331
```
332332

333-
上面代码的参数都不是数组,但是通过`call`方法,在它们上面调用`slice`方法,就可以把它们转为真正的数组。
333+
上面代码的参数都不是数组,但是通过`call`方法,在它们上面调用`slice()`方法,就可以把它们转为真正的数组。
334334

335335
### splice()
336336

337-
`splice`方法用于删除原数组的一部分成员,并可以在删除的位置添加新的数组成员,返回值是被删除的元素。注意,该方法会改变原数组。
337+
`splice()`方法用于删除原数组的一部分成员,并可以在删除的位置添加新的数组成员,返回值是被删除的元素。注意,该方法会改变原数组。
338338

339339
```javascript
340340
arr.splice(start, count, addElement1, addElement2, ...);

0 commit comments

Comments
 (0)