本文讨论如何“修改”function中的this
有两个要点:
(1)为什么要修改?
关键字:共享
(2)如何修改?
关键字:call,apply,bind
如何修改
前面提到 this是一个对象,并且 是只读的:你不能手动修改this的值。
<script>
this = {};//这是错误的
</script>
那为什么我们要如何去修改this的值呢?
使用call。
call是什么?
call是Function.prototype的一个属性。在chrome浏览器的控制台中输入如下:
console.dir(Function.prototype)
你就可以看到:
上图中还有apply,后面我们会说到。
解释一下上面的那一句代码。
Function是js的内置对象,是一个构造器,js中所有的function都是由它创造出来的。prototype是Function的原型对象,call是 prototype的一个属性。因为它的属性值是函数,更准确地来说,它是一个方法。
按原型链的规则:定义在Function.prototype对象中的属性 可以被任意的function使用。
call的作用和格式
作用
修改函数内部的this。
格式
函数f.call(newObj,参数1,参数2.....)
形参:
newObj :用newObj替换函数f中的this
参数1...参数n : 函数f 的参数。
示例
function f(){ console.info( this.p);}
var obj1 = {"p":"obj1"}
var obj2 = {"p":"obj2"}
f.call(obj1 ); //输出obj1
f.call(obj2 ); //输出obj2
对f.call(obj1) 解释如下:
(1)调用函数f。
(2)用obj1来替换函数f中的this。
为什么要替换函数中的this?
关键字:共享。
函数是动态的,它可以执行特定的功能。
对象是属性的集合,它用来保持复杂的数据,当然,它也有自己的方法。
call的意义在于:把函数共享出来,让多个对象来共同使用。
示例:
var obj1 = {
"p":"obj1",
"f":function(){console.info(this.p);}
}
var obj2 = {
"p":"obj2",
"f":function(){console.info(this.p);}
}
上面定义了两个对象,它们的结构大致相同。
我们通过调用他们各自的f方法去访问它们的p属性:
obj1.f();//obj1
obj2.f();//obj2
上面的代码中,obj1,obj2中保存的f属性是完全一样的,但在内存是保存了两份拷贝:
obj1.f === obj2.f;//false
这是浪费空间。可以改进一下:
function f(){console.info(this.p);}
var obj1 = {
"p":"obj1",
"f":f
}
var obj2 = {
"p":"obj2",
"f":f
}
//如下效果是一样的
obj1.f();//obj1
obj2.f();//obj2
改进之在于:
obj1.f === obj2.f;//true
如果你连这个f属性都不想要,则就可以把代码写成我们前面的样子:
function f(){ console.info( this.p);}
var obj1 = {"p":"obj1"}
var obj2 = {"p":"obj2"}
f.call(obj1 ); //输出obj1
f.call(obj2 ); //输出obj2
保持对象中只存数据,而具体的操作通过借用函数来实现。