java script中的四种函数调用.doc

javascript中四种函数调用模式及对this的不同绑定Bysaymoonon2009年10月27日撰写此文源于最近在看Douglas Crockford的JavaScript:The Good Parts中文译本Javascript语言精粹时，发现一些自己不知道或者没有一下子理解的东西，拿出来细细研究并记录一下。函数被作为很重要的一部分在书中做了详细的介绍和举例。感觉函数的四种调用方式和在不同调用方式上this绑定的不同是个重点也是难点。欢迎大家一起研究。方法调用模式：调用形式：通过.点表达式或subscript下标表达式调用一个对象中的方法。 this绑定：this被绑定到被调用方法所属的对象上。 例子：帮助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; / 在方法被调用时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.value); / 1document.writeln(this.g); / global/ 打印出全局变量g的值，函数调用结束后，this又被从myObject对象上绑定回全局对象上。myObject.increment(2);document.writeln(myObject.value); / 3函数调用模式：调用形式：当一个函数并非一个对象的属性时，它被当作一个函数来调用。 this绑定：this被绑定到全局对象上。 例子：执行下面的代码会发现，输出的结果是全局对象中g的值，与我们预期的结果不同，this被错误地绑定到全局对象上，这是JavaScript语言设计上的一个错误。帮助123456var g = global;var o = function () var g = self;document.writeln(this.g); / global this被错误地绑定到全局对象。();如果设计正确的话，当内部函数被调用时，this 应该绑定到外部函数的 this 变量。 解决该错误的方法：在函数中定义一个变量并给它赋值为 this，那么内部函数就可以通过那个变量访问到被绑定到外部函数的正确 this。按照约定，我们给那个变量命名为 that。帮助1234567891011121314151617181920var add = function (a, b) return a + b;/ 给 myObject 增加一个 double 方法。myObject.double = function () var that = this; / 解决方法var helper = function () that.value = add(that.value, that.value); / 这里的 that 被绑定到外部函数 myObject.double上;helper(); / 以函数的形式调用 helper;myObject.double();document.writeln(myObject.value); / 6构造器调用模式：调用形式：在函数名前加 new 来调用。 this绑定：将创建一个隐藏连接到该函数的 prototype 成员的新对象，同时 this 将会被绑定到这个新对象上。 例子：帮助1234567891011/ 创建一个名为 Quo 的构造器函数。它构造一个带有 status 属性的对象。var Quo = function (string) this.status = string;/ 给 Quo 的所有实例提供一个名为 get_status 的公共方法Qtotype.get_status = function () return this.status;注意：在JavaScript中如果用 new 方式调用一个函数，如果函数没有返回一个对象，则返回 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 即 Qtotype.status 在调用 new 构造 Quo 时即被赋予了 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/ 构造一个包含两个数字的数组，通过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 = Qtotype.get_status.apply(statusObject); / status 值为A-OK 在通过 apply 调用 Quo 的 g