(共566篇)
全部分类

神奇的this(补充)
[ JS基础 ] 

神奇的 this(补充)

前面讲过的数组方法中,有一些方法需要传入一个匿名函数作为参数,这些匿名函数的调用方式,实际上也是单独调用,也就是说函数中的this指向的是window对象。

但是这些方法实际上还可以传入第二个参数,用来修改第一个参数匿名函数中 this 的指向,比如: map、forEach、find、findIndex、every、some、filter方法;以map方法为例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<script>
    var age = 20;
    var arr = [1, 3, 5, 7, 9];

    var res = arr.map(function(currentValue) {
        return currentValue + this.age;
    });
    console.log("res:", res);

    var person = {
        age: 10,
    };
    // 把this指向修改为person对象
    res = arr.map(function(currentValue) {
        return currentValue + this.age;
    }, person);
    console.log("this指向被修改后的res:", res);
</script>

代码案例

案例中第二个参数传入person后,匿名函数中的this指向被修改为person,所以this.age的值变成了 10。

every方法中的thisTarget参数同样如此:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<script>
    var age = 0;

    var arr = [1, 3, 5, 7, 9];

    var res = arr.every(function(currentValue) {
        return currentValue > this.age;
    });
    console.log("res:", res);

    var person = {
        age: 3,
    };
    // 把this指向修改为person对象
    res = arr.every(function(currentValue) {
        return currentValue > this.age;
    }, person);
    console.log("this指向被修改后的res:", res);
</script>

代码案例

其他几个可以修改this指向的案例就不再赘述了。