JavaScript高级 ES6类

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

ES6类

1. 认识class定义类

我们会发现按照前面ES5的构造函数形式创建类不仅仅和编写普通的函数过于相似而且代码并不容易理解而在ES6新的标准中使用了class关键字来直接定义类但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已

使用class来定义类的方法有两种类声明和类表达式

	// ES5中定义类	
    // function Person() {}

    // ES6定义类
    class Person {

    }
    // 创建实例对象
    var p1 = new Person()
    var p2 = new Person()
    console.log(p1, p2)

    // 另外一种定义方法: 表达式写法(了解, 少用)
    var Student = class {

    }
    var stu1 = new Student()
    console.log(stu1)

2. 类和构造函数的异同

类和我们的构造函数的特性其实是一致的但是不可以作为普通方法被调用

    // function定义类
    function Person1(name, age) {
 
    }


    var p1 = new Person1()

    // 不同点: 作为普通函数去调用
    Person1()

    // class定义类
    class Person2 {
      constructor() {

      }
    }

    var p2 = new Per)

    // 不同点: class定义的类, 不能作为一个普通的函数进行调用
    Person2()

3. 类的构造函数

每个类都可以有一个自己的构造函数方法这个方法的名称是固定的constructor当我们通过new操作符操作一个类的时候会调用这个类的构造函数constructor每个类只能有一个构造函数如果包含多个构造函数那么会抛出异常

当我们通过new关键字操作类的时候会调用这个constructor函数并且执行如下操作

  1. 在内存中创建一个新的对象空对象

  2. 这个对象内部的[[prototype]]属性会被赋值为该类的prototype属性

  3. 构造函数内部的this会指向创建出来的新对象

  4. 执行构造函数的内部代码函数体代码

  5. 如果构造函数没有返回非空对象则返回创建出来的新对象

    // 编程: 高内聚低耦合
    class Person {
      // 1.类中的构造函数
      // 当我们通过new关键字调用一个Person类时, 默认调用class中的constructor方法
      constructor(name, age) {
        this.name = name
        this.age = age
      }
    }

    // 创建实例对象
    var p1 = new Person("why", 18)

    // 使用实例对象中属性
    console.log(p1.name, p1.age)

4. 类的实例方法

在上面我们定义的属性都是直接放到了this上也就意味着它是放到了创建出来的新对象中在前面我们说过对于实例的方法我们是希望放到原型上的这样可以被多个实例来共享这个时候我们可以直接在类中定义

    // 编程: 高内聚低耦合
    class Person {
      // 1.类中的构造函数
      // 当我们通过new关键字调用一个Person类时, 默认调用class中的constructor方法
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      // 2.实例方法
      // 本质上是放在Person.prototype
      running() {
        console.log(this.name + " running~")
      }
      eating() {
        console.log(this.name + " eating~")
      }
    }

    // 创建实例对象
    var p1 = new Person("why", 18)

    // 使用实例对象中属性和方法
    console.log(p1.name, p1.age)
    p1.running()
    p1.eating()

    // 研究内容
    console.log(Person.prototype === p1.__proto__) // true
    console.log(Person.running) // undefined
    console.log(Person.prototype.running) // 返回函数

5. 类的访问器方法

对象的属性描述符时有讲过对象可以添加setter和getter函数的

    // 针对对象
    // 方式一: 描述符
    // var obj = {
      // _name: "why"
    // }
    // Object.defineProperty(obj, "name", {
    //   configurable: true,
    //   enumerable: true,
    //   set: function() {
    //   },
    //   get: function() {
    //   }
    // })

    // 方式二: 直接在对象定义访问器
    // 监听_name什么时候被访问, 什么设置新的值
    var obj = {
      _name: "why",
      // setter方法
      set name(value) {
        this._name = value
      },
      // getter方法
      get name() {
        return this._name
      }
    }

    obj.name = "kobe"
    console.log(obj.name)

那么类也是可以添加setter和getter函数

    // 1.访问器的编写方式
    class Person {
      // 程序员之间的约定: 以_开头的属性和方法, 是不在外界访问
      constructor(name, age) {
        this._name = name
      }

      set name(value) {
        console.log("设置name")
        this._name = value
      }

      get name() {
        console.log("获取name")
        return this._name
      }
    }

    var p1 = new Person("why", 18)
    p1.name = "kobe"
    console.log(p1.name)
    // console.log(p1._name)

    var p2 = new Person("james", 25)
    console.log(p2.name)


    // 2.访问器的应用场景
    class Rectangle {
      constructor(x, y, width, height) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
      }

      get position() {
        return { x: this.x, y: this.y }
      }

      get size() {
        return { width: this.width, height: this.height }
      }
    }

    var rect1 = new Rectangle(10, 20, 100, 200)
    console.log(rect1.position)
    console.log(rect1.size)

