On the this pointer and reference knowledge _javascript techniques in JavaScript

This is a keyword for JavaScript, and the value of this is changed as the function is used differently. But there is always a principle, that is, this refers to the object that calls the function.

The this pointer is declared in a class in a traditional OO language, representing the object itself. In JavaScript, 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 (); 
The Foo function owner is window, in which this refers to a Window object (******** unless you use the New,call,apply method to change the reference relationship of this)

This and objects:

var person = { 
name: ' Theo Wong ', 
Gender: ' Male ', 
getname:function () { 
console.log (this.name); The GetName function owner is the person object 
} 
}; 
Person.getname ();

This in a nested function

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 a nested function, because the execution context of the nested function is window, this refers to the Window object, which is actually a bug in the ecma-262-3 that has been fixed in the latest ecma-262-5

This in event handling:

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

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

Binding events via Dom.onclick, document.getElementById (' Test '). onclick = Showvalue;

At this point Showvalue is invoked as the DOM's OnClick method, so it should refer to the DOM object instead of the Window object

2. Written in HTML tags, <input id= "test" type= "text" onclick= "Showvalue ();"/>

When we click on the DOM, we don't get the correct this, at which point this refers to the Window object because the Window object does not have a value defined in it, so the this.value is not obtained

Instead of assigning the Showvalue function to the onclick of the DOM object, instead of referencing it, the function () owner is the window

document.getElementById (' Test '). onclick = function () {
showvalue ();
}

Monitoring via Addeventlistener/attachevent binding event

<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):d om.attachevent (' onclick ', test); 
AddEventListener Test 
//attachevent window 
</script>
//This binding event listener way, attachevent This is the Window object, and AddEventListener is the 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 ',);//this refers to the new object, which changes the reference relationship 
Obj.fun ();//xht

This and call

Define a person, named Jack 
var jack = { 
name: "Jack", 
age:26 
} 
//Define another person, the name is Abruzzi 
var Abruzzi = { 
Name: "Abruzzi", 
age:26 
} 
//Define a global function object functions 
Alertname () {return 
this.name; 
} 
//Set Alertname context for Jack, this is Jack 
alert (Alertname.call (Jack)); 
Set the Alertname context to Abruzzi, this is Abruzzi 
alert (Alertname.call (Abruzzi));

References are a more interesting topic, and unlike other languages, references in JavaScript always point to the final object, not the reference itself

var obj = {}; Null object 
var ref = obj;//reference 
Obj.name = "Objecta"; 
Alert (ref. name); Ref then adds the name attribute 
obj = ["One", "two", "three"],//obj points to another object (array object) 
alert (ref.name), and//ref points to the original object 
a Lert (obj.length); 3 
alert (ref.length);

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

References can only point to specific objects, and when a specific object changes, it refers to the original object, not the changed object.

The above is a small set to introduce the JavaScript in the this pointer and reference knowledge, hope to help everyone, if you have any questions please give me a message, small set will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!