day-14-dom-this指向 #14

H246802 · 2018-12-06T07:34:18Z

以下代码中出现的所有的``this` 分别指代什么

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>This</title>
</head>
<body>
<div class="father">
  <div class="child"></div>
</div>
  <script>
    $('.child').on('click', function(){
      console.log(this)
    })
    $('.father').on('click', '.child' function(){
      console.log(this)
    })
    $('.child')[0].onclick = function() {
      console.log(this)
    }
    var app = {
      init: function() {
        this.$father = $('.father')
        this.$child = $('.child')
        this.bind()
      },
      bind: function() {
        var _this = this
        this.$father.on('click', this.sayHi)
        this.$child.on('click', function() {
          _this.sayHello()
        })
        this.$child.on('click', this.sayBye.bind(this))
      },
      sayHi: function() {
        console.log(this)
      },
      sayHello: function() {
        console.log(this)
      },
      sayBye: function() {
        console.log(this)
      }
    }
    app.init()
  </script>
</body>
</html>

H246802 · 2018-12-06T07:37:14Z

上述代码重新整理以便观察效果

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>This</title>
  <style type="text/css">
    .father{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    .child{
      width: 50px;
      height: 50px;
      border: 1px solid green;
    }
  </style>
</head>
<body>
<div class="father">
  <div class="child"></div>
</div>
  <script>
    // 监听 .child 点击事件
    $('.child').on('click', function(){
      console.log('child click', this)
      // .on() 方法会向事件监听的处理函数传递一个参数 event.target，处理函数内部的 this 指向 event.target
      // 所以打印出的 this 便是 event.target 即 <div class="child"></div>
    })
    // 事件代理 监听 .father 下的 .child 的点击事件
    $('.father').on('click', '.child', function(){
      console.log('father child click', this)
      // 此处用了事件代理，向处理函数传递的仍然是触发 点击 事件的真正元素，即 .child
      // 所以打印的 this 还是 event.target -> <div class="child"></div>
    })
    // 监听 .child 点击事件
    $('.child')[0].onclick = function() {
      console.log('child onclick', this)
      // $('.child')[0] -> dom对象 <div class="child"></div>
      // 该 dom对象的 onclick 事件的处理函数，内部的 this 即是该 dom对象本身，
      // 所以 this 指代 <div class="child"></div>
    }
    var app = {
      init: function() {
        this.$father = $('.father')
        this.$child = $('.child')
        this.bind()
      },
      bind: function() {
        var _this = this
        // 监听 .father 点击事件
        this.$father.on('click', this.sayHi)
        // 监听到 click 时，向 this.sayHi 传递了 event.target 即 .father 的dom 对象 <div class="father"><div class="child"></div></div>
        // 所以当 this.sayHi() 执行时，内部的 this -> <div class="father"><div class="child"></div></div>
        // 监听 .child 点击事件
        this.$child.on('click', function() {
          _this.sayHello()
          // _this.sayHello() -> _this.sayHello.call(_this)
          // 将处理函数内部的执行方法改写成 call 调用后，可以看出
          // sayHello() 执行时，内部的 this 指向的是 app 对象本身
        })
        // 监听 .child 点击事件
        this.$child.on('click', this.sayBye.bind(this))
        // 如果没有 bind(this)，this.sayBye 会接收到 传递的 event.target 即 .child 的 dom对象 <div class="child"></div>
        // 此时手动绑定了 this，而绑定的 this 与句首的 this 是一致的，指代的都是 app 对象本身
      },
      sayHi: function() {
        console.log('sayHi', this)
      },
      sayHello: function() {
        console.log('sayHello', this)
      },
      sayBye: function() {
        console.log('sayBye', this)
      }
    }
    app.init()
  </script>
</body>
</html>

H246802 added the this问题 about this label Dec 7, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

day-14-dom-this指向 #14

day-14-dom-this指向 #14

H246802 commented Dec 6, 2018

H246802 commented Dec 6, 2018

day-14-dom-this指向 #14

day-14-dom-this指向 #14

Comments

H246802 commented Dec 6, 2018

H246802 commented Dec 6, 2018