ES6 —- Class

我心飞翔 分类:javascript

这是我参与更文挑战的第5天,活动详情查看: 更文挑战

介绍

js是一个脚本语言没有像强语言一样拥有类这样一个概念,在ES6之前创建一个实例对象都使用的是构造函数的方法。ES6引入了class的概念,通过 class 关键字定义类,作为对象的模板。Class可以看作一个语法糖所以他的本质就是一个function。class模板写法让对象原型的写法更加清晰、更像面向对象编程的语法。

基本语法

语法

  1. 通过class关键声明的类可以认为是构造函数的另一种写法,同样使用 new 关键字创建类实例对象

  2. 在前端开发中我们约定类名首字母大写。类可以匿名也可具名

class App {
    // 这是一个具名类
}

let app = new App() // 创建 App 类的实例对象 

let Demo = class {
    // 这是一个匿名类
}

let demo = new Demo() // 创建 Demo 类的实例对象 
 
  1. 构造函数的prototype属性在class依然存在
 class App {
   sayHello () {
       console.log('你好我是App')
   }

   sayGoodbye () {
       console.log('再见我是App')
   }
}
 let app = new App()
 
 app.sayHello()   //   '你好我是App'
 app.sayGoodbye()   //  '再见我是App'    
 /*
 等价于
 class App () {}
 App.prototype = { 
       sayHello () {
           console.log('你好我是App')
       }

       sayGoodbye () {
           console.log('再见我是App')
       }
 }
*/
 

注意

  1. 我们打印上面的App类会发现,类中的所有方法全部都存储在类的prototype对象上面(即类的所有方法都是原型方法)
  2. class支持动态属性
let key = 'sayHello'
class App {
    [key]() {
       console.log('你好我是App')
    }
}
// App.prototype.sayHello()
// 函数也可以使用动态函数名
function [key] () {
    
}
//等价于 function sayHello () { }
 
  1. 类内部定义的属性都是不可枚举
 class App {
   sayHello () {
       console.log('你好我是App')
   }

   sayGoodbye () {
       console.log('再见我是App')
   }
}
     
for(key in App.prototype) { 
    // 这里不会被执行
    console.log(key)
}

console.log(App.prototype)
 

constructor 方法

概念 constructor方法是类的构造函数,也是类的默认方法。通过new关键字创建类的实例时,会自动调用 constructor 方法

经典面试题: new关键字到底做了什么? 可以好好思考思考了。

注意

  1. 一个类必须由constructor方法。如果创建class时没有显示定义constructor方法,class会默认的隐式添加一个空的constructor方法

  2. constructor函数会隐式默认的返回当前实例对象(即this)。开发人员可以显示返回另一个对象这样当前class实例化后生成的就是 constructor函数 返回的新对象

class Demo {
        say() {
            console.log(123)
        }
}


 class App {
       constructor() {
           return new Demo()
       }

       sayHello () {
           console.log('你好我是App'this)
       }

       sayGoodbye () {
           console.log('再见我是App')
       }
}
     
 let app = new App()

console.log(app) // 这里的app 是 Demo 的实例对象
 
  1. class 只允许使用new关键字创建实例对象, 而不允许像构造函数一样直接调用。这一特性是他与构造函数的主要区别
class App {
    sayHello() {
        console.log('你好我是App'this)
    }

    sayGoodbye() {
        console.log('再见我是App')
    }
}

App() // Error  class不可在没有new关键字情况下直接调用
 

实例属性

概念 通过class塑造的实例对象自身的属性(及this的属性)

语法

方法一: 在构造函数 constructor构造函数中同this设置

 class App {
     constructor(name, age) {
        // 这里的this就是实例对象自身
        this.name = name
        this.age = age 
    }
}

let app = new App('小明', 12)
 

方法二: 直接写在class中的属性 属性名 = 属性值

 class App {
     // 可以将所有的实例属性写在class的顶部,可以直观地看到当前实例有哪些属性
        a = 1
        b = function({              
}
 

方法三: 使用类的get/set创建实例属性
概念 与ES5 一样class可以在内部使用get 和 set 关键字对某个属性设置 get函数和set函数,拦截该属性的存取行为

语法 下面实现了一个类似Vue数据发生改变对应DOM更新的案例

静态方法

概念 不会被实例对象所继承的方法,只能通过class自身调用

语法 使用关键字static 声明

注意

  1. 静态方法内部this指向构造函数自身,不是类的实例

  2. 静态可以被子类所继承

静态属性

概念 不会被实例对象继承的属性就是静态属性,在class中只有静态方法没有静态属性。后来有一个提案提出使用static 关键字声明静态属性

语法

私有属性

概念 在js中一直不存在真正的私有属性。以往实现私有属性的方法一共有以下几种:

方法一: 属性名前加下划线,表示该属性是一个私有属性,但是这种方法是不保险的。即使加了下划线该属性在外部依然可以调用

方法二: 使用模块化

方法三: Symbol

方法四: ES2020 中提案 用#开头声明私有属性

类的继承

概念 class 可以通过 extend 关键字实现类的继承

语法

注意

  1. 使用了类的继承的子类在其constructor函数中一定要调用一个super函数,否则新建实例会报错。

  2. 因为在类的继承中子类的this对象必须调用父类constructor完成塑造,得到父类相同的属性和方法,然后进行加工返回子类的this,子类的this再加上子类自身的实例属性方法。super其实就是父类的constructor方法。如果不在子类构造函数内部调用super,子类就没有this对象。

  3. 注意如果子类没有显示声明constructor函数,ES6会自动隐式创建constructor函数并在其内部调用super方法。如果你的子类constructor中不需要设置实例属性推荐隐式创建constructor函数

super的属性

概念 super就是父类构造函数,所以super与父类的构造函数接收同样参数,在使用类的继承时一定要记得给super传递参数

语法

注意: 使用...语法可以简化 super 传参问题

回复

我来回复
  • 暂无回复内容