(共558篇)
全部分类

改变函数的this
[ JS基础 ] 

改变函数的 this

前面说函数中 this 的具体意义是在函数被调用时确定的。函数在没有调用者时,函数内部的this指向的是window对象:

1
2
3
4
function add() {
    console.log(this === window); // true
}
add();

JS 提供了三个函数可以在函数单独调用时,改变函数内this的指向:bind() 、 call(), apply(),这三个方法都是函数的属性,用法如下:

bind()

bind()函数返回一个新的函数,这个函数在单独执行时,它里面的 this 被改变了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script>
    var age = 30;
    var p1 = {
        age: 20,
    };
    function add() {
        console.log("this.age: ", this.age);
    }
    add();
    var newFn = add.bind(p1);
    newFn();
</script>

案例源码

call()

call()函数可以在改变函数中 this 的同时调用直接调用一次函数:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script>
    var age = 30;
    var p1 = {
        age: 20,
    };
    function add() {
        console.log("this.age: ", this.age);
    }
    add();
    add.call(p1);
</script>

案例源码

call()在调用函数的时候,还可以按照普通调用函数的方式,给原函数传递参数:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script>
    var age = 30;
    var p1 = {
        age: 20,
    };
    function add(x, y) {
        console.log("x: ", x, "y: ", y);
        console.log("this.age: ", this.age);
    }
    add("zhangXueTong", 14);
    add.call(p1, "liZhi", 14);
</script>

案例源码

apply()

apply()call()很相似,都是在改变函数内 this 的同时,调用一次函数。但是apply传递参数的方式不同,apply如果想传递参数,需要把参数放在一个数组中去:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script>
    var age = 30;
    var p1 = {
        age: 20,
    };
    function add(x, y) {
        console.log("x: ", x, "y: ", y);
        console.log("this.age: ", this.age);
    }
    add("zhangXueTong", 14);
    add.apply(p1, ["liZhi", 14]); // 注意传递参数的方式和call不同
</script>

案例源码

再来深入了解一下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    var age = 30;
    var p1 = {
        age: 20,
    };
    function add() {
        console.log("this: ", this);
        console.log("this.age: ", this.age);
    }
    var p1 = {
        age: 40,
        getAge: add,
    };
    p1.getAge();

    var fn = add.bind(p1);
    var p2 = {
        age: 50,
        getAge: fn,
    };
    p2.getAge();
</script>

案例源码

前面我们明明说当函数有调用者时,函数内的 this 指向调用者本身, 为什么这里p2.getAge()调用时,this依然指向了p1呢?

这是因为fn是通过bind更改了this指向后返回的函数,函数在调用时,不会因为有调用者,就把this重新指向调用者本身。