this的绑定与更改

1. 在方法中，指向该方法所属（调用）的对象
2. 在非严格模式下，在函数中，this指向它所属（调用）的对象；在严格模式下，函数中的this为undefined
3. 单独使用，指向window对象
4. 在箭头函数没有自己的this对象，默认绑定外层的this，是定义时的对象，不是使用时的对象
5. 通过call，apply，bind方法可以更改this的指向
6. 在事件中，this指向事件发生的元素

接下来将针对这几点分别举例，再将他们揉合在一起进行说明，里面有些坑需要注意

1. 方法中的this：指向say()方法所属的对象，也就是person

var person = {
	  name: 'tom',
	  age: 34,
	  say: function() {
	  	console.log(this.name + " " + this.age);
	  }
};
person.say(); // tom 34 this指向person

2. 非严格模式函数中的this：指向函数所属的对象

function fn() {
  console.log(this.name);
}
var name='tom';
fn(); //tom this指向window

严格模式函数中的this：this是undefined

"use strict";
function fn() {
  console.log(this.name);
}
var name='tom';
fn(); //undefined

3. 单独使用时this：指向window

var name='tom';
console.log(this.name); //tom this指向window

4. 箭头函数中this：箭头函数里面没有 this 对象，此时的 this 是外层的 this 对象

var fn = () => {
  console.log(this.name); // 此时的this指向 Window 
}
var name='tom';
fn(); // tom

箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。

function fn(){ // 函数fn
  ()=>{    // 箭头函数
    console.log(this.a); // 定义时，this 绑定的是 fn 中的 this 对象
  }
}
var a = 20;
fn(); //20  fn 的 this 对象为 window
fn.call({a: 18});  // 18  fn 的 this 对象为 {a: 18}

这个可以这么理解：因为箭头函数没有绑定 this，它默认指向外层的 this，也就是函数 fn 的 this 对象，而在第2点里我们已经知道在非严格模式下 函数的 this 指向它所属的对象，在这里是 window。当我们使用 call 函数改变 this 后，fn 的 this 对象就为{a: 18}了，那么箭头函数的 this 也就是{a: 18}。

5. call, apply, bind 方法 改变 this

var person = {
	  name: 'tom',
	  age: 34,
	  say: function(from, to) {
	  	console.log(this.name + " " + this.age + " " + from + " " + to);
	  }
};
var other1 = {
	  name: 'tom',
	  age: 34
}
person.say.call(other,'上海','北京'); // tom 34 上海 北京
person.say.apply(other,['上海','北京']); // tom 34 上海 北京
person.say.bind(other,'上海','北京')(); // tom 34 上海 北京
person.say.bind(other,['上海','北京'])(); // tom 34 上海 北京 undefined

我们知道，JS中函数也是对象，这三个方法就是函数对象的方法，都可以改变函数执行的上下文环境，即改变 this 对象的绑定，不同的是：

• call 和 apply 都是改变同时调用，但是 bind 只是改变 this 对象并返回一个新的函数，不会直接调用
• call 和 bind 的参数都是直接放进去，但是 apply 必须通过数组传参

6. 事件中this：发生事件的元素

<button onclick="this.style.display='none'"> 点我后我就消失了 </button>

综合起来看：

var Person = {
    'age': 18,
    'sayHello': function () {
   		console.log(this.age);
     	return function () { console.log(this.age); };
     },
    'sayAge': function () {
     	console.log(this.age);
     }
};
var age = 20;
Person.sayHello()();  // 18 20   this 指向 Person, this 指向 window
Person.sayAge();  // 18  this 指向 Person
Person.sayHello.call({age: 10})();  // 10 20  this 指向 {age: 10}, this 指向 Person
Person.sayHello().call({age: 10});  // 18 10  this 指向 Person, this 指向 {age: 10}	
Person.sayAge.call({age: 8});  // 8  this 指向 {age: 8}

• Person.sayHello()();即闭包，可以分成两部分来看，首先执行Person.sayHello()，此时 sayHello 的 this 指向 Person，然后返回一个函数，此时这个函数就与第2点中所说的函数一样，只是 window 对象的一个普通函数，因此第二个 this 指向 window
• Person.sayHello.call({age: 10})();首先利用call 方法将Person.sayHello()绑定到{age: 10},因此第一个 this 指向{age: 10}，再执行返回的函数，因此第二个 this 仍指向 window
• Person.sayHello().call({age: 10});首先执行Person.sayHello()，此时 this 指向 Person，然后返回一个函数，再将返回的函数的 this 对象由 window 改绑到{age: 10}，因此第二个 this 指向 {age: 10}

var Person1 = {
    'age': 19,
    'sayHello': function () {
    	console.log(this.age);
     	return ()=>{ console.log(this.age); };
    },
    'sayAge': ()=>{
        console.log(this.age);
     }
};
var age = 21;
Person1.sayHello()();  // 19 19  this 指向 Person, this 指向 Person1
Person1.sayAge();  // 21  this 是外层的this，指向 window
Person1.sayHello.call({age: 11})();  // 11 11  this 指向 {age: 11}, this指向 {age: 11}
Person1.sayHello().call({age: 11});  // 19 19  this 指向 Person1, this 指向 Person1
Person1.sayAge.call({age: 9});  // 21  this 是外层的this，指向 window

首先来看 sayHello 中，根据第4点所说，箭头函数没有绑定 this ，它指向外层的 this，即 sayHello 方法的 this对象，并且这是在箭头函数定义时就确定了的，而与箭头函数的调用者无关

• Person1.sayHello()();即闭包，同样可以分成两部分来看，首先执行Person1.sayHello()，此时 sayHello 方法 this 对象绑定在 Person1，然后返回一个箭头函数，因此第二个 this 指向 Person1
• Person1.sayHello.call({age: 11})();首先利用call 方法将sayHello()方法的 this 对象绑定到{age: 11},因此第一个 this 指向{age: 11}，再执行返回的箭头函数，因此第二个 this 也指向{age: 11}
• Person1.sayHello().call({age: 11});首先执行Person1.sayHello()，此时 sayHello 的 this 对象绑定在 Person1，因此第二个 this 也指向 Person1

从这几个就可以看出来 ，由于箭头函数的 this 指向 sayHello 方法的 this 对象，因此它的 this 是随着 sayHello 方法的 this 对象而改变的，不能通过其他任何方法来改变

再看 sayAge 中，同样的，箭头函数没有绑定 this ，它指向外层的 this，即 window 对象

• Person1.sayAge.call({age: 9});由于在箭头函数定义时就确定了它的 this 指向外层的 window 对象，而且由于箭头函数没有绑定 this，因此不能通过 call 改变他的 this 对象的绑定

最后来个小测验：

var	firstName= "12John"
var person = {
  		firstName: "34John",
		prop:{
			firstName: "56John",
			fullName: ()=> this.firstName ,
			sayName: function(){
				return this.firstName
			}
  		}  
};
firstName= "78John"
console.log(person.prop.fullName()); // 78John
console.log(person.prop.sayName()); // 56John
var other1=person.prop.fullName;
var other2=person.prop.sayName;
console.log(other1()); // 78John
console.log(other2()); // 78John