JavaScript Learning Summary--this Object

In JavaScript, the This keyword is dynamically bound, or run-time bound, which greatly enhances the flexibility of our program and also brings a lot of confusion to beginners. This article summarizes several usage scenarios and common pitfalls of this.

Global Environment

Use this in the global environment, which points to the global object. In the Web browser, the Window object.

alert(this === window);    // true

Function call

When called as a normal function, this also points to the global object within the function.

var name = "window";function sayName(){ var name = "fun"; alert(this.name);}sayName(); // "window"

Method invocation as an object

When the method inside the object is called, this is the object that the method resides on.

var name = "window";var obj = {  name: "obj",  sayName: function(){ alert(this.name); }};obj.sayName(); // "obj"

Called as a constructor function

The constructors in JavaScript are special, as are normal functions if not called with new. As another rule of law, the constructor starts with an uppercase letter, reminding the caller to invoke it in the correct way. If called correctly, this binds to the newly created object.

function Person(name){    this.name = name, this.sayName = function(){ alert(this.name); }}var person1 = new Person("daoko");person1.sayName(); // "darko"

Apply and call calls

Apply and call are the two methods of a function object that modify the context in which the function executes, that is, the object to which this is bound. The first parameter of apply and call is the object that this is bound to, and the global object is called by default if the arguments to apply and invoke are null.

var name = "window"var obj = {  name: "object"}function sayName(){ alert(this.name);}sayName(); // 直接调用函数sayNamesayName.call(obj); // 用call方法修改this的指向sayName.call(); // 当call方法的参数为空时，默认调用全局对象

Common errors in special cases

We first look at such a chestnut:

var name = "window";var obj = {  name: "obj",  sayName: function(){ var test = function(){ alert(this.name); // this绑定到全局对象上 } test(); }}obj.sayName(); // "window"

is not the same as the method invocation of the object as described above, according to our understanding at this point this should point to the Obj object, but this is not the case, this time the this point to the global object.

This is a JavaScript design flaw, the correct design is that the internal function of this should be bound to its outer function corresponding to the object, in order to circumvent this flaw, we can use the variable substitution method, conventional, the variable is generally named that. In this pest, we create a local variable that points to the Obj object.

var name = "window";var obj = {  name: "obj",  sayName: function(){ var that = this; // that指向对象obj var test = function(){ alert(that.name); } test(); }}obj.sayName(); // "obj"

An assignment expression for a method

When we assign a method of an object to a variable, what happens to its this? Look at a chestnut:

var name = "window";var obj = {  name: "obj",  sayName: function(){ alert(this.name); }}var test = obj.sayName;obj.sayName(); // "obj"test(); // "window"

From the chestnut above we can see that when the object obj method is assigned to a new variable test, its this direction has changed, the test is called to a normal function, this point to the global object.

JavaScript Learning Summary--this Object