Reference documents:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this
Due to the lack of front-end in the project team, I sent it from the back-end to the front-end. I started to develop it a week later. The front-end 0 foundation, Alexander.
I've been struggling all morning to understand the horror of JavaScript.
Combined with the reference documents, all the usage of this should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this</title>
</head>
<body>
<table>
<tr>
<th>describe</th>
<th>Code</th>
<th>Result</th>
</tr>
<tr>
<td>this Referring to the global context</td>
<td>this.a</td>
<td id="1"></td>
</tr>
<tr>
<td>this Depends on the caller in the function</td>
<td>function user()</td>
<td id="2"></td>
</tr>
<tr>
<td>bind</td>
<td>user.bind({name:'bind'})</td>
<td id="3"></td>
</tr>
<tr>
<td>Arrow function</td>
<td>var foo = (()=>this);<br>
var fooBind = foo.bind({});
</td>
<td id="4"></td>
</tr>
<tr>
<td>Method 1 of object</td>
<td>var o = {
prop: 37,
f: function() {
return this.prop;
}
};
</td>
<td id="5"></td>
</tr>
<tr>
<td>Method 2 of object</td>
<td>var o = {prop: 37};
function independent() {
return this.prop;
}
o.f = independent;
</td>
<td id="6"></td>
</tr>
<tr>
<td>Method 3 of object</td>
<td>var o = {
f : function(){
return this.prop;
}
};
var p = Object.create(o);
</td>
<td id="7"></td>
</tr>
<tr>
<td>Constructor</td>
<td>function C(){
this.a = 37;
}
var o = new C();
</td>
<td id="8"></td>
</tr>
<tr>
<td>DOM Event function</td>
<td>bluify(e)
</td>
<td id="9">colour</td>
</tr>
<tr>
<td>Inline event handling</td>
<td>onclick="alert(this.tagName.toLowerCase())</td>
<td><button onclick="alert(this.tagName.toLowerCase());">
Show this
</button></td>
</tr>
</table>
<script>
a = 37;
</script>
<script>
document.getElementById("1").innerText = this.a;
var name = "windows";
function user() {
return this.name;
}
document.getElementById("2").innerText = user();
console.log(document.getElementById("2").innerText);
var obj = {name: 'obj'};
console.log(user.apply({name: 'fuck'}));
document.getElementById("2").innerText = user.call(obj)
var bind = user.bind({name: 'bind'});
document.getElementById("3").innerText = bind();
var foo = (() => this);
var fooBind = foo.bind({});
document.getElementById("4").innerText = fooBind() === this;
var o1 = {
prop: 37,
f: function () {
return this.prop;
}
};
document.getElementById("5").innerText = o1.f();
var o2 = {prop: 37};
function independent() {
return this.prop;
}
o2.f = independent;
document.getElementById("6").innerText = o2.f()
var o3 = {
f:function () {
return this.prop;
}
}
var oo3 = Object.create(o3);
oo3.prop = 37;
document.getElementById("7").innerText = oo3.f();
function C() {
this.a = 100;
return {a:this.a+100};
}
var o4 = new C();
document.getElementById("8").innerText = o4.a;
console.log(a);
// When called, changes the associated element to blue
function bluify(e){
console.log(this === e.currentTarget); // Always true
// true when currentTarget and target are the same object
console.log(this === e.target);
this.style.backgroundColor = '#A589F3';
}
document.getElementById("9").addEventListener('click',bluify,false);
</script>
</body>
</html>Summary of personal understanding:
- this is the current object by default. The current object is not specified. It is the global windows object by default
- Function can modify this object through call and apply
- The function can modify the executed this object permanently through bind
- Var o = object built by new func(), this in func() is o
- addEventListener('click ', fun(), false), this in fun() is the target of the event object
- When the code is called by the inline on event handler, its this points to the DOM element where the listener is located