JavaScript-构造函数与es6中的class

朱雀 2022-01-26 00:55 247阅读 0赞

**1、前言**

> 1.  Es6中的class语法就是Es5中构造函数的另一种写法，一种更高级的写法，
> 2.  class语法的底层还是es5中的构造函数，只是把构造函数进行了一次封装而已。
> 3.  Es6出现的目的为了让我们的让对象原型的写法更加清晰、更像面向对象编程让JavaScript更加的符合通用编程规范，即大部分语言对于类和实例的写法。

**2、 Es5中的构造函数写法**

function People(name,sex,age){
    	this.name = name;
    	this.sex = sex;
    	this.age = age;
    }
    // 构造一个实例
    People.prototype.run=function(){
    	console.log('跑步中...')
    }
    var a = new People;
    a.run()  // 跑步中...

** 3、Es6中的构造函数写法**

> ①Es6的class基本写法
> 
> 基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class People {
    	constructor(name,sex,age){
    		this.name = name;
    		this.sex = sex;
    		this.age = age;
    	}
    	run(){
    		console.log('唱歌中...');
    	}
    }
    var a = new People;
    a.run()   // 唱歌中...

> ②class注意事项
> 
>  *  和let一样，ES6的class不允许重复定义；
>  *  和let一样，class不存在变量提升,需要先定义再使用

**4、ES5与ES6的对应关系**

>  *  ES5的构造函数Person,对应ES6的Person类的构造方法constructor
>  *  ES5的Person原型上的方法对应Es6的除了constructor以外的其他方法。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 1][]

**5、通过class实现原型链的继承**

> ES5的继承如下
> 
> Fn3的实例继承Fn3的原型\--》继承Fn2的原型\---》继承Fn1的原型\---》Object的原型

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 2][]

> ES6的继承如下

class Fn1{
    	constructor(){
    		this.fn1 = 'fn1';
    	}
    }
    
    class Fn2 extends Fn1{
    	constructor(){
    		super();
    		this.fn2 = 'fn2';
    	}
    }
    
    class Fn3 extends Fn2{
    	constructor(){
    		super();
    		this.fn3 = 'fn3';
    	}
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 3][]

**6、继承原理**

> 子类的原型对象的\_\_proto\_\_就是一个父类的实例对象，这样子类实例就能访问父类原型上的方法与属性，父类的原型对象还是Object的一个实例,，所以最终会找到Object的原型对象上去。
> 
> 如果用es5的语法来实现的话，就可以这样来处理，将父构造函数的实例赋值给子构造函数的原型属性

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70]: /images/20220126/a95c7cd214e0469f978e5151c8979c71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 1]: /images/20220126/aaf3d193a90344989c219bc78dd434b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 2]: /images/20220126/c2a7b73a9040405a989549be7a491ff8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTQ1OTM1_size_16_color_FFFFFF_t_70 3]: /images/20220126/e65219dedfb348ec9e7e38fa59589a7c.png