class 是 ES6 的新特性,可以用来定义一个类,实际上,class 只是一种语法糖,它是构造函数的另一种写法。
class Person {
}
typeof Person // "function"
Person.prototype.constructor === Person // true
用法和使用构造函数一样,通过 new 来生成对象实例
class Person {
}
let jon = new Person()
每个类都必须要有一个 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 {
}
name 属性返回了类的名字,即紧跟在 class 后面的名字。
class Person {
}
Person.name // Person
默认指向类的实例。
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
如果需要,可为类定义一个类内部名字,如果不需要,可以省略:
// 需要在类内部使用类名
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语言传统创建对象的方法一般是通过构造函数,来定义生成的,下面是一个使用function生成的例子。ES5是先新建子类的实例对象this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数
ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板。通过class关键字,可以定义类
mixin一般翻译为“混入”、“混合”, 早期一般解释为:把一个对象的方法和属性拷贝到另一个对象上;Mixin是一种思想,用来实现代码高度可复用性,又可以用来解决多继承的问题,是一种非常灵活的设计模式
JS基于原型的类,一直被转行前端的码僚们大呼惊奇,但接近传统模式使用class关键字定义的出现,ES6的class只是个语法糖,其定义生成的对象依然构造函数。不过为了与构造函数模式区分开,我们称其为类模式。
ES6中的 class定义一个类, 其内部包含 constructor构造函数, 除了在构造函数显示的定义一些属性, 其余的默认都添加到这个类的原型对象上。以上代码 classProxy(prosen2) 返回的是包含一层拦截器的实例对象, 当读取 sayName这个函数的是和会出发 get拦截等操作。
使用jQuery可以给元素很方便的添加class和删除class等操作,现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除class、查询class等。elementClasses 是一个 DOMTokenList 表示 element 的类属性 。
proposal-class-fields与proposal-private-methods定义了 Class 的私有属性以及私有方法,这 2 个提案已经处于 Stage 3,这就意味着它们已经基本确定下来了,等待被加入到新的 ECMAScript 版本中。
ES6中新增了class这个语法糖。此class并非java中的class,ES6中的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。其中有static关键字。
vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下;vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,可以通过 方式设置class
class (类)作为对象的模板被引入,可以通过 class 关键字定义类。类简要说明,类的本质是function,是基本原型继承的语法糖。所以,JS中继承的模型是不会被改变的。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!