6. 类的静态方法

静态方法通常用于定义直接使用类来执行的方法不需要有类的实例使用static关键字来定义

    // class定义的类
    var names = ["abc", "cba", "nba", "mba"]
    class Person {
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      // 实例方法
      running() {
        console.log(this.name + " running~")
      }
      eating() {}

      // 类方法(静态方法)
      static randomPerson() {
        console.log(this)
        var randomName = names[Math.floor(Math.random() * names.length)]
        return new this(randomName, Math.floor(Math.random() * 100))
      }
    }
    
    var randomPerson = Person.randomPerson()
    console.log(randomPerson)

7. ES6类的继承

在ES6中新增了使用extends关键字可以方便的帮助我们实现继承

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

      running() {
        console.log("running~")
      }
      eating() {
        console.log("eating~")
      }

    }

    class Student extends Person {
      constructor(name, age, sno, score) {
        super(name, age)
        this.sno = sno
        this.score = score
      }
      studying() {
        console.log("studying~")
      }
    }
    
    class Teacher extends Person {
      constructor(name, age, title) {
        super(name, age)
        this.title = title
      }
      teaching() {
        console.log("teaching~")
      }
    }

    var stu1 = new Student("why", 18, 111, 100)
    stu1.running()
    stu1.eating()
    stu1.studying()

8. super关键字

我们会发现在上面的代码中我使用了一个super关键字这个super关键字有不同的使用方式但是在子类的构造函数中使用this或者返回默认对象之前必须先通过super调用父类的构造函数

super的使用位置有三个子类的构造函数、实例方法、静态方法

   class Animal {
      running() {
        console.log("running")
      }
      eating() {
        console.log("eating")
      }

      static sleep() {
        console.log("static animal sleep")
      }
    }

    class Dog extends Animal {
      // 子类如果对于父类的方法实现不满足(继承过来的方法)
      // 重新实现称之为重写(父类方法的重写)
      running() {
        console.log("dog四条腿")
        // 调用父类的方法
        super.running()
        // console.log("running~")
        // console.log("dog四条腿running~")
      }

      static sleep() {
        console.log("趴着")
        super.sleep()
      }
    }

    var dog = new Dog()
    dog.running()
    dog.eating()

    Dog.sleep()

9. 继承内置类

    // 1.创建一个新的类, 继承自Array进行扩展
    class HYArray extends Array {
      get lastItem() {
        return this[this.length - 1]
      }

      get firstItem() {
        return this[0]
      }
    }

    var arr = new HYArray(10, 20, 30)
    console.log(arr)
    console.log(arr.length)
    console.log(arr[0])
    console.log(arr.lastItem)
    console.log(arr.firstItem)

    // 2.直接对Array进行扩展
    Array.prototype.lastItem = function() {
      return this[this.length - 1]
    }

    var arr = new Array(10, 20, 30)
    console.log(arr.__proto__ === Array.prototype)
    console.log(arr.lastItem())

    // 函数apply/call/bind方法 -> Function.prototype

10. JavaScript中的多态

维基百科对多态的定义多态英语polymorphism指为不同数据类型的实体提供统一的接口或使用一个单一的符号来表示多个不同的类型

那么从上面的定义来看JavaScript是一定存在多态的

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: JavaScriptJava
返回列表

上一篇：对笔试使用《剑指offer》吧（第十天）

下一篇：Spring MVC 详解

“JavaScript高级 ES6类” 的相关文章

Java 中是如何获取 IP 属地的_java 获取ip归属地1年前 (2023-02-02)
Java 编程要点之 I/O 流详解1年前 (2023-02-02)
【学懂Java】（二）流程控制语句1年前 (2023-02-02)
JavaWeb--快速入门JavaScript1年前 (2023-02-02)
Java注册登录及邮箱发送账号激活 （技术栈SpringBoot，MyBatis）1年前 (2023-02-02)
【学懂Java】(三)数组1年前 (2023-02-02)
jsp动物园网上购票系统Myeclipse开发mysql数据库web结构java编程计算机网页项目1年前 (2023-02-02)
LeetCode Top Interview Questions 29. Divide Two Integers (Java版； Medium)1年前 (2023-02-02)
【Java基础】-【io】1年前 (2023-02-02)
Javaweb知识篇之什么是Filter？_javaweb是什么意思1年前 (2023-02-02)

阿里云国际版