js中的this(3)

本文讨论如何“修改”function中的this

有两个要点：
（1）为什么要修改？
关键字：共享
（2）如何修改？
关键字：call,apply,bind

如何修改

前面提到 this是一个对象，并且 是只读的：你不能手动修改this的值。

<script>
    this = {};//这是错误的
</script>

那为什么我们要如何去修改this的值呢？
使用call。

call是什么？

call是Function.prototype的一个属性。在chrome浏览器的控制台中输入如下：

console.dir(Function.prototype)

你就可以看到：

image.png

上图中还有apply,后面我们会说到。

解释一下上面的那一句代码。
Function是js的内置对象，是一个构造器，js中所有的function都是由它创造出来的。prototype是Function的原型对象，call是 prototype的一个属性。因为它的属性值是函数，更准确地来说，它是一个方法。

按原型链的规则：定义在Function.prototype对象中的属性 可以被任意的function使用。

call的作用和格式

作用

修改函数内部的this。

格式

函数f.call(newObj，参数1，参数2.....)
形参：
   newObj          ：用newObj替换函数f中的this
   参数１...参数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

保持对象中只存数据，而具体的操作通过借用函数来实现。