JS中的类

作者: 西瓜鱼仔 | 来源:发表于2020-04-09 11:07 被阅读0次

如何定义一个类

ES5中定义一个类:

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

ES6以后的语法(可以看做是ES5的语法糖):

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

ES6的类,完全可以看作构造函数的另一种写法。

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面代码表明,类的数据类型就是函数,类本身就指向构造函数
使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。

ES6中类需要注意的点

  1. 类的内部所有定义的方法,都是不可枚举的(non-enumerable)。 ES5的写法,prototype上的方法就是可枚举的。
  2. 类的方法都定义在prototype对象上面,所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。
class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

prototype对象的constructor属性,直接指向“类”的本身,这与 ES5的行为是一致的。

  1. 类和模块的内部,默认就是严格模式
  2. constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。
class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

上面代码中,constructor函数返回一个全新的对象,结果导致实例对象不是Foo类的实例。

  1. 类不存在变量提升(hoist),这一点与 ES5完全不同。

原文:https://www.jianshu.com/p/edf4d665d0df

相关文章

  • Js 中的类

    ES5中,使用构造函数是这样的: ES6中,构造函数 上面中constructor就是构造方法。注意定义类的方法时...

  • js 中的类

    ES5 中定义一个类 ES6以后的语法(可以看做是ES5的语法糖) ES6 的类,完全可以看作构造函数的另一种写法...

  • JS中的类

  • JS中的类

    如何定义一个类 ES5中定义一个类: ES6以后的语法(可以看做是ES5的语法糖): ES6的类,完全可以看作构造...

  • js中的类

    ES5 prototype 在prototype中放置可共享的属性(避免内存浪费),在函数中放置各自的私有属性 E...

  • js给元素添加类的方法

    原生js中添加类的方法 .jquery中添加类的方法 检查是否含有某个类的方法 例子:html部分 css部分 js部分

  • js的封装

    JS的封装(JS插件的封装) JS中类的概念 类,实际上就是一个function,同时也是这个类的构造方法,new...

  • 在Java中调用JS方法

    在Java中调用JS方法 供JS调用的接口类

  • QML 中实现类似 Intl.NumberFormat 的功能

    Intl.NumberFormat 是 JS 中对语言敏感的格式化数字类的构造器类,JS 的语法: QML 中是没...

  • ES6-面向对象

    1、区别 es5(js)中没有一个类的概念,只有构造方法在es6中 js模拟了其他语言实现类的概念,让对象可以由类...

网友评论

    本文标题:JS中的类

    本文链接:https://www.haomeiwen.com/subject/dcbqmhtx.html