Talking about this pointer and reference knowledge in JavaScript

this is a keyword of javascript, and the value of this will change as the function is used in different situations. But there is always a principle, that is, this refers to the object that calls the function.

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

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

this and Global Objects:

var a = 1; 
function foo(){ 
var b = 2; 
console.log(this.a+b);//3 
} 
foo(); 
//foo The function owner is window, In the global function this Refers to the window Object (******** Unless you use new,call,apply Method to change this The reference relationship of )

this and Objects:

var person = { 
name:'Theo Wong', 
gender:'male', 
getName:function(){ 
console.log(this.name);//getName The function owner is 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 , Because the execution context of nested functions is window, So this Refers to the window Object , Actually, this is ECMA-262-3 Adj. 1 A bug, In the latest ECMA-262-5 Has been repaired in 

this in event handling:

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

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

Bind events through dom. onclick, document. getElementById ('test'). onclick = showValue;

In this case, showValue is called as the onclick method of dom, so its this should refer to the dom object instead of the window object

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

When we click dom, we can't get the correct this. At this time, this refers to window object, because value value is not defined in window object, so we can't get this. value

*** This is not an onclick that assigns the showValue function to the dom object, but a reference, where the owner of the function () function is window

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

Event listening through addEventListener/attachEvent binding

<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 listening ,attachEvent this Yes window Object , And addEventListener Is dom Object's 

this and construction:

function obj(name,age){ 
this.name = name; 
this.age = age; 
this.fun = function(){ 
alert(this.name); 
}; 
} 
var obj = new obj('xht',18);//this It means this new object ,new  Change this The reference relationship of  
obj.fun();//xht

this and call

// Definition 1 Individual , The name is jack 
var jack = { 
name : "jack", 
age : 26 
} 
// Define another 1 Individual , The name is abruzzi 
var abruzzi = { 
name : "abruzzi", 
age : 26 
} 
// Definition 1 Global function objects  
function alertName(){ 
return this.name; 
} 
// Settings alertName The context of is jack,  At this time this For jack 
alert(alertName.call(jack)); 
// Settings alertName The context of is abruzzi, At this time this For abruzzi 
alert(alertName.call(abruzzi));

References are an 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; //  Quote  
obj.name = "objectA" ; 
alert(ref . name); //ref  Followed by the addition of  name  Attribute  
obj = ["one" , "two" , "three"]; //obj  Points to another 1 Objects  (  Array object  ) 
alert(ref.name); //ref  It also points to the original object  
alert(obj.length ); //3 
alert(ref.length);

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

References can only point to concrete objects. When concrete objects change, references still refer to the original objects, not the changed objects.