广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >es6的class是干什么的
  • 829
分享到

es6的class是干什么的

javascriptES6 2022-11-22 23:11:42 829人浏览 八月长安
摘要

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。基础es6引入了Class(类)这个概念,class关键字用于快速地定义“类”。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加

教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

基础

  • es6引入了Class(类)这个概念,class关键字用于快速地定义“类”。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。

  • 实际上背后依然使用的 原型和构造函数的概念。

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

  • 提升class不存在变量提升 (由于继承有关 必须确保子类在父类之后定义)。

  • 类的所有方法都定义在类的prototype属性上面,在类的实例上面调用方法,其实就是调用原型上的方法 原型方法可以通过实例对象调用,但不能通过类名调用,会报错

class 为es6用来定义一个类
  • 实际上 class只是一个语法糖 是构造函数的另一种写法

  • (语法糖 是一种为避免编码出错 和提高效率编码而生的语法层面的优雅解决方案 简单说 一种便携写法 而已)

看代码

class Person{
}
console.log(typeof Person)                               //funciton
console.log(Person.prototype.constructor === Person)     //true

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

class person2 {
}
let JSON = new person2;
属性和方法

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

class Person {
  constructor (name) {
    this.name = name            //constructor内定义的方法和属性是实例对象自己的,
  }
  say () {                      //而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
    console.log('hello')
  }
}
let jon = new Person()
jon.hasOwnPrototype('name')     //true
jon.hasOwnPrototype('say')      //false

静态方法

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

class Person {
  static doSay () {
    this.say()
  }
  static say () {
    console.log('hello')
  }
}
Person.doSay()              //hello
***********************************************************************************************
//静态方法可以被子类继承
class Sub extends Person { 
}
Sub.doSay() // hello

//静态方法可以通过类名调用,不能通过实例对象调用,否则会报错
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

name属性

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

class Person {
}
Person.name // Person

this 默认指向类的实例。

类的方法内部如果含有this 坑儿 一但单独使用该方法 很可能就会报错
如果 this指向不对 1使用箭头函数 2在构造方法中绑定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 Person {}
class Person {}
// TypeError Identifier 'Person' has already been declared

constructor关键字

  • 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)
  }
}

constructor 啥子?

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

class person3 {
}
//等于 
class person3 {
    constructor(){}
}

注意 在类中声明方法的时候,方法前不加 function 关键字 方法之间不要用逗号分隔,否则会报错 类的内部所有定义的方法,都是不可枚举的(non-enumerable)

注意 与es5一样 实例的属性除非 显示定义在其本身(即this对象)上 否则都是定义在原型上面

class Point {
  constructor(x,y){
    this.x = x;
    this.y = y;
    
  }
  toString(){
    return `this.x + this.y`;
  }
}
var point = new Point();
point.toString()    //(2,3)
point.hasOwnProperty("x")        //true
point.hasOwnProperty("y")        //true   在这x&&y都是实例对象point自身的属性(因为定义在this变量上) // 所以返回true 
point.hasOwnProperty("toString") //false  toString是原型对象的属性 (因为定义在Point类上)             //所以返回false 
point._proto_.hasOwnProperty("toString") //true  

//加两个实例 
var p1 = new Point();
var p2 = new Point();
p1._proto_ === p2._proto_                //true    这个不建议使用 
//上面代码中 p1和p2 都是point的实例 他们的原型都是Point.prototype 所以 _proto_属性是相等的 
//即是说 可以通过实例的_proto_ 属性为 "类" 添加方法

super关键字

