第二节、JavaScript 设计模式——this、call 和 apply

这一节不涉及具体设计模式，只是针对我们后续的学习做一个铺垫，如果是对这三者很了解的话请跳过此节。

JavaScript 的 this 总是指向一个对象，具体指向哪个对象在运行时基于函数的执行环境动态绑定的，而非函数声明时的环境。

除去不常用的 with 和 eval 的情况，this 的指向大致分为以下4种：

• 作为对象的方法调用
• 作为普通函数调用
• 构造器调用
• Function.prototype.call 或 Function.prototype.apply 调用

1、作为对象方法调用

如果对象的方法里面包含this，this指向的就是方法运行时所在的对象。该方法赋值给另外一个对象，就会改变this的指向。

let obj = {
	a:1,
	getA:()=>{
		alert(this === obj) //输出：true
		alert(this.a) //输出： 1
	}
}
obj.getA()

2、作为普通函数调用

全局环境使用 this，它指的就是顶层对象 window。

window.name = "globalName"

let getName = ()=>{
	return this.name
}
console.log(getName()) //输出： globalName

// 再来看这一个
let obj = {
	name:'seven',
	getCurName:()=>{
		return this.name
	}
}
let getOtherName = obj.getCurName
console.log(getOtherName()) //输出：globalName

上面第二个例子是不是困惑了，哈哈。再去好好读读本篇文章的第二段话，多读几遍，加深理解，函数getOtherName在 console.log 里面执行时所处的执行环境此时是在全局作用域内，所以 this 的指向是 window。

3、作为构造器调用

构造函数的 this ，指向实例对象。

let obj = (p)=>{
	this.p = p
}
let o = new obj('love')
console.log(o.p) //输出：love

4、Function.prototype.call 或 Function.prototype.apply 调用

跟普通函数调用相比，这两个调用可以动态改变传入函数的this。

let obj1 = {
	name:'seven',
	getName: ()=>{
		return this.name
	}
}
let obj2 = {
	name:'anne'
}

console.log(obj1.getName()) //输出：seven
console.log(obj1.getName.call(obj2)) //输出：anne

扩展一下：

绑定this的方法

也就是常用的call， apply， bind三个方法。
三者都可以接受多个参数；但是第一个参数是this所要指向的那个对象。区别如下：

• call， apply， bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文；
• call， apply， bind 三者都可以利用后续参数传参；
• bind是返回对应 函数，便于稍后调用；call， apply 则是立即调用 。
• 对于 call， apply 二者而言，作用完全一样，只是接受 参数 的方式不太一样。call 是把参数按顺序传递进去，而 apply 则是把参数放在数组 里。

注意点：

• 方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。
• 如果方法的第一个参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入方法。