es6 class是函数吗

es6 class是函数。在es6中,class(类)作为对象的模板被引入,可以通过class关键字定义类,语法为“class 类名{…};class的本质就是function(函数),它是一个语法糖,其底层是通过“构造函数”去创建的。

es6 class是函数吗

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

es6 class是函数。

在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖,其底层还是通过 构造函数 去创建的,让对象原型的写法更加清晰、更像面向对象编程的语法。

  1. function Person(name, age) {    this.name = name;    this.age = age;}Person.prototype.sayName = function() {    return this.name;}const xiaoming = new Person('小明', 18);console.log(xiaoming);

登录后复制

上面代码用ES6的class实现,就是下面这样

  1. class Person {    constructor(name, age) {      this.name = name;      this.age = age;    }      sayName() {      return this.name;    }}const xiaoming = new Person('小明', 18)console.log(xiaoming);// { name: '小明', age: 18 }console.log((typeof Person));// functionconsole.log(Person === Person.prototype.constructor);// true

登录后复制

constructor方法,这就是构造方法,this关键字代表实例对象。 类的数据类型就是函数,类本身就指向构造函数。

定义类的时候,前面不需要加 function, 而且方法之间不需要逗号分隔,加了会报错。

类的所有方法都定义在类的prototype属性上面。

  1. class A {    constructor() {}    toString() {}    toValue() {}}// 等同于function A () {    // constructor};A.prototype.toString = function() {};A.prototype.toValue = function() {};

登录后复制

在类的实例上面调用方法,其实就是调用原型上的方法。

  1. let a = new A();a.constructor === A.prototype.constructor // true

登录后复制

类的实例

实例的属性除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。

注意:

1、class不存在变量提升

  1. new A(); // ReferenceErrorclass A {}

登录后复制

因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与继承有关,必须保证子类在父类之后定义。

  1. {  let A = class {};  class B extends A {}}

登录后复制

上面的代码不会报错,因为 B继承 A的时候,A已经有了定义。但是,如果存在 class提升,上面代码就会报错,因为 class 会被提升到代码头部,而let命令是不提升的,所以导致 B 继承 A 的时候,Foo还没有定义。

2、this的指向 类的方法内部如果含有this,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。

继承

Class 可以通过extends关键字实现继承

  1. class Animal {}class Cat extends Animal { };

登录后复制

上面代码中 定义了一个 Cat 类,该类通过 extends关键字,继承了 Animal 类中所有的属性和方法。 但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Animal类。 下面,我们在Cat内部加上代码。

  1. class Cat extends Animal {    constructor(name, age, color) {        // 调用父类的constructor(name, age)        super(name, age);        this.color = color;    }    toString() {        return this.color + ' ' + super.toString(); // 调用父类的toString()    }}

登录后复制

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

子类必须在 constructor 方法中调用 super 方法,否则新建实例就会报错。这是因为子类自己的this对象,必须先通过 父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

  1. class Animal { /* ... */ }class Cat extends Animal {  constructor() {  }}let cp = new Cat();// ReferenceError

登录后复制

Cat 继承了父类 Animal,但是它的构造函数没有调用super方法,导致新建实例报错。

如果子类没有定义constructor方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor方法。

  1. class Cat extends Animal {}// 等同于class Cat extends Animal {    constructor(...args) {        super(...args);    }}

登录后复制

另一个需要注意的地方是,es5 的构造函数在调用父构造函数前可以访问 this, 但 es6 的构造函数在调用父构造函数(即 super)前不能访问 this。

  1. class A {  constructor(x, y) {    this.= x;    this.= y;  }}class B extends A {  constructor(x, y, name) {    this.name = name; // ReferenceError    super(x, y);    this.name = name; // 正确  }}

登录后复制

上面代码中,子类的constructor方法没有调用super之前,就使用this关键字,结果报错,而放在super方法之后就是正确的。

父类的静态方法,也会被子类继承。

  1. class A {  static hello() {    console.log('hello world');  }}class B extends A {}B.hello()  // hello world

登录后复制

【相关推荐:javascript视频教程、web前端】

以上就是es6 class是函数吗的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    JavaScript有命名函数吗

    2025-3-11 20:38:25

    编程技术

    Javascript怎么获得某一天是星期几

    2025-3-11 20:38:32

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索