LV2之-----函数四种调用模式与this （基石5）

this指向

一、学习目标
1.清楚不同执行环境中的this指向问题

二、Js中的this指针
参考：https://www.jb51.net/article/124024.htm

在javascript里面，this是一个特殊—的对象，它不像其他编程语言那样，是存储在实例中的值，直接指向此实例，而是作为一个单独的指针，在不同的情况之下，指向不同的位置，这也是为什么我们会将它搞混的原因。

var name = "windowsName";
function a() {
 var name = "Cherry";
 console.log(this.name);   // ？
 console.log("inner:" + this); // inner: ？
}
a();
console.log("outer:" + this)   // outer: ？

我们看最后调用 a 的地方 a();，前面没有调用的对象那么就是全局对象 window，这就相当于是 window.a()；
注意，这里我们没有使用严格模式，如果使用严格模式的话，全局对象就是 undefined，那么就会报错 Uncaught TypeError: Cannot read property ‘name’ of undefined。
三、具体指向
this的取值，分五种情况。在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。
（一）全局 & 调用普通函数

console.log(this)	//window
	console.log(this === window)	//true

在全局环境下，this指向window

var MyPlane = function(x,y,imgSrc,speed){
	this.x = x;
	this.y = y;
	this.imgSrc = imgSrc;
	this.speed = speed;
	console.log(this)
	console.log(this.x)
}

MyPlane();

在作为普通函数调用的时候，this也指向window

var obj = {
	x:10,
	fn:function(){
		console.log(this)	//window
		console.log(this.x)	//undefined
	}
}

var fn1 = obj.fn;
fn1()

如果fn函数被赋值到了另一个变量中，并没有作为obj的一个属性被调用，那么this的值依然是window，this.x为undefined。

（二）对象属性函数中的this
1．例1

var person = {
		name:'xianyu',
		sayName:function(){
            console.log(this)
		   alert(this.name)
		}
	}
	person.sayName()

此时this指向的是当前对象。
2．例2

var name = "windowsName";
 var a = {
  name: "Cherry",
  fn : function () {
   console.log(this.name);  // Cherry
  }
 }
 window.a.fn();
同上

3．例3如果内部没有属性

var name = "windowsName";
var a = {
 // name: "Cherry",
 fn : function () {
  console.log(this.name);  // undefined
 }
}
window.a.fn();

这里为什么会打印 undefined 呢？这是因为正如刚刚所描述的那样，调用 fn 的是 a 对象，也就是说 fn 的内部的 this 是对象 a，而对象 a 中并没有对 name 进行定义，所以 log 的 this.name 的值是 undefined。
这个例子还是说明了：this 永远指向最后调用它的那个对象，因为最后调用 fn 的对象是 a，所以就算 a 中没有 name 这个属性，也不会继续向上一个对象寻找 this.name，而是直接输出 undefined。

4．例4改一改：

var name = "windowsName";
var a = {
 name : null,
 fn : function () {
  console.log(this.name);  // windowsName
 }
}
var f = a.fn;
f();

这里可能会有疑问，为什么不是 Cherry，这是因为虽然将 a 对象的 fn 方法赋值给变量 f 了，但是没有调用，这一句话：“this 永远指向最后调用它的那个对象”，由于刚刚的 f 并没有调用，所以 fn() 最后仍然是被 window 调用的。所以 this 指向的也就是 window。
由以几个例子我们可以看出，this 的指向并不是在创建的时候就可以确定的，在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象
5．例5

var name = "windowsName";
function fn() {
   var name = 'Cherry';
   innerFunction();
   function innerFunction() {
      console.log(this.name);  // ?
   }
}
fn()

（三）构造函数中的this：
1．通过工厂模式创建“类”（设计模式）：

function Person(name,age,sex){
	var o=new Object()
	o.name=name;
	o.age=age
	o.sex=sex
	return o;
}
var liao=Person('廖国军',18,'中')
var chenjie=Person('陈杰',20,'男')
console.log(liao.age)
console.log(chenjie.name)

2．通过构造函数创建“类”（设计模式）：

function Person(name,age,sex){
	// var o=new Object() // new操作符自动完成（面向对象具体说new干了什么）
	this.name=name
	this.age=age;
	this.sex=sex;
	// return o
}
var p1=new Person('张三',19,'女');
var p2=new Person('张三',19,'女');
console.log(p1.name)

3．构造函数中的this：

var MyPlane = function(x,y,imgSrc,speed){
		this.x = x;
		this.y = y;
		this.imgSrc = imgSrc;
		this.speed = speed;
		console.log(this.x)//50
	}
		
	var myplane = new MyPlane(50,100);
	console.log(myplane.x)//50

此时this指向即将实例化出来的对象，这里指向的是myplane实例。

（四）函数用call或者apply调用
1．Call的用法改变this指向： 第一个参数具体指向谁，后面的参数，就是函数要用的参数

var obj={
	age:20
}
function show(a,b,c){
	console.log(this)
	console.log(this.age,a,b,c)
}
show.call(obj,1,2,3)

2．apply跟call一样的作用 ：只是传递参数形式不一样。按数组传递

show.apply(obj,[1,2,3])

注意：call和apply会直接调用函数
3．bind作用一样，跟call参数一样，但是不会直接调用函数，需要手动调用

show.bind(obj,1,2,3)()

btn.onclick=function(){
	// console.log(this)
	setTimeout(function(){
		console.log(this)
		this.style.background='red'
	}.bind(this),1000)
}

4．例1:call

var person = {
		name:'xianyu',
		sayName:function(){
			console.log(this)
			alert(this.name)
		}
	}

var fn = function(){
	console.log(this);
	console.log(this.name)
}
fn.call(person)

此时this指向被传入对象