示例1

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <body>
  5.   <button id="commonBtn">common btn</button>
  6.   <button id="arrowBtn">arrow btn</button>
  7.   <button id="bindFn">arrow btn</button>
  8.   <script>
  9.     class Obj {
  10.       constructor() {
  11.         this.state = {
  12.           type: 'account'
  13.         }
  14.         this.getThisWithBind = this.getThisWithBind.bind(this)
  15.       }
  17.       getThis() {
  18.         console.log(this, "---common fn---")
  19.       }
  20.       getThisWithArrow = () => {
  21.         console.log(this, "---arrow fn---")
  22.       }
  23.       getThisWithBind() {
  24.         console.log(this, "---bind fn---")
  25.       }
  26.     }
  28.     const myObj = new Obj();
  30.     /**
  31.      * 关键在这里，参看阮一峰的this指向blog
  32.      * http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
  33.      */
  34.     const commonFn = myObj.getThis
  35.     const arrowFn = myObj.getThisWithArrow
  36.     const bindFn = myObj.getThisWithBind
  40.     document.querySelector('#commonBtn').addEventListener('click', commonFn)
  41.     document.querySelector('#arrowBtn').addEventListener('click', arrowFn)
  42.     document.querySelector('#bindFn').addEventListener('click', bindFn)
  45.   </script>
  46. </body>
  48. </html>

image.png

  • 普通方法的this指向变成了事件对象
  • 箭头函数的this指向和bind后的一样还是这个类对象

示例2

  class A {
      constructor() {
        this.x = 1;
      }
    }
    class B extends A {
      constructor() {
        super();
        this.x = 2;
        console.log(this);    // B
        // this.getme = this.getme.bind(this)
      }
      getName() {
        console.log(this, "====="); // B
        let m = this.getme
        m()
      }
      getme() {
        console.log(this, "-----"); // undefined
      }
    }
    let b = new B();
    b.getName()

这里变成了 undefined

let m = this.getme
m()

将方法进行赋值之后，丢失了上下文，导致 this 变成 undefined ，
这个方法提出来单独使用，this会指向该方法运行时所在的环境（ES6标准入门 p411）,
this之所以没有变为window 是因为类声明和类表达式的主体以 严格模式 执行，主要包括构造函数、静态方法和原型方法。Getter 和 setter 函数也在严格模式下执行。

参考
阮一峰es6标准入门
http://es6.ruanyifeng.com/#docs/class#%E6%B3%A8%E6%84%8F%E7%82%B9
阮一峰this指向
http://www.ruanyifeng.com/blog/2018/06/javascript-this.html