Class 类

1.简单介绍

JavaScript传统的方法是通过构造函数定义并生成新对象;且ES5里面的继承是通过原型链来实现的,及一个构造函数的实例是另一个构造函数的原型,但在ES6里引入新的语法糖class,就可以像JAVA、C++那些面向对象的编程语言一样使用extends关键字来实现继承。class类同和构造函数一样也拥有自己的原型对象,也具有prototype指针,也是通过new操作符来生成自己的实例。

//定义一个类

calss Point{

         constructor(x,y){  //这里的constructor方法如果没有显示定义,一个空的constructor方法会被默认添加,他相当于构造函数

                  this.x = x;

                   this.y = y;

           }              //此处没有逗号,如果添加逗号程序就会报错

            toString(){         //类里面的方法前面不需要加上function保留字

                       return  ........

             }

}

注意:类里面的方法几乎都是加在类的原型上的,及Point.prototype上。只有那些显式加在this上的属性才属于实例属性,比如:x,y

实例的_proto_属性指向类的原型;例如:var p = new Point(2,3);p._proto_ = Point.prototype; Point.prototypre.constructor  = Point;

实例、原型、类,和实例、原型、构造函数之间的关系是一样的。

class类不存在变量提升:new Foo();class Foo{}; //这种写法是错的

2.class 的继承

class ColorPoint  extends Point{

        constructor(x,y,color){

                  super(x,y)        //调用父类的构造函数,自类里必须有super方法

                    this.color = color;

        }

        toString(){

                  return this.color + ' ' + super.toString(); //调用父类的toString()方法。

      }

}

注意:

ColorPoint._proto_ === Point

ColorPoint.prototype._proto_ === Point.prototype

3.Object.getPrototypeOf()用于从子类上获取父类

Object.getPrototypeOf(ColorPoint) == Point

4.ES6允许继承原生构造函数定义子类。

原生构造函数有:Boolean()、String()、Number()、Object()、Array()、Date()、Function()、Error()、RegExp()

5.class的静态方法

ES6规定类里面只有静态方法没有静态属性;

class Foo {

              static Method(){   //方法前加上static就是静态方法,静态方法只能由类来调用

               } //Foo.Method()

}

父类的静态方法可以被子类继承

ES7的类里面有静态属性一说,ES7里面实例属性的新写法同Angular2里面的写法一样。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • class声明 class 是 ES6 模仿面向对象语言(C++, Java)提出的定义类的方法。形式类似 C++...
    faremax阅读 1,747评论 0 0
  • class的基本用法 概述 JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子: ...
    呼呼哥阅读 9,551评论 3 11
  • 注:此篇文章是我参考阮一峰老师的[ECMAScript 6 入门]文章,自己记录的笔记,详细的内容请移步阮一峰老师...
    HW_____T阅读 3,471评论 0 1
  • ES6 class类知识点梳理 大概从几个方面来讲解ES6 class类和传统的构造函数的区别。 必须要有cons...
    sunny519111阅读 3,311评论 0 1
  • 江山历代记师德, 秋光季季亮高风。 讲台留言话青史, 黑板作文写人生。 育桃李,做园丁。 个中滋味谁与共? 壮怀宽...
    曹焕甫阅读 2,817评论 2 5

友情链接更多精彩内容