在一个对象中绑定函数,称为这个对象的方法。
在JavaScript中,对象的定义是:
var xiaoming = { name:'小明'; birth:1990; };
但是,如果我们给xiaoming绑定一个函数,就可以做更多的事情,比如,写一个age()方法,返回xiaoming的年龄:
var xiaoming = { name:'小明', birth:1990, age:function () { var y = new Date().getFullYear(); return y - this.birth; } }; xiaoming.age;//function xiaoming.age() xiaoming.age();//今年调用是27
绑定到对象上的函数称为方法,和普通函数也没啥区别,但是它在内部使用了一个this关键字。这是啥。
在一个方法内部,this是一个特殊变量,它始终指向当前对象,也就是xiaoming这个变量,所以,this.birth可以拿到xiaoming的birth属性。
如果我们拆开来写:
function getAge() { var y = new Date().getFullYear(); return y - this.birth; } var xiaoming = { name:'小明', birth:1990, age:getAge }; xiaoming.age();//25,正常结果 getAge();//NaN
单独调用函数getAge()怎么返回NaN?注意,我们已经进入了一个JavaScript的大坑。
JavaScript的函数内部如果调用了this,那么这个this到底指向谁?
答案是,视情况而定。
如果以对象的方法形式调用,比如xiaoming.age(),该函数的this指向被调用的对象,也就是xiaoming,这是符合预期。
如果单独调用函数,比如getAge(),此时,该函数的this指向全局对象,也就是window。
apply
虽然在一个独立的函数调用中,根据是否是stric模式,this指向undefined或者window,不过,我们还是可以控制this的指向的!
要指定函数的this指向哪个对象,可以用函数本身的apply方法,它接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是Array,表示函数本身的参数。
用apply修复getAge()调用:
function getAge() { var y = new Date().getFullYear(); return y - this.birth; } var xiaoming = { name:'小明', birth:1990, age:getAge }; xiaoming.age();//25 getAge.apply(xiaoming,[]);//25,this指向xiaoming,参数为空
另一个与apply()类似的方法是call(),唯一区别是:
apply()把参数打包成Array再传入;
call()把参数按顺序传入。
比如调用Math.max(3,5,4),分别用apply()和call()实现如下:
Math.max.apply(null,[3,5,4]);//5 Math.max.call(null,3,5,4);//5
对普通函数调用,我们通常把this绑定为null。
装饰器
利用apply(),我们还可以动态改变函数的行为。
JavaScript的所有对象都是动态的,即使内置的函数,我们也可以重新指向新的函数。
现在假定我们想统计一下代码移动调用了多少次parseInt(),可以把所有的调用都找出来,然后手动加上count +=1,不过这样太傻了,最佳方案是用我们自己的函数替换掉迷人的parseInt();
var count = 0 ; var oldParseInt = function (){ count += 1 ; return oldParseInt.apply(null,arguments);//使用原函数 }; //测试 parseInt('10'); parseInt('20'); parseInt('30'); count;//3