ES6中的class关键字

最新推荐文章于 2022-01-08 15:24:39 发布
最新推荐文章于 2022-01-08 15:24:39 发布
阅读量221 收藏
点赞数
分类专栏： ES6 javascript 文章标签： ES6中的class关键字
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43307658/article/details/86698279
版权

欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

文章目录

1 ES5 中的面向对象

// 创建一个构造函数
function People (name, age) {
    this.name = name
    this.age = age
}

// 向构造函数的原型对象中添加 say 方法
People.prototype.say = function () {
    return 'hello everyone'
}

// 实例化 People 构造函数，并保存在变量 a 中
var a = new People('zhangsan', 10)

2 ES6 中的 class 关键字

用 ES6 中的 class 类去改写上面的例子看看

class People {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    say() {
       return 'hello everyone' 
    }
}

两个例子可以说实际功能一模一样，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象，且方法之间不需要逗号分隔，加了会报错

ES6 的 class 类，完全可以看作构造函数的另一种写法，证明如下：

class People {  }
typeof People // "function"
People.prototype.constructor === People // true

2.1 类的实例

同样的，也是用new 关键字

class People {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    say() {
       return 'hello everyone' 
    }
}
var people = new People('zhangsan', 18)

与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）

类的所有实例共享一个原型对象

class People {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    say() {
       return 'hello everyone' 
    }
}
var people1 = new People('zhangsan', 18)
var people2 = new People('zhaosi', 20)
people1._proto_ === people2._proto // true

这就意味着可以通过实例的__proto__属性为“类”添加方法

class People {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    say() {
       return 'hello everyone' 
    }
}
var people1 = new People('zhangsan', 18)
var people2 = new People('zhaosi', 20)
people1._proto_.eat = function () {
    return 'banner'
}
people1.eat() // 'banner'
people2.eat() // 'banner'

2.2 取值函数（getter）和存值函数（setter）

案例借用阮一峰老师的《ES6标准入门》

class CustomHTMLElement {
    constructor(element) {
      this.element = element;
  }

  get html() {
      return this.element.innerHTML;
  }

  set html(value) {
      this.element.innerHTML = value;
  }
}

var descriptor = Object.getOwnPropertyDescriptor(
    CustomHTMLElement.prototype, "html"
);

"get" in descriptor  // true
"set" in descriptor  // true

存值函数和取值函数是定义在html属性的描述对象上面，这与 ES5 完全一致

2.3 一些需要注意的点

2.3.1 不存在变量提升

类不存在变量提升

new Foo(); // ReferenceError
class Foo {}

如上代码，定义Foo在后，使用在前，则报错

2.3.2 name

由于本质上，ES6 的类只是ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性

class People {}
People.name // "People"

name属性总是返回紧跟在class关键字后面的类名

2.3.3 Generator 方法

如果某个方法之前加上星号（*），就表示该方法是一个 Generator 函数

generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能，详细请移步廖雪峰老师的generator

class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}

for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
// hello
// world

上面代码中，Foo类的Symbol.iterator方法前有一个星号，表示该方法是一个 Generator 函数。Symbol.iterator方法返回一个Foo类的默认遍历器，for...of循环会自动调用这个遍历器，不断返回多次，一次打印出一个参数，直到遍历出所有的参数

2.3.4 this

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

class People {
    getPeople(name = 'zhangsan') {
        this.print(`hello ${ name }`)
    }
    print(text) {
        console.log(text)
    }
}
const people = new People()
const { getPeople } = people
getPeople() // TypeError: Cannot read property 'print' of undefined

解决办法一：在constructor中绑定this

class People {
    constructor() {
        this.getPeople = this.getPeople.bind(this)
    }
    getPeople(name = 'zhangsan') {
        this.print(`hello ${ name }`)
    }
    print(text) {
        console.log(text)
    }
}
const people = new People()
const { getPeople } = people
getPeople() // 'hello zhangsan'

解决方法二：使用箭头函数

class People {
    constructor() {
        this.getPeople = (name = 'zhangsan') => this.print(`hello ${ name }`)
    }
    print(text) {
        console.log(text)
    }
}
const people = new People()
const { getPeople } = people
getPeople() // 'hello zhangsan'

2.4 静态方法

static关键字，带有static关键字的方法不会被继承，且实例不能调用，必须用过类直接调用

class People {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    static say() {
       console.log('say everyone')
    }
}
People.say() // 'hello everyone' 
var people = new People
people.say() // TypeError: people.say is not a function

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例

class People {
    static hello() {
        this.say()
    }
    static say() {
        console.log('我是静态')
    }
    say() {
        console.log('我是非静态')
    }
}
People.hello() // 我是静态

2.5 静态属性

将static关键字，加在属性前面，即定义了静态属性

class Foo {
  static prop = 1;
}

