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!