JavaScript 中“this”的使用让我感到困惑

Question

Working with the JavaScript one of the confusing thing is when using this

var x = {  
  ele : 'test',
  init : function(){ 
    alert(this.ele);
  }
}

However when dealing with multiple object and especially events context of this changes and becomes confusing to keep track/understand.

So if anybody has better inputs/guidelines/thoughts/better practices, please share. Also I would like know if using this gives any (performance) advantage or what?

Answer 1

It's not about performance, it's about accessing a property of a specific instance of an object:-

x.init()

Would not display 'test' if you hadn't use this in the function.

Effectively the above line is the same as:-

x.init.call(x);

the first paramater in the use of call is assigned to this when the function is executed.

Now consider:-

var fn = x.init;  //Note no () so the function itself is assigned to the variable fn
fn();

Now you get nothing in the alert. This because the above is effectively:-

fn.call(window);

In browser hosted Javascript the window object is synonymous with the global object. When a function is called "in the raw" then the this defaults to the global object.

The classic error is doing something like this:-

var x = {
   ele: 'test';
   init: function(elem) { 
      elem.onclick = function() { alert(this.ele); }
   }
}
x.init(document.getElementById('myButton'));

However this doesn't work because the function attached to the onclick event is called by the browser using code like:-

onclick.call(theDOMElement)

Hence when the function is running this isn't what you think it is.

My usual solution to this situation is:-

var x = {
   ele: 'test';
   init: function(elem) {
      var self = this; 
      elem.onclick = function() { alert(self.ele); }
      elem = null;
   }
}
x.init(document.getElementById('myButton'));

Note the elem = null is IE memory leak work-around.

Answer 2

It is very confusing. It depends on how you call the function. Doug Crockford did a good write-up in his book Javascript, the Good Parts . The gist of it is in this excellent answer to an otherwise badly formulated question.

And no, it's not about performance.

Answer 3

To me, it helped a lot the following guideline: every time you see this think owner . The object who owns the variable name to which the function is assigned will become the this . If you cannot make sense to who owns it, then this will be window.

Answer 4

A good and enlightening article on the this keyword is this (no pun intended). The article may clear things up for you, I know it did for me.

The essential rule is that the this keyword inside a function always refers to the function owner, and the key to understanding the consequences is understanding when functions are referred and when they are copied . See the beforementioned article for examples.

Answer 5

use

var me = this;

outside of the

function(){

then you can refer to me inside the function()