this总是返回一个对象,简单说,就是返回属性或方法“当前”所在的对象。
1.在全局环境使用this,它指的就是顶层对象window。
console.log(this);//window
var a=2;
this.a;//2
function f(){console.log(this);}
f();//window
2.构造函数中的this,指的是实例对象。
function F(){this.price=2;}
var f=new F();
f.price;//2
3.对象通过点运算符调用方法,方法中的this指的是该对象。
var obj={
a:1,
f:function(){console.log(this);this.a=2;}
}
obj.f();
obj.a;
4.函数赋值给另一个变量,函数内的this代表调用函数运行时所在的对象。
var obj={
f:function(){console.log(this);}
}
var foo=obj.f;
foo();//window
5.先运算,后执行,在全局环境执行运算结果,this指向全局环境
var obj={
f:function(){console.log(this);}
}
(1,obj.f)()//window
6.避免多层this
var o = {
f1: function () {
console.log(this);
var f2 = function () {
console.log(this);
}();//先执行,后赋值,没有被o对象调用
}
}
o.f1()
// Object
// Window
7.foreach方法的回调函数中的this,指向window对象
var arr=[1,2,3];
arr.foreach(function(item){console.log(this);})
8.避免回调函数中的this
var o = new Object();
o.f = function () {
console.log(this === o);
}
o.f()//true
$('#button').on('click', o.f);//false
JavaScript提供了call、apply、bind这三个方法,来切换/固定this的指向。
function.prototype.call()
1.参数应该是一个对象。如果参数为空、null和undefined,则默认传入全局对象。
2.如果call方法的参数是一个原始值,那么这个原始值会自动转成对应的包装对象,然后传入call方法。
3.call方法还可以接受多个参数。第一个参数就是this所要指向的那个对象,后面的参数则是函数调用时所需的参数。
var n=1;
var obj={n:2};
function f(){console.log(this.n);}
f.call(obj);//2
f.call(window);//1
f.call(null);//1
f.call();//1
function add(a,b){console.log(a+b);}
add.call(this,1,2);//3
call方法的一个应用是调用对象的原生方法。
var obj={};
obj.hasOwnProperty('toString');//false
obj.hasOwnProperty=function(){return true;}
obj.hasOwnProperty('toString);//true
//hasOwnProperty方法被覆盖,如何才能使用原来的方法呢?
Object.prototype.hasOwnProperty.call(obj,'toString');//false
function.prototype.apply()
接收一个数组作为函数执行时的参数,使用格式:
function.apply(thisValue, [arg1, arg2, …])
一些有趣的应用
1.Math.max()和apply结合—求数组的最大元素
Math.max(1,2,3)//3
Math.max.apply(null,[1,2,3])//3
2.Array构造函数和apply结合—将数组的空元素变为undefined
Array.apply(null,[1,,2])//[1, undefined, 2]
数组的forEach方法会跳过空元素,但是不会跳过undefined。
Array.apply(null,[1,,3]).forEach(function(item){console.log(item);})
//1
//undefined
//3
[1,,3].forEach(function(item){console.log(item);})
//1
//3
3.slice和apply结合–将类似数组的对象转换为数组
var a={0:'a',1:'b',length:3};
Array.prototype.slice.apply(a);
//["a", "b", undefined]
Array.prototype.slice.apply(arguments);
Array.prototype.slice.call(arguments);
[].slice.apply(arguments);
对象必须有length属性
apply方法(或者call方法)不仅绑定函数执行时所在的对象,还会立即执行函数。
function.prototype.bind()
1.用于将函数体内的this绑定到某个对象,然后返回一个新函数,没有立即执行
var obj={
count:0,
inc:function(){this.count++;}
}
obj.count;//0
obj.inc();
obj.count;//1
var f=obj.inc;
f();
obj.count;//1
count;//NaN
改成:
var f=obj.inc.bind(obj);//产生一个新函数,函数中的this固定指向obj
f();
obj.count;//2
2.绑定this以外,还可以绑定原函数的参数
function add(x,y){return this.m+x+y;}
var obj={m:1}
var f=add.bind(obj,3);//传入x为3
f(2);
3.对于那些不支持bind方法的老式浏览器,可以自行定义bind方法。
if(!('bind' in Function.prototype)){
Function.prototype.bind=function(){
var fn=this;
var context=arguments[0];
var args=[].slice.call(arguments,1);
return function{
return fn.apply(context,args);
}
}
}
4.利用bind方法,可以改写一些JavaScript原生方法的使用形式,以数组的slice方法为例。
[1, 2, 3].slice(0, 1)
// [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1)
// [1]
//等同于
var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1)
// [1]
//o.slice(args)->slice(o,args)