js ES6类class类(语法糖)整理

在es5中,生成实例对象的方法是通过构造函数 在es6中,通过class关键字,可以定义类, 类必须要用new调用否则会报错 new的属性 new.target:返回实例的构造函数(类),但在一些情况下回返回new后面的实例

//es5
function Person(name,age){
          
   
      this.name=name;
      this.age=age;
      }
 var obj =new Person("张三",18);
 console.log(obj.name,obj.age);//张三 18
 console.log(typeof Person);//function
 //es6
 class Person{
          
   
 	constructor(name,age){
          
   
 	    this.name=name;
 	    this.age=age;
 	    }
 	 }
 let obj=new Person("张三",18);
  console.log(obj.name,obj.age);//张三 18
   console.log(typeof Person);//function

**constructor是类的默认方法,通过new命令生成对象实例时,自动调用这个方法 一个类必须有constructor方法,如果没有显示定义,一个空的constructor方法会默认添加 constructor默认返回实例对象(this),还可以指定返回另外一个对象 **

class Aoo{
          
   
 constructor(){
          
   
  return Object.create(null);//初始化了一个新的对象
   }
 }
 console.log(new Aoo() instanceof Aoo);//false 检测出来的实例对象不是Aoo类的实例

在类中定义方法

//es5
Person.prototype.getInfo=function(){
          
   
}
//es6               
class Person{
          
                    
 getInfo(){
          
   },                 
 toString(){
          
   }
 }
 //等同于
 Person.prototype={
          
   
 getInfo(){
          
   },                 
 toString(){
          
   }
 }
 //还可以通过Object.assign()方法
 Object.assign(Person.prototype,{
          
   
  getInfo(){
          
   },                 
  toString(){
          
   }
 });

类的静态方法static关键字 所有在类中定义的方法,都会被实例继承, 如果在一个方法前,加上static关键字,就表示这方法不会被实例继承,而是直接通过类调用

class Aoo{
          
   
 static getAoo(){
          
   
 return "hello";
   }
}
console.log(Aoo.getAoo());//在类上调用这个方法,可以执行  hello
var aoo=new Aoo();//实例对象
console.log(aoo.getAoo());//报错 
//静态属性
//老写法
class Aoo{
          
   
}
Aoo.name="张三";
//新写法
class Aoo{
          
   
 static name="张三";
 }

**class继承 extends关键字实现继承 子类必须在construct方法中调用super方法,否则新建实例时会报错,在子类的构造函数中,只有调用了super之后,才可以使用this关键字,否则会报错,super()只能在constructor中执行 super()当做函数使用的时候 1.执行父类的constructor方法2.把this指向子类的实例 super当做对象使用(在普通函数中)1.super指向父类的原型对象2.方法里的this指向子类的实例 super当做对象使用(在私有方法中)1.super指向父类2.方法里的this指向子类 父类的静态方法,会被子类继承 **

class Person{
          
   
 constructor(name,age){
          
   
    this.name=name;
    this.age=age;
    static getInfo(){
          
   //父类的静态方法,会被子类继承
    console.log("hello");
    }
  }
class Student extends Person{
          
   
	constructor(number){
          
   
	super();//如果不加入super方法,新建实例会报错
	this.number=number;//只有调用了super方法后,才可以使用this关键字
	}
}
var person1=new Person("张三",18);
console.log(person1.name,person1.age);//张三 18
Person.getInfo();//hello      父类的静态方法,会被子类继承
Student.getInfo();//hello
var student1=new Student("101");
student1.name="Marry";
student1.age=20;
console.log(student1.name,student1.age,student1.number);//Marry 20 101
经验分享 程序员 微信小程序 职场和发展