• 技术文章 >web前端 >前端问答

    es6继承和es5继承的区别是什么

    青灯夜游青灯夜游2021-09-03 16:08:55原创191

    es5和es6继承的区别: ES5的继承是通过原型或构造函数机制实现的;它先创建子类,再实例化父类并添加到子类this中。 ES6先创建父类,再实例化子集中通过调用super方法访问父级后,再通过修改this实现继承。

    本教程操作环境:windows7系统、ECMAScript 5&&ECMAScript 6版、Dell G3电脑。

    es6继承和es5继承的区别

    注意super关键字指代父类的实例,即父类的this对象。

    注意:在子类构造函数中,调用super后,才可使用this关键字,否则报错。

    1、在es5中的继承:

    	function parent(a,b){
    	    this a = a;
    	    this b = b;
    	}
    	function child(c){
    	    this c = c
    	};

    通过子集去继承父级:

    parent.call(child,1,2)

    而去看call的底层方法可知,继承的过程是通过prototype属性

    child.prototype = new parent(1,2);

    由此可知,ES5继承的实质是先创建了子类元素child的的实例对象,然后再把父类元素parent的原型对象中的属性赋值给子类元素child的实例对象里面,从而实现继承

    2、ES6中的继承

    在传统JS中,生成对象是通过创建构造函数,然后定义生成对象

    function parent(a,b){
        this.a = a;
        this.b = b;
    }

    然后通过prototype增加对应所需方法或属性

    parent.prototype.methods = function(){
        return 'this is test methods';
    }
    parent.prototype.attr = 'this is test attr‘;

    而ES6中引入了类的概念,也就是class。通过关键词class去定义对象。

    class是个关键词,语言糖,这样能更清晰的读懂所创建的对象,

    通过属性constructor来接收控制方法传入的参数,如果不写这个属性,默认是没有参数的

    class parent{
        curstructor(a,b){
            this.a = a;
            this.b = b;
        }
    }

    ES6中的继承是基于class类之间继承的。通过关键词extends实现。

    通过super实例化调用父类

    	class parent{
    	  constructor(a,b){
    	    this.a = a;
    	    this.b = b;
    	  }
    	  parentMethods(){
    	    return this.a + this.b
    	  }
    	}
    	class child extends parent{
    	  constructor(a,b,c){
    	    super(a,b);
    	    this.c = c;
    	  }
    	  childMethods(){
    	    return this.c + ',' + super.parentMethods()
    	  }
    	}
    	const point = new child(1,2,3);
    	alert(point.childMethods());

    上面的代码,是一套简单的ES6父子类继承。

    相信已经看出来了,虽明显的区别就是在于ES6中,激活父组件的是super方法,而不是新建实例化,也就是说,父类的实例对象是先创建出来的,调用后,再去修改子类的构造函数中的this完善原型对象。

    总结:

    ES5和ES6继承最大的区别就是在于:

    【推荐学习:javascript视频教程

    以上就是es6继承和es5继承的区别是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:es5 es6 继承
    上一篇:javascript由哪几部分组成 下一篇:javascript 有map吗
    线上培训班

    相关文章推荐

    • ECMAScript 2020 的新特性• 全面掌握,ECMAScript的新特性• 一起看看ECMAScript和JavaScript的区别• 浅谈动态导入ECMAScript模块的方法• 一文讲解JS中ES6代理Proxy用法(代码分享)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网