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指向

callapplybind 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);