2.6 私有方法

私有方法是常见需求，但 ES6不提供，只能通过变通方法模拟实现

方法一：在命名上加以区别

class People {
    // 公有方法
    foo (name) {
        this._getName(name)  
    }
    
    // 私有方法
    _getName(name) {
        return this.peop = name
    }
}

上面代码中，getName方法前面的下划线，表示这是一个只限于内部使用的私有方法。但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法

方法二：将私有方法移出模块

class People {
    // 公有方法
    foo (name) {
        getName.call(this, name)  
    }
}
// 私有方法
getName(name) {
    return this.peop = name
}

上述代码中，利用call使this即foo调用了getName方法，这使得getName实际上成为了当前模块的私有方法

2.7 私有属性

请参照http://es6.ruanyifeng.com/#docs/class

2.8 类的继承

Class 可以通过extends关键字实现继承，先看个例子

2.8.1 extends
// 这是父类
class Person {
  constructor(name, age){
    this.name = name
    this.age = age
  }
}

// 这是子类 美国人  可继承父类的一些属性和方法
class American extends Person {
}
const a1 = new American('Jack', 20)
console.log(a1.name) // Jack

// 这是子类 中国人  可继承父类的一些属性和方法
class Chinese extends Person{
}

const c1 = new Chinese('张三', 22)
console.log(c1.name) // 张三
2.8.2 super

既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同

情况一：super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数

// 这是父类
class Person {
  constructor(name, age){
    this.name = name
    this.age = age
  }

  // 打招呼 的 实例方法
  sayHello(){
    console.log('大家好')
  }
}

// 这是子类 美国人 
class American extends Person {
  constructor(name, age){
    super(name, age)
  }
}

const a1 = new American('Jack', 20)
console.log(a1)
a1.sayHello()


// 这是子类 中国人
class Chinese extends Person{
  // name 姓名 
  // age 年龄
  // IDNumber 身份证号 【中国人独有的】，既然是独有的，就不适合 挂载到 父类上；
  constructor(name, age, IDNumber){
    super(name, age)
    this.IDNumber = IDNumber
  }
}

const c1 = new Chinese('张三', 22, '130428******')
console.log(c1)
c1.sayHello()

注意：

  1. 如果需要添加自己独有的属性，则不能挂在到父类上
  2. 在子类中， this 只能放到 super 之后使用

情况二：super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类

// 这是父类
class Person {
  constructor(name, age){
    this.name = name
    this.age = age
  }

  // 打招呼 的 实例方法
  sayHello(){
    console.log('大家好')
  }
}

// 这是子类 美国人 
class American extends Person {
  constructor(name, age){
    super(name, age)
    console.log(super.sayHello())
  }
}

let amer = new American()

上面代码中，子类American当中的super.sayHello()，就是将super当作一个对象使用。这时，super在普通方法之中，指向Person.prototype，所以super.sayHello()就相当于Person.prototype.sayHello()。

3 参考文章

