JS this指向

正常模式

在正常模式下独立函数的的 this 指向 undefined 或 window。

<script type="text/javascript">
    function func() {
        return this.name;
    }

    var arg = {
        name: 'xxx',
        age: 20,
    };

    r = func();
    alert(r);

</script>

说明：

这段代码的执行，会弹出没有内容的空白框，func中的this默认的window，但是window中并没定义name变量，所以获取不到

如果代码是这样的便能获取：

<script type="text/javascript">
    var name = 'ooo';
    function func() {
        return this.name;
    }

    var arg = {
        name: 'xxx',
        age: 20,
    };

    r = func();
    alert(r);

</script>

说明：

此时我们定义了一个全局变量，变量属于window，所以此时this指向window的name便有值。

strict模式

在strict模式下，this的执行是可以控制的，但是要借助函数本身的 apply() 和 call() 方法。

apply()

要指定函数的this指向那个对象。可以使用函数本身的apply方法；这个方法接收2个参数：

1. 第一个参数就是this指向的对象名。
2. 可选参数；第二个参数是一个Array，表示函数本身的参数。

<script type="text/javascript">
    function func() {
        return this.name;
    }

    var arg = {
        name: 'xxx',
        age: 20,
    };

    r = func.apply(arg);
    alert(r);

</script>

apply

结果：

说明：

此时的this指向arg这个对象。

func函数本身没接收参数，所以这里省略了apply的第二个参数。

call()

call()方法和apply()方法很像只是他们接收的第二个参数形式不一样

• apply()是将参数打包成Array再传入。
• call()是参数按顺序传入。

<script type="text/javascript">
    function func(n) {
        return this.name + n;
    }

    var arg = {
        name: 'xxx',
        age: 20,
    };

    r = func.call(arg, 'OK');
    alert(r);

</script>

call

结果：

上面代码如果换成apply():

<script type="text/javascript">
    function func(n) {
        return this.name + n;
    }

    var arg = {
        name: 'xxx',
        age: 20,
    };

    r = func.apply(arg, ['OK', ]);
    alert(r);

</script>

apply

注意：

apply()方法接收一个参数的时候，在数组中要在第一个参数后面加上逗号” , ”；给予区分。

 

转载于:https://www.cnblogs.com/jayafs/p/6225815.html