JS 总结之class

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JS 总结之class脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

图片描述

class 是 ES6 的新特性,可以用来定义一个类,实际上,class 只是一种语法糖,它是构造函数的另一种写法。(什么是语法糖?是一种为避免编码出错和提高效率编码而生的语法层面的优雅解决方案简单说就是,一种便携写法。)

class PErson {

}
typeof Person // "function"
Person.PRototype.constructor === Person // true

???? 使用

用法和使用构造函数一样,通过 new 来生成对象实例

class Person {

}
let jon = new Person()

???? constructor

每个类都必须要有一个 constructor,如果没有显示声明,js 引擎会自动给它添加一个空的构造函数:

class Person {

}
// 等同于
class Person {
  constructor () {

  }
}

???? 实例属性和方法,原型属性和方法

定义于 constructor 内的属性和方法,即定义在 this 上,属于实例属性和方法,否则属于原型属性和方法。

class Person {
  constructor (name) {
    this.name = name
  }

  say () {
    console.LOG('hello')
  }
}

let jon = new Person()

jon.hasOwnPrototype('name') // true
jon.hasOwnPrototype('say') // false

???? 属性表达式

let methodName = 'say'
class Person {
  constructor (name) {
    this.name = name
  }

  [methodName] () {
    console.log('hello')
  }
}

???? 静态方法

不需要通过实例对象,可以直接通过类来调用的方法,其中的 this 指向类本身

class Person {
  static DOSay () {
    this.say()
  }
  static say () {
    console.log('hello')
  }
}
Person.doSay() // hello

静态方法可以被子类继承

// ...
class Sub extends Person {

}
Sub.doSay() // hello

可以通过 super 对象访问

// ...
class Sub extends Person {
  static nice () {
    return super.doSay()
  }
}
Sub.nice() // hello

???? 严格模式

不需要使用 use strict,因为只要代码写在类和模块内,就只能使用严格模式。

???? 提升

class 不存在变量提升。

new Person() // Uncaught ReferenceError: Person is not defined
class Person {

}
@H_66_304@???? name 属性

name 属性返回了类的名字,即紧跟在 class 后面的名字。

class Person {

}
Person.name // Person

???? this

默认指向类的实例。

???? 取值函数(getter)和存值函数(setter)

class Person {
  get name () {
    return 'getter'
  }
  set name(val) {
    console.log('setter' + val)
  }
}

let jon = new Person()
jon.name = 'jon' // setter jon
jon.name // getter

???? class 表达式

如果需要,可为类定义一个类内部名字,如果不需要,可以省略:

// 需要在类内部使用类名
const Person = class Obj {
  getclassname () {
    return Obj.name
  }
}
// 不需要
const Person = class {}

立即执行的 Class

let jon = new class {
  constructor(name) {
    this.name = name
  }
  sayName() {
    console.log(this.name)
  }
}('jon')

jon.sayName() //jon

???? 参考

脚本宝典总结

以上是脚本宝典为你收集整理的JS 总结之class全部内容,希望文章能够帮你解决JS 总结之class所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。