A brief discussion on this pointer and reference knowledge in JavaScript

This is a keyword in javascript. The value of this will change depending on the use of the function. But there is always a principle, that is, this refers to the object that calls the function.

In traditional OO language, this pointer is declared in a class and represents the object itself. In JavaScript, this represents the current context, that is, the caller's reference.

*******This always points to the owner of (function object)

This and global objects:

 var a = 1; function foo(){ var b = 2; console.log(this.a+b);//3 } foo(); //The owner of the foo function is window, and this refers to the window object in the global function (************ Unless the new, call, apply methods are used to change the reference relationship of this)

This and object:

 var person = { name:'Theo Wong', gender:'male', getName:function(){ console.log(this.name);//The owner of the getName function is a person object} }; person.getName();

This in nested functions

 var myObject = { func1:function() { console.log(this); //myObject var func2=function() { console.log(this); //window var func3=function() { console.log(this); //window }(); }(); } }; myObject.func1(); //In nested functions, since the execution context of the nested function is window, this refers to a window object. In fact, this is a bug in ECMA-262-3, which has been fixed in the latest ECMA-262-5

This in event processing:

 var showValue = function(){ alert(this.value); };

1.<input id="test" type="text" />

Binding event via dom.onclick, document.getElementById('test').onclick = showValue;

At this time, showValue is called as the onclick method of dom, so its this should refer to the dom object, not the window object anymore

2. Write it in the html tag, <input id="test" type="text" onclick="showValue();" />

When clicking on the dom, we cannot get the correct this. This at this time refers to the window object. Because there is no value defined in the window object, this.value cannot be obtained.

***At this time, it is not assigning the showValue function to the onclick of the dom object, but a reference. At this time, the owner of the function() function is window

 document.getElementById('test').onclick = function(){showValue();}

Binding event listening via addEventListener/attachEvent

 <input type="text" id="test" /> <script type="text/javascript"> var dom = document.getElementById('test'); id = 'window'; function test(){ alert(this.id); } dom.addEventListener?dom.addEventListener('click',test,false):dom.attachEvent('onclick',test); //addEventListener test //attachEvent window </script>//This way of binding event monitoring, attachEvent This is a window object, and addEventListener is a dom object

This and construct:

 function obj(name,age){ this.name = name; this.age = age; this.fun = function(){ alert(this.name); }; } var obj = new obj('xht',18);//this refers to this new object, new changes the reference relationship of this obj.fun();//xht

This and call

 //Define a person with the name jack var jack = { name : "jack", age : 26 } //Define another person with the name abruzzi var abruzzi = { name : "abruzzi", age : 26 } //Define a global function object function alertName(){ return this.name; } //Set the context of alertName to jack, and this at this time is jack alert(alertName.call(jack)); //Set the context of alertName to abruzzi, and this at this time is abruzzi alert(alertName.call(abruzzi));

Quotations are a relatively interesting topic. Unlike other languages, references in JavaScript always point to the final object, not the reference itself.

 var obj = {}; // Empty object var ref = obj; // Reference obj.name = "objectA" ; alert(ref . name); //ref Then add the name attribute obj = ["one" , "two" , "three"]; //obj points to another object (array object) alert(ref.name); //ref also points to the original object alert(obj.length ); //3 alert(ref.length);

obj is just a reference to an anonymous object, so ref does not point to it.

The reference can only point to a specific object. When the specific object changes, the reference or reference to the original object, rather than the changed object.

The above is the information about this pointer and reference in JavaScript introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!