// js inside thoroughly understand this
The first case // * *
// global scope or normal function of the global object this window
// Direct Print
console.log(this) // window
// function declaration function
function a() {
console.log(this)
}
a(); // window
// function declaration function then assigned to the variable
b = function bar() {
console.log(this)
}
b() // window
// function is performed automatically
(function () { console.log(htis) })() // window
// * * The second case
// method call in the end of this point who
each person = {
run: function () {
console.log(this)
}
}
person.run() // person
// Bind event
var btn = document.querySelector("button")
btn.onclick = function () {
console.log(this) // btn
}
// event listener
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
console.log(this) // btn
})
// jquery's ajax
$.ajax({
self: this, //window
type: "get",
url: url,
async: true,
success: function (res) {
console.log (this) // this points to an object passed $ .ajxa () in
console.log(self) // window
}
});
// Here the following description, the code will be abbreviated as $ .ajax (obj), this points to obj, obj in point in this window, because the success method, exclusive obj call their own, so this point obj
* In the third // constructor or a constructor this refers to the prototype object instance constructor *
// do not use new point window
function Person (name) {
console.log(this) // window
this.name = name;
}
Person ( '')
// use new
function Person (name) {
this.name = name
console.log(this) //people
self = this
}
var person = new Person ( 'poultry')
console.log(self === people) //true
// this new change this point, this will be a window of a Person instance object people
// sharply style summary:
// general function of this:
// 1. this is always on behalf of its direct callers (js this is the execution context), for example obj.func, then this is the func obj
// 2. In the default (non-strict mode, unused 'use strict'), did not find direct caller, then this refers to the window (the convention)
// 3. In strict mode, there is no direct function in this caller is undefined
4. // call, apply, bind (ES5 new) binding, this refers to the object bound
// function of this arrow
// arrow function does not own this, it's this is inherited; the default point in the object (host object) at which it is defined, rather than the object of execution, define it, may be environmental window; arrow function can easily allows us to easily use this in setTimeout, setInterval in
var obj = {
say: function () {
setTimeout(function () {
console.log(this)
});
}
}
obj.say (); // window because the call is a function setTimeout setTimeout function is a method of the window, so this will point to the window
// If you want to use this object in setTimeout / setInterval in this reference it?
// with a variable advance to correct this quote saved, we usually use that = this, or _this = this pointer to store this we need!
var obj = {
func: function() {},
say: function () {
var that = this; // this is the case the object obj
setTimeout(function () {
console.log(this)
that.func()
});
}
}
obj.say();
// We can also use func.bind (this) to the callback function directly bind the host object, bind Binds host object still return to this function, it is better practice
var obj = {
func: function() {},
say: function () {
// at this time this is the object obj
setTimeout(function () {
console.log(this)
this.func()
}.bind(this));
}
}
obj.say(); // obj
// function of this arrow
var obj = {
say: function () {
setTimeout(() => {
console.log(this)
});
}
}
obj.say(); // obj
// At this point of this inherited from obj, it refers to the definition of its object obj, rather than the window!
var obj = {
say: function () {
where f1 = () => {
console.log(this); // obj
setTimeout(() => {
console.log(this); // obj
})
}
f1 ();
}
}
obj.say()
// Because a time function f1 refers to this definition of obj, this arrow functions are inherited from the setTimeout f1, so no matter nested, all obj
var obj = {
say: function () {
was f1 = function () {
console.log (this); // window, when f1 calls, no host object, the default is window
setTimeout(() => {
console.log(this); // window
})
};
f1 ();
}
}
obj.say()
// result: all window, because the function of the arrow when it defined the environment in which the equivalent of window, so this function is a function of the window inside arrow
var obj = {
say: function () {
'use strict';
was f1 = function () {
console.log(this); // undefined
setTimeout(() => {
console.log(this); // undefined
})
};
f1 ();
}
}
obj.say()
// Description: strict mode, the host does not function in this call is undefined !!! So the function of the arrow is undefined!
// to sum up:
// use the arrow functions, allows us to solve some of the anonymous function in this point is not the right questions; but be careful in mixing and ordinary function of time, this point may be the window!