super关键字用于访问和调用 父类上的函数,可以调用父类的构造函数 也可以调用父类的普通函数

 class Father {
        constructor (surname){
            this.surname = surname
        }
        say(){
            console.log("你的名字" + this.surname)  //你的名字锤子
        }
    }
    //在这里 子继承父类
    class Son extends Father {
        constructor(surname,name){
            super(surname)
            this.name = name 
        }
        say(){
            super.say()
            console.log('调用普通' + this.name)    //调用普通铁的
        }
    }
    var son = new Son('锤子',"铁的")
    son.say()
    console.log(son)   //打印  {surname: "锤子", name: "铁的"
    //在子类的构造函数如果使用 super 调用父类的构造函数 必须写在 this之前  
    //还可以 调用父类的普通方法 
    //在es6中 类没变量提升 必须先定义 才能通过实例化对象类里面的 共有属性 和方法 通过this 调用
    //类 里面的this 代表什么
    //constructor 里面this指向实例对象  
    // 方法里面this 代表 方法的 调用者

extends继承

继承即子承父业现实中 程序中子类可以继承父类中的一些 方法和属性
继承时面向对象的 一大特性 可以减少代码的编写 方便公共内容的抽取 关键字extends

 class Father {
        constructor (surname){
            this.surname = surname
        }
        say(){                                     //父级Father里面有一个方法 say()  
            console.log("你的名字" + this.surname)
        }
    }

    class Son extends Father {                     //在这里Son 继承了 Father父级里面的方法   关键字extends 
    }

    var son = new Son('锤子')                      //new 出来实例   
    son.say()                                      //打印  你的名字锤子

类的方法

class Person  {
         constructor(name, age) {    
    // 构造函数,接收一个name和age
             this.name = name
             this.age = age 
         }
         say(){
    // 一个方法  //注意类里面的方法不加function关键字  方法与方法之间不用,号隔开 
             console.log("你好",this.name)
         }
         // ....sayWhat(){} saySome(){}
    }
     var person  = new Person('老王',44)
    //调用方法
     person.say()  //老王
    //在类的实例上调用方法 其实就是调用 原型上的方法

类的表达式

与函数一样 calss 也可以使用表达式的形式定义 采用class表达式 可以写出立即执行的Class!!
注意与函数表达式类似 类表达式在他们被求值前也不能使用(即赋值变量 之前调用) 但 与函数定义不同 虽然函数声明可以提升 但类不能

类表达式(类定义)
类表达式可以是被命名的或匿名的

匿名类

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
  }
}
const Mycalss = class Me {
    getClassName(){
        return Me.name;
    }
};     //这里用 表达式(即赋值变量一个) 
       //注意! 这个类的名字是Mycalss而不是 Me Me只在Class的内部代码可用 指代当前类
let inst = new Mycalss();
inst.getClassName()   //Me   
Me.name               //报错  Me只在Class内部有定义

采用class表达式 可以写出立即执行的Class!!

let person = new class {
    constructor(name) {
       this.name = this.name; 
    }    
    sayname(){
        console.log(this.name);
    }
}("常东东")         //这段代码中class是立即执行的实例

补充案例

class Animal {                       //class定义了一个“类”
        constructor(){
            this.type = 'animal'     //有一个constructor方法,这就是构造方法   //this关键字则代表实例对象
        }                            //constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
        says(say){
            console.log(this.type + ' says ' + say)
        }
    }
    let animal = new Animal()
    animal.says('hello')    //animal says hello

    class Cat extends Animal {       //通过extends关键字实现继承  //定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。
        constructor(){
            super()                  //super关键字 它指代父类的实例(即父类的this对象)子类必须在constructor方法中调用super方法,否则新建实例时会报错。
            this.type = 'cat'        //这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。   
        }
    }
    let cat = new Cat()
    cat.says('hello')       //cat says hello

以上就是es6的class是干什么的的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: es6的class是干什么的

