JavaScript this指向与改变this指向

this指向

/*
函数在 定义/声明 的时候是不知道this指向的
只有在执行的时候才有this这个概念
*/
function fn(){
  console.log(this);
}

fn();//函数自执行的情况下this指向window

document.onclick = fn; //事件触发时指向事件的主体，this指向document对象

var obj = {
	fn : function(){
		console.log(this);
	}
}
obj.fn();//此时由对象obj调用的函数，不是函数自执行，this指向obj

改变this指向

1. call
2. apply
3. bind

function fn(){
  console.log(this);
}

fn();//自执行，this->window

/* 1. 通过call改变this指向，传入的第一个实参为this的指向 */ 
fn.call( document );//this->document

/* 2. apply */
fn.apply( document );//this->document

/* 3.bind 不兼容IE8及以下  */
fn.bind(document);//不帮助函数自执行,不会打印

//正确用法
var x = fn.bind(document);//bind返回一个新的fn函数，但this指向传入的参数
x();//此时this->document

三种方法的传参方式

function sum (a,b){
  console.log(this);
  console.log(a + b);
}

sum.call(oWarp,2,5);//传入的第一个实参为this指向，此时this指向oWarp

sum.apply(oWarp,[2,5]);//apply形参使用数组传

// call和apply的返回值即fn的返回值

var = fn.bind(null,2,5);
x();

bind的柯里化

/*
	柯里化: 降低函数的适用范围，提高函数的适用性
*/
//bind的作用之一 ： 固定参数
function fn(a,b,c){
  console.log(this);
  console.log(a + b + c);
}

var x = fn.bind(null,1,2);//a固定是1，b固定是2
x(3);//传入的3是c
//只适用于a是1，b是2，但c可变的情况下

例子

var obj = {name: "zhangsan"};
function fn(){
  console.log(this);
}

//document.onclick = fn.call(obj);//错误，call会自执行后返回

/*正确写法*/
document.onclick = function(){
  fn.call(obj);
} 
//或
document.onclick = fn.bind(obj);