通俗易懂浅谈理解ES6类this不同指向问题

1. class Btn{ //定义的一个类

　　constructor(id){

// constructor是一个构造函数，是一个默认方法，通过 new 命令创建对象实例时，自动调用该方法。一个类必须有 constructor 方法，如果没有显式定义，一个默认的 consructor 方法会被默认添加。

　　　　this.btn = document.querySelector(id); //这里的this指向了实例对象btn

　　}

　　click(){

　　　　console.log(this); //因为this是指向了实例对象btn，所以输出的是传进的参数input

　　}　

}

var btn = new Btn('input');

2.class Btn{

　　constructor(id){

　　　　this.btn = document.querySelector(id); //指向的是实例对象

　　　　this.btn.onclick = this.click;

　  }

　　click(){

　　　　console.log(this);

//这里不点击btn的情况下输出的是div，因为这个this也被第二个实例对象div给调用了，谁调用this就指向谁。

当你点击btn事这里的this指向btn，因为在构造函数里面btn调用了click这个方法,点击btn输出的是input

　　}

}

var btn = new Btn('input');

var div = new Btn('div'); //这是第二个实例对象

div.click(); //调用div的这个实例对象

3. class Btn{

　　constructor(x,y){

　　　　this.x = x;

　　　　this.y = y;

　　　　this.btn = document.querySelector('input');//指向的实例对象

　　　　this.btn.onclick = this.click;

　　}

　　click(){

　　　　console.log(this);

　　　　//这里的this指向的是btn，在构造函数btn调用了click这个方法

　　　　console.log(this.x+this.y);

　　　　//这里输出的是NaN，因为这里的this被btn调用，btn里没有x和y

　　}

}

var bbn = new Btn(10,2);

var that;

4. class Btn{

　　constructor(x,y){

　　　　that = this;

　　　　this.x = x;

　　　　this.y = y;

　　　　this.btn=document.querySelecctor('input');

　　　　this.btn.onclick = this.click;

　　}

　　click(){

　　　　console.log(this);

//这里的this指向的是btn，在构造函数btn调用了click这个方法

　　　　console.log(that.x+that.y); //这里会输出12

//因为这里this指向了btn，所以需要用到constructor里面的this，如果用this会输出NaN，用that声明一个全局变量，这里就用that代替this

　　}

}

var bbn = new Btn(10,2);