JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

8.2.2 Method Invocation

8.2.2 Method Invocation


A method is nothing more than a JavaScript function that is stored in a property of an object. If you have a function f and an object o, you can define a method named m of

o with the following line:

o.m = f;

Having defined the method m() of the object o, invoke it like this: o.m();

8.2 Invoking Functions | 167

Or, if m() expects two arguments, you might invoke it like this: o.m(x, y);

The code above is an invocation expression: it includes a function expression o.m and two argument expressions, x and y. The function expression is itself a property access expression (§4.4 ), and this means that the function is invoked as a method rather than as a regular function.

The arguments and return value of a method invocation are handled exactly as described above for regular function invocation. Method invocations differ from function invocations in one important way, however: the invocation context. Property access expressions consist of two parts: an object (in this case o) and a property name (m). In a method invocation expression like this, the object o becomes the invocation context, and the function body can refer to that object by using the keyword this. Here is a concrete example:

var calculator = { // An object literal

operand1: 1,

operand2: 1,

add: function() {

// Note the use of the this keyword to refer to this object.

this.result = this.operand1 + this.operand2;

}

};

calculator.add(); // A method invocation to compute 1+1.

calculator.result // => 2

Most method invocations use the dot notation for property access, but property access expressions that use square brackets also cause method invocation. The following are both method invocations, for example:

o["m"](x,y); // Another way to write o.m(x,y). a[0](z) // Also a method invocation (assuming a[0] is a function).

Method invocations may also involve more complex property access expressions:

customer.surname.toUpperCase(); // Invoke method on customer.surname f().m(); // Invoke method m() on return value of f()

Methods and the this keyword are central to the object-oriented programming paradigm. Any function that is used as a method is effectively passed an implicit argument— the object through which it is invoked. Typically, a method performs some sort of operation on that object, and the method-invocation syntax is an elegant way to express the fact that a function is operating on an object. Compare the following two lines:

rect.setSize(width, height); setRectSize(rect, width, height);

The hypothetical functions invoked in these two lines of code may perform exactly the same operation on the (hypothetical) object rect, but the method-invocation syntax in the first line more clearly indicates the idea that it is the object rect that is the primary focus of the operation.

Method Chaining

When methods return objects, you can use the return value of one method invocation as part of a subsequent invocation. This results in a series (or “chain” or “cascade”) of method invocations as a single expression. When working with the jQuery library ( Chapter 19 ), for example, it is common to write code like this:

// Find all headers, map to their ids, convert to an array and sort them $(":header").map(function() { return this.id }).get().sort();

When you write a method that does not have a return value of its own, consider having the method return this. If you do this consistently throughout your API, you will enable a style of programming known as method chaining2 in which an object can be named once and then multiple methods can be invoked on it:

shape.setX(100).setY(100).setSize(50).setOutline("red").setFill("blue").draw();

Don’t confuse method chaining with constructor chaining, which is described in §9.7.2 .

Note that this is a keyword, not a variable or property name. JavaScript syntax does not allow you to assign a value to this.

Unlike variables, the this keyword does not have a scope, and nested functions do not inherit the this value of their caller. If a nested function is invoked as a method, its this value is the object it was invoked on. If a nested function is invoked as a function then its this value will be either the global object (non-strict mode) or undefined (strict mode). It is a common mistake to assume that a nested function invoked as a function can use thisto obtain the invocation context of the outer function. If you want to access the this value of the outer function, you need to store that value into a variable that is in scope for the inner function. It is common to use the variable self for this purpose. For example:

var o = { // An object o.

m: function() { // Method m of the object. var self = this; // Save the this value in a variable. console.log(this === o); // Prints "true": this is the object o. f(); // Now call the helper function f().

function f() { // A nested function f console.log(this === o); // "false": this is global or undefined console.log(self === o); // "true": self is the outer this value.

}

} }; o.m(); // Invoke the method m on the object o.

Example 8-5 , in §8.7.4 , includes a more realistic use of the var self=this idiom.

2. The term was coined by Martin Fowler. See http://martinfowler.com/dslwip/MethodChaining.html .

8.2 Invoking Functions | 169

欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/27800.html
友情链接It题库(ittiku.com)| 版权归yishouce.com所有| 友链等可联系 admin#yishouce.com|粤ICP备16001685号-1