JavaScript 中this 的详解

2019-10-20 本文已影响0人西瓜鱼仔

情形1：在全局中，this 指向的是window 对象。

情形2：在函数中，this 指向分为下面两种情况：

非严格模式下：this 指向的也是window 对象。
演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>this指向测试</title>
</head>

<body>
  <script>
    function show() {
     console.log(this)
    }
    show();
  </script>
</body>

</html>

打印结果为window对象。

在严格模式下：this 指向会出现undefined。
演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>this指向测试</title>
</head>

<body>
  <script>
    //加了严格模式
    'use strict';
    function show() {
     console.log(this)
    }
    show();
  </script>
</body>

</html>

打印结果为：

情形3：在对象（Object）中：
如果对象中没有嵌套多个函数，那么无论是在严格还是非严格模式下，this 指向的都是对象本身。
如果有多个嵌套函数，那么嵌套函数中的this 指向跟 情形2 相同：非严格模式下指向window，严格模式下指向undefined。

对象中没有嵌套多个函数
演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>this指向测试</title>
</head>

<body>
  <script>
    var student = {
      name:"Hayden",
      showName:function () {
        console.log(this)
      }
    };
    student.showName();
  </script>
</body>

</html>

打印结果指向对象本身：

对象中有嵌套多个函数
非严格模式下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>this指向测试</title>
</head>

<body>
  <script>
    var student = {
      name:"Hayden",
      showName:function () {
        function testThis() {
          console.log(this)
        }
        testThis();
      }
    };
    student.showName();
  </script>
</body>

</html>

打印结果：嵌套函数中的this 指向window

严格模式下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>this指向测试</title>
</head>

<body>
  <script>
    'use strict';
    var student = {
      name:"Hayden",
      showName:function () {
        function testThis() {
          console.log(this)
        }
        testThis();
      }
    };
    student.showName();
  </script>
</body>

</html>

打印结果：嵌套函数中的this 指向undefined

扩展：那对象的嵌套函数中如何使用指向对象的this 呢？

很简单！
方法1：只需要将对象中的this 传给嵌套函数中即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>this指向测试</title>
</head>

<body>
  <script>
    'use strict';
    var student = {
      name:"Hayden",
      showName:function () {
        let self = this; //用let接一下指向对象本身的this
        function testThis() {
          console.log(self)
        }
        testThis();
      }
    };
    student.showName();
  </script>
</body>

</html>

打印结果：

方法2：使用call 函数修改成指向对象的this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>this指向测试</title>
</head>

<body>
  <script>
    'use strict';
    var student = {
      name:"Hayden",
      showName:function () {
        function testThis() {
          console.log(this)
        }
        testThis.call(this); //使用call函数修改成指向对象的this 
      }
    };
    student.showName();
  </script>
</body>

</html>

JavaScript 中this 的详解

猜你喜欢

热点阅读