1. About this context in Java
package com.jiang.entity;
/**
* Description:
* Author: jiang Administrator
* Version: 1.0
* Create Date Time: 2021/11/14 20:07.
* Update Date Time:
*
* @see
*/
public class UserVo {
private String nickname;
private Integer age;
public void say(){
System.out.println(this.nickname);
System.out.println(this.age);
}
public static void main(String[] args) {
UserVo uservo = new UserVo();
uservo.nickname="yykk";
uservo.age = 35;
uservo.say();
}
}We know very well from the above. This in the say method points to an instance of uservo. I'll tell you a truth. Whoever implements the method, this points to who. If you point to the properties of the parent class, what are the properties and members used? super
2. About this context in JS
The same is true in js
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<button id="clickbtn">click</button>
</div>
<script>
document.getElementById("clickbtn").addEventListener("click",function(){
// Pass the context of the button to the following scope
var that = this;
window.setTimeout(function(){
console.log(that.tagName);
},1000);
})
</script>
</body>
</html>The arrow function solves the problem of context this pointing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<button id="clickbtn">click</button>
</div>
<script>
document.getElementById("clickbtn").addEventListener("click",function(){
setTimeout(()=>{
setTimeout(()=>{
console.log(this.tagName);
},1000)
},1000);
})
</script>
</body>
</html>Using the arrow function, you can pull this point to the top. Solve the problem pointed by this
3. Why use context in development?
var KssCourse = {
pageNo: 1,
pageSize: 10,
load: function() {
console.log(this.pageNo); //1
console.log(this.pageSize); //10
}
}
// Object execution method
KssCourse.load();It can be concluded from the above that the method executed by the KssCourse object naturally points to KssCourse in the load method.
What are the benefits?
The writing of this context is not offset by the name of the object
5. Context issues about Vue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="bigapp">
<div class="app">
<h1>{ {title} }</h1>
<button @click="loadMore">Load more</button>
</div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
// vue life cycle beforeCreated --- inheritance processing
var obj1;
var obj2;
var vue = new Vue({
el:"#bigapp",
data:{
title:"Vue Context issues"
},
methods:{
loadMore:function(){
this.title = "ok";
console.log(this);
console.log("Load more")
}
}
})
</script>
</body>
</html>As can be seen from the above illustration, vue will copy the methods and properties of all sub objects: filters,methods,data and so on, and put one copy in the top-level object. vue object
Benefits:
It is convenient for us to execute and call uniformly in development.
6. About asynchronous processing context
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="bigapp">
<h1>{ {title} }</h1>
<button @click="loadMore">Load more</button>
</div>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
// vue life cycle beforeCreated --- inheritance processing
var vue = new Vue({
el:"#bigapp",
data:{
title:"Vue Context issues"
},
created(){
this.loadMore();
},
methods:{
loadMore:function(){
var that = this;
that.title = "ok";
console.log("Load more")
var promise = axios.post("/api/then");// I want to get married and promise a lot
promise.then(function(){
console.log(that);//Keep your promise and carry it out here
}).catch(function(){
console.log(that);//Keep your promise and carry it out here
})
}
}
})
</script>
</body>
</html>In fact, the problem of this context can be well solved through the arrow function. In the above code, we have learned that the arrow function can pull this to the top context.
Then why is this mechanism sometimes not applicable in development? Because many low-level browsers do not support arrow functions and es6 many new syntax, Feige is useless.
7. Summary
If you develop small programs or based on Vue cli scaffolding in the future, you will use a lot of these arrow functions or new syntax, because there is a built-in compiler: webpack in this scaffolding
This compiler will successfully convert the new syntax of the code to the code recognized by the lower version of the browser.