资讯专栏INFORMATION COLUMN

es6 知识总结--4

MkkHou / 1476人阅读

摘要:函数中使用关键词定义构造函数的的方法和属性上面代码首先用定义了一个类,可以看到里面有一个方法,这就是构造方法,而关键字则代表实例对象。这是因为子类没有自己的对象,而是继承父类的对象,然后对其进行加工。

ES6 classes(类)

我们在编程过程中常常用到面向对象,对象创建实例这个方法,但是es6中给我封装了一个class类
下边给大家介绍一下!

Ecmascript5方法
//万事万物皆对象
        //1.类是由对象(抽象)泛化出来的
        //2.对象是由类创建出来的
        //3.对象叫类的具体实例
        function Person(name,age){
            this.name=name,
            this.age=age
        }
        Person.prototype.run=function(){
            console.log(this.name+" 我会跑")
        }

        var weiwei=new Person("weiwei",21);
        console.log(weiwei)
        
        function SuperMan(name,age,sex,body){
            //Person.apply(this,arguments);//继承了父类的属性
            Person.call(this,name,age,sex)//apply 传进来的是数组集合,call传进来的是数组

            //自己的属性
            this.body=body;
        }


        SuperMan.prototype=Object.create(Person.prototype);//继承了父类的方法

        //自己的方法    多态
        SuperMan.prototype.fly=function(){
            console.log("我会飞");
        }
        var chaoren=new SuperMan("大刚",24,"男","大")
es6方法

ES6 中有 class 语法。值得注意是,这里的 class 不是新的对象继承模型,它只是原型链的语法糖表现形式。

//1.es6提供了类来创建面向对象编程
        class Student{
            constructor(name,age){
                this.name=name;
                this.age=age;
                }
                run(){
                    console.log(this.name+" 跑啊跑")
                }
        }
       
        class SuperMan extends Student{
            constructor(name,age,xh){
                super(name,age);  //同上call
                this.xh=xh;
            }
            eat(obejectName){
                    console.log(this.name+" 喜欢吃"+obejectName)
                }
            get  xm(){
                return this.name
            }
            set  xm(value){
                //console.log(value)      //设置xm属性
                this.name=value;
            }
            static shangxue(){
                console.log("快快上学去");   //类的方法(只能类用),静态方法,对象实例不能用
            }
        }   
        let student1 = new Student("咪咪",18);
        let student2 = new SuperMan("小明",21,007)
        student2.eat("苹果");  
         //set  get  方法  
        console.log(student2.xm)    //get  调用方法不用括号();  get获取
        student2.xm="小红"
        console.log(student2.xm)
       // student2.shangxue()
        SuperMan.shangxue();

函数中使用 static 关键词定义构造函数的的方法和属性:
ES6 中有 class 语法。值得注意是,这里的 class 不是新的对象继承模型,它只是原型链的语法糖表现形式。

函数中使用 static 关键词定义构造函数的的方法和属性

上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

关键字 class, extends, super

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84092.html

相关文章

  • es6 知识总结--3

    es6知识总结--3 上午发表了一个总结觉得还是把自己的了解做成一个小系列吧,明天把那个总结一下! es6对咱们es3,es5的数据类型进行了升级下边说新APIs!js数据类型有Number、String 、oject、Boolean、Null、Undefined六种数据类型 ! 下边介绍 Math、Number、String 、Array、Boject的新 APIs Math Number S...

    Keagan 评论0 收藏0
  • es6知识总结(一)

    摘要:知识点总结一,,能重复声明,有前置功能。浅拷贝一个数组设置原型。永远是唯一的,不可能和别的重复,可以阻止对象的属性被篡改前面不能使用操作符。和的区别键名可以是任何数据类型初始化的时候必须一次性指定键名和键值。 es6知识点总结(一) let,var,const var:能重复声明,有前置功能。 let:有块级作用域,没有前置功能,不能重复声明。 const:有块级作用域,用来声明常量(...

    HelKyle 评论0 收藏0
  • 新手开发中常用ES6基础知识总结

    摘要:感觉对我这种没实习没工作的新手,虽然一些高级的功能暂时用不上,但是一些基础的知识还是为平时的开发提供了巨大的便利。学习告一段落,现在结合平时的开发,总结一些常用的知识。日常开发中,块级作用域中使用的变量,尽量使用或者声明。使用时,进行合并。 很早之前就学过TypeScript和ES6,后来做项目的时候零零散散用了些。这几天又系统地把ES6的知识看了一遍。感觉对我这种没实习没工作的新手,...

    Paul_King 评论0 收藏0
  • ES6 常用知识总结

    摘要:常用知识总结之前总结了中的一些知识点。在年正式发布了,简称,又称为。作为构造函数的语法糖,同时有属性和属性,因此同时存在两条继承链。子类的属性,表示构造函数的继承,总是指向父类。 ES6常用知识总结 之前总结了es5中js的一些知识点。这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点,基本没有什么创新...

    leap_frog 评论0 收藏0
  • ES6 常用知识总结

    摘要:常用知识总结之前总结了中的一些知识点。在年正式发布了,简称,又称为。作为构造函数的语法糖,同时有属性和属性,因此同时存在两条继承链。子类的属性,表示构造函数的继承,总是指向父类。 ES6常用知识总结 之前总结了es5中js的一些知识点。这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点,基本没有什么创新...

    CODING 评论0 收藏0

发表评论

0条评论

MkkHou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<