JS——this

2016-10-15 本文已影响60人进击的阿群

Q&A：

1. apply、call 有什么作用，什么区别？

apply：
定义：fun.apply(thisArg[, argsArray])，改变当前函数的this指向，这样可以使方法在特定对象中使用，而不需要再特定对象中重新写该方法。
参数：
- 第一个参数thisArg是this的指向，即要指定的调用对象，非严格模式下，当为null或undefined时，默认指向全局对象；
- 第二个参数argsArray是参数数组，在ES5中，可以为类数组对象。该数组传给fun函数以供处理；当无法得知具体有何参数时，可以使用arguments对象代替argsArray；当设置为null或undefined时，表示不需要传入参数。
eg：Array.prototype.join.apply(arguments)，让arguments可以使用join方法；补充一点，argument.callee常用于匿名函数，指代函数本身。
call：fun.call(thisArg[, arg1[, arg2[, ...]]])，与apply作用相同。
区别：call和apply类似，只有第二个参数不同，apply是传入参数数组或者类数组对象，而call是传入参数列表（nodeList）。
this：当函数被调用时，this指向调用函数的那个对象。
全局作用下，this指向window对象；
构造函数的this指向构造的对象；
apply和call里，指向指定的调用对象；
事件绑定中的this，指向调用事件绑定的document对象；
函数嵌套中的function的this指向window；
setTimeout和setInterval中的this指向window；
eg：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task33</title>
  </head>
  <body>
    <button type="button" id="button">按钮</button>
    <script>
      document.getElementById('button').onclick = function() {
        console.log(this);
      }
      function outerTest() {
        console.log(this);
        function innerTest() {
          console.log(this);
        }
        innerTest();

        setTimeout(function() {
          console.log(this);
        }, 2000);
      }

      outerTest();

    </script>
  </body>
</html>

this指向

    <script>
      var name = 'kevin';
      var obj = {
        name: 'zhao'
      }

      function outerTest() {
        console.log(this.name);
      }
      outerTest();
      outerTest.apply(obj);

    </script>

apply中的this

Coding：

1. 以下代码输出什么?

    <script>
      var john = {
        firstName : "John"
      }
      function func() {
        alert(this.firstName + ": Hi!");
      }
      john.sayHi = func;
      john.sayHi();
    </script>

this指向调用其函数的对象，代码中john对象绑定函数，并且调用函数，所以this指向john对象，所以显示john: H1!：

代码1

2. 下面代码输出什么，为什么

    <script>
      func();

      function func() {
        alert(this);
      }
    </script>

默认是全局对象调用函数，所以显示的是window对象：

代码2

3. 下面代码输出什么

    <script>
      function fn0() {
        function fn() {
          console.log(this);
        }
        fn();
      }

      fn0();

      document.addEventListener('click', function(e) {
        console.log(this);
        setTimeout(function() {
          console.log(this);
        }, 200);
      }, false);
    </script>

嵌套函数，在调用的时候，和外层函数一样，也遵循堆栈溢出原则，函数调用时this指向仍然是window；document绑定事件时，this指向document对象，因为调用该方法的是document对象；setTimeout是全局对象window调用的，所以this指向window：

代码3

4. 下面代码输出什么，why

    <script>
      var john = {
        firstName: "John"
      }

      function func() {
        alert(this.firstName);
      }
      func.call(john);
    </script>

call方法的第一个参数是改变调用该方法的this对象，所以显示John：

代码4

5. 代码输出？

    <script>
      var john = {
        firstName: "John",
        surName: "Smith"
      }

      function func(a, b) {
        alert(this[a] + ' ' + this[b]);
      }
      func.call(john, 'firstName', 'surName');
    </script>

call方法，第一个参数是改变调用该方法的this对象，后面的参数是传入的参数，this[a]得到的就是john[firstName]的值：

代码4

6. 以下代码有什么问题，如何修改

    <script>
      var module = {
        bind: function() {
          $btn.on('click', function() {
            console.log(this);
            this.showMsg();
          });
        },
        showMsg: function() {
          console.log('饥人谷');
        }
      }
    </script>

this只有在函数被调用的时候才能应用，当$btn被点击时，this指向$btn而不是module，所以在bind里调用不了showMsg()方法，应该改成：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task33</title>
  </head>
  <body>
    <button type="button" id="btn">按钮</button>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      var $btn = $('#btn');
      var module = {
        bind: function() {
          var cur = this;  // 保存对象的this
          $btn.on('click', function() {
            console.log(cur);
            cur.showMsg();
          });
        },
        showMsg: function() {
          console.log('饥人谷');
        }
      }
      module.bind();
    </script>
  </body>
</html>

代码6

本文归饥人谷和本人所有，如需转载请注明来源