What is Class?
- The essence of the class class is the function function;
- ES6 syntax sugar , which makes the writing of object prototypes clearer and the syntax of object-oriented programming;
- Class definition will not be promoted , the class must be defined before accessing, otherwise an error will be reported.
Ⅰ. Use of class
1. The constructor method
class Person {
constructor(name){
this.name = name;
this.age = 18 ;
}
}
const zhangSan = new Text('张三'); // zhangSan.name => '张三' zhangSan.age => 18
- New instantiation of the Class class will automatically call this method;
- By default , the instance object ( this ) is returned, which is the same as the transformation function;
- You can pass parameters at the time of instantiation through formal parameters.
2. Instance properties
class Person {
constructor(){
this.getName= function(){
console.log('张三') } ;
}
getAge() {
console.log('18') }
}
const zhangSan = new Text();
zhangSan.getName(); //正常执行
zhangSan.getAge(); //正常执行
- "Variables and methods " written in constructor() are instance attributes
The methods written inside and outside the constructor function can be executed, so what is the difference ?
class Person {
constructor(){
this.getName= function(){
console.log('张三') } ;
}
getName() {
console.log('李四') }
}
const zhangSan = new Text();
zhangSan.getName(); // 张三
- Explain the method outside the constructor, which is placed on the _ proto_ (prototype chain) of the instance after instantiation;
- If you don't have it yourself, you will go to the prototype chain to find it.
Add a method to the constructor in the class === Person.prototype
3. Static properties
class Test {
static hello() {
console.log('hello Class');
}
}
Test.hello();
- Create a static method with the static keyword. The method cannot be inherited by an instance , but can be inherited by the extends method.
In the class static hello() === Test.hello = function(){ … }
Ⅱ. The way of class inheritance
1. Instance inheritance and extends keyword inheritance
| type | content |
|---|---|
| extends inheritance | Instance properties √ Prototype properties √ Static properties √ |
| instance inheritance | Instance attributes √ Prototype attributes √ Static attributes × |
①. Instance inheritance
class Text{
constructor(a){
this.a=a;
}
fun(){
/*...*/ }
}
let classA = new Text(1);
- This in constructor() is inherited into this instantiated object,
- The methods outside constructor() and the methods on class.prototype are also inherited from __proto__. If there is no property with the same name, go to proto to get it.
①.extends inheritance
class Father{
fun(){
/*...*/ }
}
class Son extends Father{
constructor(age){
super();
this.age = age;
}
}
- If the subclass does not define a constrcutor, one will be added by default ;
- Calling the super method in the constrcutor is equivalent to calling the constructor of the parent class;
2. super method
class Person {
constructor(x, y, color) {
this.height= '180cm';
this.weight= '60kg';
}
static hello() {
console.log('hello Class'); }
}
class Zhangsan extends Person {
constructor(weight) {
super(x, y);
this.weight= weight;
}
}
Zhangsan.hello() //正常继承
- The super function is called to obtain the this of the parent class in the subclass, and this points to the subclass after the call;
- The super method must be written before this , otherwise an error will be reported;
- Without calling the super method, the subclass will not get the this object;
- super method, if you don't write the properties to be inherited , all of them are inherited by default .
Ⅲ. Class getters and setters
class Test {
constructor() {
/*...*/ }
get prop() {
return 123;
}
set prop(value) {
console.log('set: '+ value);
}
}
let inst = new MyClass();
inst.prop; // 123
inst.prop = 111; // 'set: 111'
- There are not many usage scenarios, the get and set of class are the same as ES5 , and the difference is not big;
- Mainly set the storage value function and the value function of
拦截the attribute, the access behavior of the attribute