Practical analysis of usage of this in javascript

This article describes the usage of this in javascript. Share it for your reference, as follows:

Practice one: This pointing in events such as clicks

html structure:

<button id='btn'>click me</button>

JavaScript Structure:

var btn = ('btn');
 = function(event) {
 (); // click me
 // There is another way to do it as follows: use event objects var evt = event || ;
 var target =  || ;
 (); // click me
}

Practice II: This pointing in the object literal json, pointing to its own object

var p = {
 "name":"Tom",
 "say":function(){
  ( + ' say something!');
 }
}
(); // Tom say something!

Practice Three: The use of this in global scope

var a = 1;
(this); // window
(); // 1
function test(){
 (this); // window
  = 'i am haha';
};
test(); // Once the function is executed, the haha scope becomes global(haha); // i am haha

Practice Four: The pointing of this in the timer. The timer is a method of the window object. This in the timer points to the window object.setTimeout()andsetInterval()It's the same

var div = ('div');
 = function() {
 var that = this; // Use that to store the current div dom element setTimeout(function(){
  (this + ' i am this'); // [object Window] i am this
  (that + ' i am that'); // [object HTMLDivElement] i am that
 }, 100);
}

Practice Five: This pointing in the object, pointing to the current instance object

function Person(){
  = 'jack';
};
 = {
 buy:function() {
  ( + ' go buy!');
 }
}
var p = new Person();
(); // jack;
(); // jack go buy!

Practice VI: Application of this in closure 1

var age = 20;
var person = {
"age" : 10,
"getAgeFunc" : function(){
return function(){
return ; // this point to window};
}
};
(()()); // 20
/*
   Analyze this code: the person calls getAgeFunc() to return a function in memory. This function is global, and then adds () to execute.  Then, return 20
 */

Practice 7: Application of this in closure 2

var age = 20;
var person = {
"age" : 10,
"getAgeFunc" : function(){
    var that = this;
return function(){
return ; // that point to person};
}
};
(()()); // 10
/*
   Analyze this code: person calls getAgeFunc() and replaces the current object with that. When the returned closure function is executed, age is a property of the person object, then return 10
 */

Practice Eight: Use call and apply to change the direction of this, and we will analyze the concepts of call and apply and closure in detail later.

var person = {
 "name":"Tom",
 "say":function(x,y) {
   ( + ' say ' + x + ' ' + y);
 }
}
var student = {
 "name":"Lucy"
}
(student,'hello','world'); // Lucy say hello world
(student,['hello','javascript']); // Lucy say hello javascript

Interested friends can use itOnline HTML/CSS/JavaScript code running tool：http://tools./code/HtmlJsRunTest the above code running effect.

For more information about JavaScript, readers who are interested in reading this site's special topic:JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.