Javascript如何评估“这个”？

Question

I am trying to understand some basic javascript .

I have the following snippet. We have the name variable which in both cases are referenced over getName Method.

First alert outputs HocusPocus , while the second one outputs GeorgeThomas . But I do not understand how this refers to name in this case

  var name = 'Gerorge Thomas'; var obj = { name: 'Cinderella', value: { name: 'HocusPocus', getName: function() { return this.name; } } }; alert( obj.value.getName() ); var testing = obj.value.getName; alert(testing()); 

Answer 1

To understand this issue, you have to understand how Javascript sets the value of this in a function call.

There's a summary of all the methods here: When you pass 'this' as an argument

For your particular case, when you do this:

var testing = obj.value.getName; 

You now have a reference to the getName function. You no longer have any connection at all to obj.value . So, test() just calls getName as an ordinary function. In Javascript when an ordinary function call is made, then the value of this will be either the global object ( window in a browser) or in strict mode, it will be undefined.

In your case, this becomes the window object so this.name is window.name which points to the global variable name and thus you get the result 'Gerorge Thomas'.

In fact, if you run your code in strict mode, it will cause an error which is, in fact, one of the benefits of strict mode that it points out accidental errors like this.

---

On the other hand, if you execute a function with the form of obj.method() , then this is set to be obj . So, when you do:

obj.value.getName()

that is equivalent to:

var o = obj.value;
o.getName()

which is the obj.method() form of calling a function which will set the this pointer to be the object, which in this case is obj.value .

---

It is possible to work around this issue in a couple of ways. Here's an example of working around it using .bind() .

 var name = 'Gerorge Thomas'; var obj = { name: 'Cinderella', value: { name: 'HocusPocus', getName: function() { return this.name; } } }; document.write( obj.value.getName() + "<br>"); var testing = obj.value.getName.bind(obj.value); document.write(testing()); 

Answer 2

Well it only needs some reflection, let's analyse it:

• In the first alert we are calling the getName() method of the obj.value object so it returns obj.value.name which is "HocusPocus" .

alert( obj.value.getName() ); we call this.name where this refers to obj.value so name is HocusPocus

• But in the second alert we are creating a new function testing() with the body of the getName() method, so it will be attached to the global window object and if we call it we will get the global name value wich is 'Gerorge Thomas' .

alert(testing()); we are dealing with this.nam e where this refers to the global scope so name is 'Cinderella' .

Answer 3

First, you're calling a method from inside the obj object. The 2nd time, you're making a copy of the function (not really, it's just a reference) in the global scope. So you could also write window.testing() for the 2nd call. I think that makes it clear.