js this的指向

• this要在执行时才能确认值，定义时无法确认
• demo：

var a = {
	name: 'A',
	fn: function(){
		console.log(this.name)
	}
}
a.fn() // this === a
a.fn().call({name:'B'}) // this === {name:'B'}
var fn1 = a.fn
fn1() // this === window

this 的可能性

• 作为构造函数执行
• 作为对象属性执行
• 作为普通函数执行
• call apply bind

call/apply/bind

call

fun.call(thisArg[, arg1, arg2, …])

• thisArg：在fun函数运行时指定的this值，为null、undefined时，默认指向window
• arg1,arg2,…：可选，传入fun函数的参数列表
• 返回值：调用有指定this值和参数的函数的结果，没有时返回undefined

apply

fun.apply(thisArg[, [argsArray]])

• [argsArray]：可选，一个数组或类数组对象
• 返回值：同上

bind

fun.bind(thisArg[, arg1[, arg2[, …]]])

• thisArg：在fun函数运行时指定的this值，为null、undefined时，默认指向window
• 返回值：由指定的this值和初始化参数改造的原函数拷贝

代码演示

function Foo(name){
	this.name = name
}
var f = new Foo('zhangsan') // this作为构造函数执行

var obj =  {
	name:'A',
	printName:function(){
		console.log(this.name)
	}
}
obj.printName()  // this作为对象执行

function fn(){
	console.log(this)
}
fn() // this作为window对象执行

// call apply bind
function fn1(name,age){
	alert(name)
	console.log(this)
}
fn1.call({x:100},'zhangsan',20) // this作为对象{x:100}执行,alert('zhangsan')
fn1.apply({x:100},['zhangsan',20]) // this作为对象{x:100}执行,alert('zhangsan')


var fn2 = function(name,age){
	alert(name)
	console.log(this)
}.bind({y:200})
fn2('zhangsan',20) // this作为{y:200}执行,alert('zhangsan')