Look at this code first:
class student {
constructor (uname,age) {
this.uname = uname;
this.age = age;
}
get() {
console.log(uname);
}
}
var stu = new student('小杰',18);
stu.get();Will the final output report an error?
The answer is yes, because this is not added to uname in the get method
So why do you need to add this this?
Because uname is in the get method, does get have this parameter? He has no parameters. What we want is the uname in the instantiated object, which is the uname of the stu object: 'Xiaojie'. And this points to the instantiated object we created, so we must add this to find the instantiated object.
In the above code, we manually call the get method through the stu object. What if we want to call it when the instantiated object is created? When we new, the constructor constructor is automatically called, so we can call the get method in the constructor.
class student {
constructor (uname,age) {
this.uname = uname;
this.age = age;
get();
}
get() {
console.log(this.uname);
}
}
var stu = new student('小杰',18);
Is it called directly in the constructor like this? The answer is still wrong
Because the get method is defined in the class, it belongs to the instance object, so we need to tell others which object called the get method, so we need to add this, because this refers to the instantiated object we created. We only need to remember one sentence: the common properties and methods in the class must be used with this!
What if we want to automatically call the get method when a button is clicked?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
class student { // 父类
constructor (uname,age) {
this.uname = uname;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick = this.get;
}
get() {
console.log(this.uname);
}
}
var stu = new student('小杰',18);
</script>
</body>
</html>Note: this must be added before btn and get in the constructor. Otherwise, it is not known which instance object is called.
It's just that when we click the button, the output is undefined, why is this?
Ordinary function this depends on who calls, who calls me, this points to, has nothing to do with how it is defined or where it is defined
If we print stu.get() below, this still points to the instance object. When only we click the button, this in get points to btn
We print this inside get to see what is output when the button is clicked:
This in the get method points to the btn button, because this button calls it
One sentence summary: this in the constructor points to the instance object, and this in the method points to the caller of the method
The last question: we just want to print 'Xiaojie' when the button is clicked, what should we do?
We can do this:
var that;
class student { // 父类
constructor (uname,age) {
that = this;
this.uname = uname;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick = this.get;
}
get() {
console.log(that.uname);
}
}
var stu = new student('小杰',18);Define a global variable that, and then assign this to that in the constructor, so that what is stored in that is this in contrucotr
Output result:
