世界焦点!es6的class是干什么的

时间:2022-10-26 19:01:18       来源:PHP中文网

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

基础

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


(资料图)

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

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

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

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

class 为es6用来定义一个类

实际上 class只是一个语法糖 是构造函数的另一种写法

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

看代码

class Person{}console.log(typeof Person)                               //funcitonconsole.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")     //truejon.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)  // 3p.sum(1,2)        //  TypeError p.sum is not a function
登录后复制

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 jonjon.name         // getter
登录后复制

//类声明不可以重复

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(){}}
登录后复制

注意 与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")        //truepoint.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()  //老王    //在类的实例上调用方法 其实就是调用 原型上的方法
登录后复制

类的表达式

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

匿名类

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
登录后复制

【相关推荐:javascript视频教程、编程视频】

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

关键词: 构造函数 你的名字 静态方法