1、javascript 中四种函数调用模式及对this 的不同绑定By saymoon on 2009 年 10 月 27 日撰写此文源于最近在看 Douglas Crockford 的JavaScript:The Good Parts中文译本Javascript 语言精粹时，发现一些自己不知道或者没有一下子理解的东西，拿出来细细研究并记录一下。函数被作为很重要的一部分在书中做了详细的介绍和举例。感觉函数的四种调用方式和在不同调用方式上this绑定的不同是个重点也是难点。欢迎大家一起研究。方法调用模式：调用形式：通过.点表达式或subscript下标表达式调用一个对象中的方法。 this绑定：t
2、his 被绑定到被调用方法所属的对象上。 例子：帮助123456789101112131415161718192021222324/ 创建 myObject 对象。它有一个 value 属性和一个 increment 方法。/ increment 方法接收一个可选参数。如果参数不是数字，那么默认使用数字 1。var g = global;var myObject = value: 0,increment: function (inc) document.writeln(this.g);this.value += typeof inc = number ? inc : 1; / 在方法被调用时
3、this 被绑定为 myObject 对象。;document.writeln(this.g); / global/ 打印出全局变量 g 的值，说明 this 被绑定在全局对象上。myObject.increment(); / 在这里 increment 方法才被调用，this 才被绑定到 myObject 对象，这是特有“超级”迟绑定（very late binding）。/ 这时打印出的 this.g 为 undefined，因为 myObject 中没有 g 这个属性，可以看出这时 this 被绑定到了 myObject 对象上。document.writeln(myObject.val
4、ue); / 1document.writeln(this.g); / global/ 打印出全局变量 g 的值，函数调用结束后，this 又被从 myObject 对象上绑定回全局对象上。myObject.increment(2);document.writeln(myObject.value); / 3函数调用模式：调用形式：当一个函数并非一个对象的属性时，它被当作一个函数来调用。 this绑定：this 被绑定到全局对象上。 例子：执行下面的代码会发现，输出的结果是全局对象中 g 的值，与我们预期的结果不同，this 被错误地绑定到全局对象上，这是 JavaScript 语言设计上的一个
5、错误。帮助123456var g = global;var o = function () var g = self;document.writeln(this.g); / global this 被错误地绑定到全局对象。();如果设计正确的话，当内部函数被调用时，this 应该绑定到外部函数的 this 变量。解决该错误的方法：在函数中定义一个变量并给它赋值为 this，那么内部函数就可以通过那个变量访问到被绑定到外部函数的正确 this。按照约定，我们给那个变量命名为 that。帮助1234567891011121314var add = function (a, b) return a
6、+ b;/ 给 myObject 增加一个 double 方法。myObject.double = function () var that = this; / 解决方法var helper = function () that.value = add(that.value, that.value); / 这里的 that 被绑定到外部函数 myObject.double 上;151617181920helper(); / 以函数的形式调用 helper;myObject.double();document.writeln(myObject.value); / 6构造器调用模式：调用形式：在函
7、数名前加 new 来调用。 this 绑定：将创建一个隐藏连接到该函数的 prototype 成员的新对象，同时 this 将会被绑定到这个新对象上。 例子：帮助1234567891011/ 创建一个名为 Quo 的构造器函数。它构造一个带有 status 属性的对象。var Quo = function (string) this.status = string;/ 给 Quo 的所有实例提供一个名为 get_status 的公共方法Quo.prototype.get_status = function () return this.status;注意：在 JavaScript 中如果用 n
8、ew 方式调用一个函数，如果函数没有返回一个对象，则返回 this。 下面在用 new 调用 Quo 这个构造函数时，因为 Quo 函数没有返回值，所以默认返回 this gei myQuo。帮助12345/ 构造一个 Quo 实例var myQuo = new Quo(confused); / myQuo 的值被赋予了 this，而此时的 this 是 Quo 的 prototype 成员。document.writeln(myQuo.get_status(); / confused this.status 即 Quo.prototype.status 在调用 new 构造 Quo 时即被赋
9、予了 confused。document.writeln(myQuo.status); / confused如果调用构造器函数时前面没有加 new，将会发生错误：帮助12var myQuo = Quo(“confused“);document.writeln(myQuo); / undefined 可见，没有用 new 调用构造器函数，它将不会有任何返回值给 myQuo。Apply/Call 调用模式：调用形式：通过 apply/call 方法调用函数，其中第一个参数为我们指定的 this 的值。 this 绑定：允许我们选择 this 的值。 例子：帮助1234/ 构造一个包含两个数字的数组
10、，通过 apply 方法调用前面的 add 函数，将数组中的数字相加var array = 3, 4;var sum = add.apply(null, array); / sum 的值为 7。add()中没有使用到 this 所以参数给其设为 null 即可。例子：帮助1234567/ 构造一个包含 status 成员的对象，通过 apply 方法调用前面的 Quo 对象的 get_status 方法返回 status。var statusObject = status : A-OK;var status = Quo.prototype.get_status.apply(statusObject); / status 值为A-OK 在通过 apply 调用 Quo 的 get_status 方法时将 statusObject 对象绑定给了 this ，所以 get_status 方法返回的结果是 statusObject 的 status 属性。先总结这么多，有不清楚的地方大家提出来，俺再补充。水吧加盟 http:/ 2yG49Q82GY76
