es5中function和es6中class对应关系

124 阅读1分钟

概述

在es6之前,大家一般使用构造函数去生成实例对象,在es6发布后,大家可以选择使用class来的方式来定义一个类,同样也可以使用new关键字去生成这个类的实例对象。今天我们来分析一下es5中function方法和es6中使用class类定义时的差别对比。

写法区别

function 写法

  function Foo(a,b){					
       //实例属性					
       this.a = a;                     			
       this.b =b;                      			
  } 							
  							
  //实例方法						
  Foo.protoType.add = function(){     			
       return this.a+this.b            			
  }							
  							
  //静态属性(不会被实例继承,可以被子类继承或者super调用)
  Foo.staticAttr = 1;					
  							
  //静态方法 (function中没有静态方法的说法,此为模拟实现)
  Foo.classStaticMethod() {				
      return 'hello static method';			
  }    			                   

class写法

class Foo {                                                     
	//实例属性1                                              
	foo = "new write type"                                   
	constructor(a,b) {                                       
	     //实例属性2                                         
	     this.a = a;                                         
	     this.b =b;                                          
	}                                                        
                                                                
	//实例方法                                               
	add(){                                                   
	     return this.a+this.foo                              
    }                                                       
                                                                
	//静态属性(不会被实例继承,可以被子类继承或者super调用)
	static staticAttr = 1;                                   
	                                                         
	//静态方法 (不会被实例继承,可以被子类继承或者super调用
	static classStaticMethod() {                             
	     return 'hello static method';                   
	}                                                        
	                                                         
	//私有属性 (只能在类中使用,不会被继承)                
	#priAttr = 'this is a private attr';                     
	                                                         
	//私有方法 (只能在类中使用,不会被继承)                
	#priAttrMethod(){                                        
	     consolo.log('this is a private attr;')          
	}                                                        
 }	                                                         

当我们使用new 创建一个实例对象的时候, class中的构造函数constructor会立刻执行,函数中function Foo()函数会被立即执行。

类的本质

类本质上就是一个函数。

typeof Foo // 'function'

类原型对象的构造函数指向类本身

Foo === Foo.prototype.constructor //true

类实例对象的构造函数指向类本身

foo.constructor === Foo === Foo.prototype.constructor //true