Detailed explanation of the use of this in javascript

Like many other object-oriented languages, JavaScript also has the this keyword, which is used in functions to point to the object that calls this method. In actual programming, to determine who this points to, you can generally follow the following principles:

• If the function is called by Function.call or Function.apply, then this points to the first point of call/apply parameter, if the parameter is null or undefined, this points to the global object (in the browser, the global object is the window object).

• If the function is called by Function.bind, then this will point to the first parameter of bind (when the method is created).

• If the function is called as a method by an object, then this points to the object.

• If the function is simply called as a function and is not attached to any object, then this points to the global variable window.

Function

First, let us look at the "function":

function introduce() {
   alert("Hello, I am Laruence
");
}

For this function, the this keyword Who does it point to?

For functions defined globally, the owner of the function is the current page, which is the window object.

That’s why, I put the function in quotes. Because the definition The global function is actually a method of the window object.

So, we can call it directly through the function name, or we can call it through the window. method name. At this time, the this keyword in the method Points to its owner: window object.

If we look at the introduce attribute of window, we will get:

var name = "I am Laruence";
function introduce() {
   alert(this.name);
}
alert(window.introduce);
/**
* output:
* function introduce() {
* alert(this.name);
* }
*/

After reading the above code, you may think that since, the global function It is a method of the window object, and global variables are attributes of the window object (already mentioned in the Javasript scope). Then, you can use the this keyword to access global variables in the global function, right?

The answer is Sure, if you call the introduce function, you will know me as Laruence.

Event processing function

Perhaps, most of the reasons for the confusion about this keyword It comes from when functions (methods) are used in event processing.

<input id="name" type="text" name="name" value="Laruence" />

For example, we now need to display the value of the name input box when clicking on the "name" input box. Then, we can write as follows Code:

function showValue() {
   alert(this.value);
}
document.getElementById("name").onclick = showValue;

The above code runs normally, but why? Doesn’t it mean that the this pointer of the function always points to the function owner? Doesn’t it mean that the owner of the global variable is the window object?

Haha, if you can think of this question, it means you are reading my article seriously. Otherwise, I suggest you read it from the beginning, otherwise you will still be confused after reading it~

Well, yes, for the above In the code, showValue is defined in the global object, so it seems that the problem can only occur when the onclick event is bound.

We know that everything in Js is an object, and so are functions and methods. The properties of the object, but the function has executable internal properties. Therefore, for the above code, when binding the processor to onclick, it actually assigns a value to the onclick property of the input box Dom object with the id of name.

In other words, we gave the function showValue Copy to the onclick attribute of the name input box object. If we look at the onclick at this time:

function showValue() {
   alert(this.value);
}
document.getElementById("name").onclick = showValue;
alert(document.getElementById("name").onclick);
/**
* output
* function showValue() {
* alert(this.value);
* }
*/

So, when the event is triggered, name will be called In the onclick method of the input box, at this time, the this keyword naturally points to the name input box.

However, confusing things come, such as the following writing:

<span class="kwd">function</span><span class="pln"> showValue</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><br/><span class="pln">   alert</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">value</span><span class="pun">);</span><br/><span class="pun">}</span><br/><span class="pun"><</span><span class="pln">input id</span><span class="pun">=</span><span class="str">"name"</span><span class="pln"> type</span><span class="pun">=</span><span class="str">"text"</span><span class="pln"> name</span><span class="pun">=</span><span class="str">"name"</span><span class="pln"> value</span><span class="pun">=</span><span class="str">"Laruence"</span><span class="pln"> onclick</span><span class="pun">=</span><span class="str">"showValue()"</span><span class="pun">/></span>

It cannot run normally, why is this?

Well, because at this time, it is not an assignment, but a reference.

If we pay attention to the two ways of writing onclick, you will find that, For the previous method, we used:

dom.onclick = showvalue; //没有调用符

And for the previous method:

onclick = "showvalue()" //有调用符

This can also reflect the difference between the two: for the former, it is assignment, and for The latter is a reference. If we check the onclick attribute of the input box at this time, we get:

<span class="pln">alert</span><span class="pun">(</span><span class="pln">dom</span><span class="pun">.</span><span class="pln">onclick</span><span class="pun">);</span><br/><span class="com">/**</span><br/><span class="com">* output:</span><br/><span class="com">* function onclick() {</span><br/><span class="com">*  showValue();</span><br/><span class="com">* }</span><br/><span class="com">*/</span>

Do you see the difference? You can understand why?

At this point, there is A very interesting example, you can try it under IE:

<img src="xxx" onerror="alert(1);} function hi() { alert(2); " />

Change the pointer of this

Well, now that we know why, how can we make it Does this point to the place we want to point to?

For the above event processing function, we can write it in the following ways:

dom.onclick = showValue();
dom.onclick = function() { alert(this.value) ;}
<input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.
dom.addEventListener(dom, showValue, false); //ff only

And for situations where it is not an event processing function, we You can use apply, or call, to change the pointer of this keyword.

For example:

var laruence = {
   name : "laruence",
   age : 26,
   position : "Senior PHP Engineer",
   company : "Baidu.inc"
};
 
function introduce() {
   alert(this.name);
}
 
introduce.call(laruence);

Example of function being called by Function.call:

var myObject = {
  sayHello : function() {
    console.log("Hi! My name is " + this.myName);
  },
  myName : "Rebecca"
};
var secondObject = {
  myName : "Colin"
};
myObject.sayHello();         // logs "Hi! My name is Rebecca"
myObject.sayHello.call(secondObject); // logs "Hi! My name is Colin"

Function being called by Function. Called example:

var myName = "the global object",
  sayHello = function () {
    console.log("Hi! My name is " + this.myName);
  },
  myObject = {
    myName : "Rebecca"
  };
var myObjectHello = sayHello.bind(myObject);
sayHello();    // logs "Hi! My name is the global object"
myObjectHello(); // logs "Hi! My name is Rebecca"

Example of function being called by object:

var myName = "the global object",
  sayHello = function() {
    console.log("Hi! My name is " + this.myName);
  },
  myObject = {
    myName : "Rebecca"
  },
  secondObject = {
    myName : "Colin"
  };
myObject.sayHello = sayHello;
secondObject.sayHello = sayHello;
sayHello();        // logs "Hi! My name is the global object"
myObject.sayHello();   // logs "Hi! My name is Rebecca"
secondObject.sayHello(); // logs "Hi! My name is Colin"

When calling a function in a deep namespace, we usually cache a variable pointing to the function to be called function to reduce the amount of code. But doing so will change the value of this in the function and ultimately perform the wrong operation. For example:

var myNamespace = {
  myObject : {
    sayHello : function() {
      console.log("Hi! My name is " + this.myName);
    },
    myName : "Rebecca"
  }
};
var hello = myNamespace.myObject.sayHello;
hello(); // logs "Hi! My name is undefined"

So, if you want to cache variables to save the amount of code, the correct approach is to only save up to the object that calls that function:

var myNamespace = {
  myObject : {
    sayHello : function() {
      console.log("Hi! My name is " + this.myName);
    },
    myName : "Rebecca"
  }
};
var obj = myNamespace.myObject;
obj.sayHello(); // logs "Hi! My name is Rebecca"

In short, there is a big principle: who calls If you point to that function, this will point to who.

The above is the detailed content of Detailed explanation of the use of this in javascript. For more information, please follow other related articles on the PHP Chinese website!