Effective JavaScript Item 18 Understanding the difference between function, Method, constructor call

this series as effective JavaScript 's reading notes.

Function is absolutely JavaScript In the middle of the weight. In JavaScript ,Function assumes procedures, methods, constructors Even the functions of classes and modules .

in object-oriented programming, functions , Methods as well class constructor It is often three different things that are implemented by different grammars. But in JavaScript , these three concepts are implemented by function , in three different modes.

The simplest mode of use is Functioncall :

function Hello (username) {return "Hello," + username;} Hello ("Keyser söze"); "Hello, Keyser Söze"

and Methods This concept is JavaScript is that the property of an object is a function :

var obj = {hello:function () {return "Hello," + this.username;},username: "Hans Gruber"};obj.hello (); "Hello, Hans Gruber"

in the above code, the more critical part is: using the This keyword, here's the This point to IS obj object. You might think that because the Hello method is defined on the obj object, This is pointing to the obj . But the following code:

var obj2 = {hello:obj.hello,username: "Boo Radley"};obj2.hello ();//"Hello, Boo Radley"

The real behavior is that the call itself will decide This which object will be bound to, namely:

Obj1.hello () Will be This bound to obj1 , Obj2.hello () it will be This bound to Obj2 .

just because This The binding of this rule, in the following usage is also possible:

function Hello () {return "Hello," + this.username;} var obj1 = {hello:hello,username: "Gordon Gekko"};obj1.hello ();//"Hello, Gordon Gekko" var obj2 = {Hello:hello,username : "Biff Tannen"};_obj2.hello (); "Hello, Biff Tannen"

However, in a common function, such as the above Hello function, using This keyword is not a good way, when it is called directly, This the point is a problem. In this case, this is often referred to as a global object (globalobject), which is usually the window on the browser. Object.

And this behavior is uncertain and meaningless.

so in ES5 Standard, if you use the Strict Mode , then This will be set to undefined :

function Hello () {"Use strict"; return "Hello," + this.username;} Hello (); Error:cannot Read Property "username" of undefined

This is done in order to expose potential errors more quickly, avoiding mis-operation and difficult-to-find Bug .

function The third mode of use is to speak of it as Constructor :

function User (name, passwordhash) {this.name = Name;this.passwordhash = PasswordHash;} var u = new User ("Sfalken", "0ef33ae791068ec64b502d6cb0191387"); u.name; "Sfalken"

UseNewKey Willfunctionas aConstructormake the call. and thefunctionas wellMethodThe call is not the same,Constructorwill pass in a new object and bind it to the This, and then returns the object as aConstructor's return value. andconstructor FunctionThe function itself is to initialize the object.

Summarize:

2. Method The call itself will determine This which object to bind to
4. Function Call, This it points to the global object, in the browser, usually window Object
6. Constructor Call through New keyword is complete, the This bind to a new object

Effective JavaScript Item 18 understands the difference between function, Method, constructor invocation