Soft Technology Web Classroom: JavaScript this keyword

Examples

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

 

What is this that?

JavaScript  the this keyword refers to the object to which it belongs.

It has different values, depending on its use position:

• In the method, the this refers to the owner of the object.
• The individual case, the this refers to the global object.
• In function, the this refers to the global object.
• In function, the strict mode, the this is undefined.
• In the event, the this refers to the element that receives the event.

Like  call () and  apply () may be a method in this reference to any object.

The method of this

In the object method, the this refers to the method of the "owner."

In the example of the top page, the this means that a person object.

person is the owner of the object fullName methods.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

 

Separate this

When used alone, the owner of the global object, so  this means a global object.

In the browser window, is a global object  [object Window]:

Examples

var x = this;

 

In strict mode, if used alone, then  this refers to the global object  [object Window]:

Examples

"use strict";
var x = this;

 

The function of this (default)

In the JavaScript function, the owner of the default binding function of  this.

Thus, in a function, the this refers to the global object  [object Window].

Examples

function myFunction() {
  return this;
}

 

The function of this (strict mode)

JavaScript strict mode does not allow the default binding.

Thus, when used in the function, in the strict mode, the this is undefined ( undefined).

Examples

"use strict";
function myFunction() {
  return this;
}

 

This event handler

In the HTML event handler, the this refers to the receiver of this event HTML elements:

Examples

<button onclick = "this.style.display = ' none'"> 
  Click to delete me! 
</ button>

 

Binding object methods

In this example, the this is a person object (person object is the "owner" of the function):

Examples

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

 

Examples

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

 

In other words, firstName property this.firstName mean this (person) of the object.

Explicit function bindings

call () and  apply () method is a pre-defined JavaScript methods.

They can be used to invoke an object method of another object as a parameter.

You can read about later in this tutorial  call () and  apply () is more.

In the following example, when used as person1.fullName person2 call parameter, the this reference person2 will, even if it is a method person1:

Examples

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"