这里王工头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6-class关键字
weixin_44486539的博客
02-07 527
class 关键字 es6 新增了 class 关键字，这是 es6 的新语法，用来实现 es6 中面向对象编程；可以通过该关键字来定义类。 class不存在变量提升，所以需要先定义再使用。 ES5: // 定义一个构造函数 function Preson(name, age) { this.name = name this.age = age } // 创建 preson 实例 ...
解读ES6中class关键字
08-28
JavaScript ES6 中的 Class 关键字 ES6 中引入的 Class 关键字是 JavaScript 语言的一大进步，Class 是 ES6 中最重要的特性之一。通过实例代码，我们可以详细了解 Class 的用法和特点。 1. 定义 Class 在 ES6 中...
ES6 class关键字
Ronychen的博客
11-17 335
本文转载至简书-这里王工头博文 ES5 中的面向对象 // 创建一个构造函数 function People (name, age) { this.name = name this.age = age } // 向构造函数的原型对象中添加 say 方法 People.prototype.say = function () { return 'hello everyon...
ES6 语法详解(class关键字)
彼岸舞的博客
08-16 235
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type=...
深入浅析ES6 Class 中的 super 关键字
08-29
深入浅析ES6 Class 中的 super 关键字 ES6 中的 Class 引入了一个新的关键字 super，这个关键字可以作为函数使用，也可以作为对象使用。在本文中，我们将深入浅析 ES6 Class 中的 super 关键字，了解其用法和特点。...
ES6中class类用法实例浅析
08-30
在ES6中，`class`关键字引入了一种新的面向对象编程的语法，使得JavaScript更加接近传统的面向类的语言。这个特性让开发者能够更直观地定义和使用类，而不再需要依赖于构造函数和原型链。下面我们将深入探讨`class`...
ES6中Class关键字小结
recallMei的博客
06-28 194
通过class关键字创建类 类名习惯性定义首字母大写 类里面有个constructor函数，可以接受传过来的参数，同时返回实例对象 constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数也会自动生成这个函数 生成实例 new不能省略 类中继承 继承中的属性或者方法查找原则：就近原则 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的 继承中，如果子类中没有，就去查找父类有没有这个方法，如果有就先执行父类的这个方法（就近原则） 注意：子类
ES6 class关键字 ~ 非常详细
weixin_46370867的博客
12-28 338
下面的对ES6中class关键字的整理，希望可以帮助到有需要的小伙伴~ 文章目录类的声明构造函数getter与setter不允许提前声明不允许重复声明静态方法静态方法的语法类的继承实现类的继承继承于内置对象Super关键字类的实例 传统面向对象是基于类的面向对象，类的继承实际上是构造函数的继承 JSON是基于原型的面向对象 es6 给了JSON类的语法规则，但是底层没有提供类，底层是构造函数。类的继承实际上是构造函数的继承。 // 这个原型指向对象 Hero.prototype = { age :
ursaclass:在 ES6 类中测试 ursa
06-13
类 在 ES6 类中测试 ursa ##OSX 依赖项 brew install openssl ##io.js 依赖项 npm install pangyp -g ＃＃指示 克隆这个仓库 cd ursaclass npm install --ignore-scripts cd node_modules/ursa pangyp重建 cd ../.. 节点主 如果它运行正常，您将看到：“加密密钥大小：3072” 如果它不能正常工作，你可能会看到这样的错误： :
[ES6] 细化ES6之 -- Class关键字
DeathDomain的博客
10-29 260
类的声明 类是什么 类作为对象的模板,只是一个语法糖 class 关键字是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 // ES5创建构造函数 function Hero() { this.name = "张无忌" this.sayMe = function () { console.log("this is 张无忌"); } } Hero.prototype={ age:18, myjob:function () { co
es6新特性之对象扩展与class关键字定义js中的类
xiaozhuangyumaotao的博客
05-23 349
es6中对对象的扩展 对于下面的JavaScript代码： varusername="zhao" varobj={ username:username, info:function(){ console.log(this.username); } } obj.info(); 依然是我们熟悉的代码：执行结果是:zhao 在es6中对JavaScript的对象又做了哪些扩展呢？我这里说两个简单的地方，先看改写后的代码： varusername="zhao" ...
ES6中的类（class）
Han_Zhou_Z的博客
01-08 2782
目录 一、类（class） 1、在ES6中提供class关键字来定义类 2、在ES6中，支持getter和setter方法的定义，使用getter方法时，采用使用get关键字。使用setter方法时，采用使用set关键字 3、在ES6中提供static关键字类声明静态成员 4、类的继承 一、类（class） class Person{ static num = 1001 constructor(name,gender){//构造方法 this.name = n
ES6 中的Class中的关键字super
weixin_33675507的博客
04-20 99
复习一下ES6 中的关于类的语法 定义一个类 class Animal { constructor(){ this.type = 'animal'; } speak(){ console.log(this.type); } } 相当于下面ES5的这样的写法 function ...
es6中class类、super和estends关键词
高先生的猫
08-13 451
JavaScript语言在ES6中引入了 class 这一个关键字，在学习面试的中，经常会遇到面试官问到谈一下你对 ES6 中class的认识，同时我们的代码中如何去使用这个关键字，使用这个关键字需要注意什么，这篇来总结一下相关知识点。 1.es6之前创建对象 先来看下es6之前我们要想创建一个对象，只能通过构造函数的方式来创建，将静态方法添加在原型上面使得每一个实例能够调用该方法。 function Person(name, age) { this.n.
【05】大厂面试知识总结 - 原型和原型链
有心博客
08-28 108
原型和原型链 如何准确判断一个变量是不是数组? 手写一个简易的jQuery，考虑插件和扩展性 class的原型本质，怎么理解？ 知识点 class和继承 constructor 属性 方法 // 类 class Student { constructor(name, number) { this.name = name this.number = number // this.gender = 'male' } sa
Class 的基本语法
Geordies的博客
02-09 694
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
ES6 类(Class)基本用法和静态属性+方法详解
热门推荐
pcaxb的专栏
12-20 11万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： ES6 类(Class)基本用法和静态属性+方法详解 JavaScript语言的传统方法是通过构造函数,定义并生成新对象,prototype 属性使您有能力向对象添加属性和方法。下面是通过传统的方式创建和使用对象的案例: //Person.js function Person(x,y){ this
ES6中class 语法
最新发布
04-20
1. 可以使用class关键字定义类，使得类的定义更加清晰易读。 2. 类中可以直接声明属性和方法，不需要使用Object.prototype挂载方法。 3. 支持类的继承，可以使用extends关键字继承其他类。 4. 支持constructor构造...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值