本文链接: https://www.lsjlt.com/news/173392.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • es6的class是干什么的
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。基础es6引入了Class(类)这个概念,class关键字用于快速地定义“类”。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加...
    99+
    2022-11-22
    javascript ES6
  • es6的class有什么用
    这篇文章主要介绍了es6的class有什么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6的class有什么用文章都会有所收获,下面我们一起来看看吧。es6的class关键字用于快速地定义“类”;clas...
    99+
    2023-07-04
  • ES6中class的基础用法是什么
    这篇“ES6中class的基础用法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ES...
    99+
    2022-10-19
  • class在es6中本质是什么
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。es6的Class类详解class基本语法JavaScript 语言中,生成实例对象的传统方法是通过构造函数和原型的组合模式.ES6 提供了更接近传统语言...
    99+
    2022-11-22
    class ES6 javascript
  • es6 修饰器是干什么用
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。修饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的...
    99+
    2023-05-14
    修饰器 javascript ES6
  • es6的class是不是函数
    本篇内容介绍了“es6的class是不是函数”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • class是es6的新特性吗
    这篇文章主要讲解了“class是es6的新特性吗”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“class是es6的新特性吗”吧!class是es6新特性。在ES6中,class(类)作为对象...
    99+
    2023-07-04
  • es6中class继承调用super的原因是什么
    本文小编为大家详细介绍“es6中class继承调用super的原因是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“es6中class继承调用super的原因是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-07-04
  • es6的class是不是严格模式
    今天小编给大家分享一下es6的class是不是严格模式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。是严格模式。es6类和模...
    99+
    2023-07-04
  • ES6的Class类怎么使用
    本篇内容介绍了“ES6的Class类怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在ES6中,class (类)作为对象的模板被引入...
    99+
    2023-06-27
  • ES6中Class和Module有什么用
    小编给大家分享一下ES6中Class和Module有什么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、ClassES6引入了Class(类)这个概念,作为对象的模板。通过class关...
    99+
    2022-10-19
  • ES6中的class类怎么使用
    本篇内容主要讲解“ES6中的class类怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ES6中的class类怎么使用”吧! 认识class定义类 我...
    99+
    2022-10-19
  • java是干什么的
    Java是一门面向对象编程语言,它是静态面向对象编程语言的代表,具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程,可用于编写桌面应用程...
    99+
    2022-10-16
  • javascript是干什么的
    本篇内容介绍了“javascript是干什么的”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • phpcms是干什么的
    phpcms是建立和管理动态网站的,基于PHP的开源内容管理系统。它为用户提供了一套完整的解决方案,方便管理网站的内容、用户和权限,拥有丰富的模板系统和扩展功能,使得网站具有更好的外观和功能,还具有良好的性能和安全性。本教程操作系统:Win...
    99+
    2023-07-13
  • discuz是干什么的
    discuz是一个功能强大、灵活可定制的论坛软件,适用于各种规模和类型的在线社区,为用户提供了一个互相交流、分享知识和经验的平台,同时也为管理员提了一种管理和维护社区的工具。无论是个人博客、学术研讨会、商业论坛还是兴趣社区,discuz都可...
    99+
    2023-08-16
  • mongodb是干什么用的
    MongoDB是一种开源的、面向文档的NoSQL数据库管理系统,用于存储和管理大规模、高性能的非结构化数据。它可以用于处理各种类型的...
    99+
    2023-09-12
    mongodb
  • nplayer是干什么用的
    nPlayer是一款跨平台的媒体播放器,主要用于播放各种格式的音频和视频文件。无论是在移动设备上还是在桌面电脑上,nPlayer都提供了出色的性能和功能,让用户能够享受到高质量的音视频体验。nPlayer是一款跨平台的媒体播放器,主要用于播...
    99+
    2023-07-28
  • dedecms是干什么用的
    Dedecms是一款开源的内容管理系统,其主要用途和功能是:1、 提供了一个易于使用的后台管理界面,可以轻松地创建、编辑和发布各种类型的内容;2、允许用户自定义网站的外观和布局;3、支持多语言网站;4、设置不同用户角色和权限,以限制对网站内...
    99+
    2023-08-03
  • es6的class有变量提升吗
    本文小编为大家详细介绍“es6的class有变量提升吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“es6的class有变量提升吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。es6的class没有变量提升。在...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作