js class类

作者:原创时间:2022-03-09
文档

js class类是什么呢?一起来看下吧:

class(类)是ECMAScript6中新增的关键字,专门用于创建“类”的,“类”可被用于实现逻辑的封装。传统面向对象的编程序语言都是“类”的概念,对象都是由类创建出来,然而早期JavaScript中是没有类的,面向对象大多都是基于构造函数和原型实现的,但是ECMAScript6规范开始增加了“类”相关的语法,使得JavaScript中的面向对象实现方式更加标准。

类的声明

定义一个类的一种方法是使用一个类声明,即用带有class关键字的类名(这里“Rectangle”)函数名和实例化构造名相同且大写(非强制)

class Person {
 constructor(x, y) {
    this.x = x
    this.y = y
  }
}

函数声明和类声明之间的一个重要区别是函数声明会提升,类声明不会。需要先进行声明,再去访问,否则会报错

var person= new Person()
class Person {
 constructor(x, y) {
    this.x = x
    this.y = y
  }
}
// Personis not defined

类声明不可以重复

class Person {}
class Person {}
// TypeError Identifier 'Person' has already been declared

类必须使用 new 调用,否则会报错。这是它跟普通构造函数的一个主要区别,就是后者不用 new 也可以执行

class Person {
 constructor(x, y) {
    this.x = x
    this.y = y
  }
}
Person()
// TypeError Class constructor Person cannot be invoked without 'new'

类表达式(类定义)

类表达式可以是被命名的或匿名的

/* 匿名类 */ 
let Person = class {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}
/* 命名的类 */ 
let Person = class Person {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

类的方法

constructor 方法

constructor 方法是类的默认方法,通过 new 命令生成对象实例时,自动调用该方法(默认返回实例对象 this)。一个类必须有 constructor 方法,如果没有显式定义,一个空的 constructor 方法会被默认添加。一个类只能拥有一个名为 “constructor” 的特殊方法,如果类包含多个 constructor 的方法,则将抛出 一个 SyntaxError 。

class Person {
   constructor(x, y) {
    this.x = x    // 默认返回实例对象 this
    this.y = y
  }
  toString() {
    console.log(this.x + ', ' + this.y)
  }
}

注意:

1、在类中声明方法的时候,方法前不加 function 关键字

2、方法之间不要用逗号分隔,否则会报错

3、类的内部所有定义的方法,都是不可枚举的(non-enumerable)

4、一个类中只能拥有一个constructor方法

静态方法

静态方法可以通过类名调用,不能通过实例对象调用,否则会报错

class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2)  // 3
p.sum(1,2)     //  TypeError p.sum is not a function

原型方法

类的所有方法都定义在类的 prototype 属性上面,在类的实例上面调用方法,其实就是调用原型上的方法

原型方法可以通过实例对象调用,但不能通过类名调用,会报错

class Person {
 constructor() {
  // 默认返回实例对象 this
 }
    sum() {
     
    }
    toString() {
     console.log('123456')
   }
}
// 给 Person 的原型添加方法
Person.prototype.toVal = function() {
 console.log('I am is toVal')
}
// 等同于
Person.prototype = {
  constructor() {},
  sum() {},
  toString() {}
}
var p = new Person()
p.toString()       // 123456
p.toVal()          // I am is toVal
Person.toString()  // TypeError Person.toStringis not a function
Person.toVal()  // TypeError Person.toVal is not a function

实例方法

实例方法也可以通过实例对象调用,但同样不能通过类名调用,会报错

class Person {
    constructor() {
        this.sum = function(a, b) {
            console.log(a + b)
        }
    }
}
var p = new Person()
p.sum(1,2)       // 3
Person.sum(1,2)  // TypeError Person.sum is not a function

以上就是小编今天的分享,希望可以帮助到大家。

显示全文
python中strip函数的用法 getclass方法 python中find函数的用法 java反射获取属性值 vue 调用子组件方法 python的range函数用法 js set去重 vue使用jquery python skimage armoury crate打不开 java process deque java linux 格式化u盘 js读取文件 python 交集 object 转list object转bigdecimal java get和set方法 python中get函数用法 js set方法 mysql time类型 python中sorted函数的用法 cad的基本命令 ubuntu卸载mysql js获取随机数 opencv安装教程python python numpy教程 js获取日期 python tkinter教程 java reentrantlock c语言struct用法 字符转换成ascii码 js date加一天 vue动态绑定style spring boot mysql配置 python 排序算法 python字典按值的大小排序 python 列表添加 python读取json并解析 debug error怎么解决