07-this

this

this的作用

  • this可以帮我们简化很多代码。比如xiaoming.name、xiaoming.age可以直接写成this.name、this.age。

  • 特别是当我们不知道一个对象是什么，或者这个对象没有名字但又很想调用它的时候，就会使用到this对象。

举例：

  • 遍历DOM对象，绑定click事件，调用当前点击的对象的id，而不是所有对象的id。

代码：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.     <title>Document</title>
  7.     <style>
  8.         div {
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: green;
  12.             margin: 10px;
  13.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <script>
  19.     window.onload = function () {
  20.         var myDiv = document.getElementsByTagName('div');
  21.         for (var i = 0; i < myDiv.length; i++) {
  22.             myDiv[i].onclick = function () {
  23.                 console.log(i);
  24.                 console.log(this.id);
  25.             }
  26.         }
  28.     }
  30. </script>
  31. <section>
  32.     <div id="div0"> div0</div>
  33.     <div id="div1"> div1</div>
  34.     <div id="div2"> div2</div>
  35.     <div id="div3"> div3</div>
  36.     <div id="div4"> div4</div>
  37. </section>
  40. </body>
  41. </html>

点击其中的任何一个元素后，i的打印结果是5。你可能会觉得很惊讶。我们来解释一下：

当代码执行完毕后，i已经等于5了。因为一旦运行程序，for循环已经执行完了，此时i等于5。

现在，我们尝试在 myDiv[i].onclick事件中写代码，如果打印：

  1.     console.log(i);  //打印结果为5

如果打印：

  1.     console.log(myDiv[i].id);

上方这行代码，打印会报错，因为i=5；如果想打印每个div的id，应该这样写：

  1.     console.log(this.id);

你看，this的作用，就体现出来了。

PS：顺便提醒一下，上面的代码中，如果把var i改成let i，效果又完全不同了。参考链接：let和var在for循环中的表现

全局作用域中的this

当一段代码在浏览器中执行时，所有的全局变量和对象都是在window对象上定义的。换而言之，所有的全局变量和对象都属于window对象。

this的定律

this关键字永远指向函数（方法）运行时的所有者。

函数赋值给变量时，this指向window

比如：

  1. var foo1 = args.getInfo;
  2. foo1();
  4. var foo2 = function(){};
  5. foo2();

this都是指向window。

以函数形式调用时，this永远都是window

以方法的形式调用时，this是调用方法的对象

解决闭包中的this指向问题

内部函数是可以访问到外部函数的变量的。

方式一：直接通过父函数的名字访问

方式二：如果不知道父函数的名字，在父函数里加一句_this = this，此时_this相当于父函数的名字。

当this遇到一些特殊的函数时