JS面向对象编程——ES6中类的继承用法详解 - 行业资讯 - 肥雀云

本文实例讲述了ES6中类的继承用法。分享给大家供大家参考,具体如下:

JS是一种基于对象的语言,要实现面向对象,写法跟传统的面向对象有很大的差异.ES6引入了类语法糖,使得JS的继承更像面向对象语言的写法。

此篇博客,分为:基本介绍,Vue使用案例

基本介绍

类可以通过了关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多;

　　　　　　类的父亲{ 　　} 　　类扩展了父亲儿子{ 　　} 　　之前　　　　

代码定义了一个儿子类,该类通过了关键字,继承了父类的所有属性和方法,但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个父亲类。

　　　　　　类扩展了父亲儿子{ 　　构造函数(姓名、年龄、城市){ 　　超级(姓名、年龄);//调用父类的构造函数(姓名、年龄); 　　这一点。城市=; 　　} 　　　　toString () { 　　返回。城市+ " " + super.toString();//调用父类的toString () 　　} 　　} 　　之前　　　　

构造函数方法和toString方法之中,都出现了超级关键字,他在这里表示父类的构造函数,用来新建父类的这对象,

<强>子类必须在构造函数方法中调用超级方法,否则新建实例时会报的错,这是因为子类没有自己的这对象,而是继承父类的这对象,然后对其进行加工,如果不调用超级方法,子类就得不到这对象,

　　　　　　类的父亲{} 　　　　类扩展了父亲儿子{ 　　构造函数(){} 　　} 　　让年代=new儿子();//referenceError:这不是定义　　之前　　　　

儿子继承了父类Fatherm,但是他的构造函数没有调用超级方法,这导致新建实例时报错;
　　<强> ES5的继承,实质是先创造子类的实例对象,然后再将父类的方法添加到这上(Parent.apply(这),ES6的继承机制完全不同,实质是先创造父类的实例对象这(所以必须先调用超级方法),然后再用子类的构造函数修改,
　　<>强如果子类没有定义构造函数方法,这个方法会默认添加,也就是说,不管有没有显式定义,任何一个子类都有构造函数方法。

　　　　　　类扩展了父亲儿子{ 　　}//等同于　　类的儿子扩展父{ 　　构造函数(args) { 　　超级(…args); 　　} 　　} 　　之前　　　　

另一个需要注意的是:在子类的构造函数中,只有调用超级之后,才能使用这个关键字,否则会报的错。这是因为子类实例的构建,是基于对父类实例加工,只有超级方法才能返回父类实例;

　　　　　　类的父亲{ 　　构造函数(x, y) { 　　这一点。x=x; 　　这一点。y=y; 　　} 　　} 　　　　类扩展了父亲儿子{ 　　构造函数(x, y,颜色){ 　　这一点。颜色=颜色;//ReferenceError:这不是定义　　超级(x, y); 　　这一点。颜色=颜色;//正确　　} 　　} 　　　　让年代=new儿子(25日8,“绿色”); 　　年代instanceof//真正的儿子　　年代instanceof父亲//真实的　　之前　　　　

子类的构造函数方法没有调用超级之前,就使用这个关键字,结果报错,而放在超级方法之后就是正确的;

<强> Object.getPrototypeOf()方法用来从子类上获取父类

　　　　　　对象。getPrototypeOf(儿子)===的父亲//正确的//因此可以用这个方法判断,一个类是否继承了另一类　　之前　　　　

<强>超级关键字
　　超级这个关键字,<强>既可以当作函数使用,也可以当作对象使用,
　　(1)第一情况是:超级当作函数调用时,代表父类的构造函数,ES6要求,子类的构造函数必须执行一个超级函数;

　　　　　　类的父亲{} 　　　　类扩展了父亲儿子{ 　　构造函数(){ 　　超级(); 　　} 　　}//子类儿子的构造函数之中的超级(),代表调用父类的构造函数。这是必须的,否则JavaScript引擎会报的错。　　之前　　　　

<强>超级虽然代表了父类的父亲的构造函数,但是返回的是子的儿子类实例,即超级内部的这一指向的是儿子,因此超级()在这里相当于Father.constructor.call(这);
　　而且作为函数时,超级()只能用在子类的构造函数中,在其他地方会报错;

　　　　　　A类{ 　　构造函数(){ 　　console.log (new.target.name); 　　} 　　} 　　　　B类扩展了一个{ 　　构造函数(){ 　　超级(); 　　} 　　} 　　新()//新的B ()//B 　　