zoukankan      html  css  js  c++  java
  • es6基础:类、继承、重写

    es6真正的引入的面相对象的,以前我们总是通过其他手段来模拟这种形式,现在终于有了,我有点开心,又有点难过,因为在我看来,js并不是所谓的面相对象的语言,反而更偏向函数式,原型继承是他真正的面目。面相对象不过是人们在思考问题时总结出一套有效的、大家都认同的解决问题的思路。在其他语言、各种领域取得成功之后,又将这种思想带入js中,为的是将已有的经验可以复用到js,从而更有效的解决js中的问题。

    的确,面相对象是一个很有用的思考模块,在分解真实世界、大型项目的维护上有很大的好处,但是却缺少了函数式的灵巧。曾经想用完全面向对象的方式写一个redux,却发现无法用这种方式写出compose这种神奇的东西。

    或许是我还没能在面相对象和函数式之间取得一种平衡,以取得面相对象和函数式共同的优点。

    0x001 类

    普通的类

    • 普通的类

      class Person{}
    • 类表达式

    // 匿名类
    
    let Person=class{}
    
    // 具名类
    
    let Person=class Person{}

    0x001 初始化类和构造函数

       实例化类
        可以使用new来调用一个类,从而实例化一个类实例

    • class Person{}
      new Person() // Person{}
    • 构造函数
        使用new实例化一个类实例之后,将会自动调用该类的构造函数constructor,并且可以传递参数

       
          class Person{
              constructor(name, age){
                  console.log(name, age)
              }
          }
          new Person("jack", 23) // 'jack', 23

      类变量
      类中可以保存一些变量,在类中,可以通过this.variable_name来访问,在类外,可以通过instance_name.variable_name只有类实例可以访问他们,并且每个类实例的变量都是属于每个类实例的。

      class Person {
         constructor(nickname, age){
             this.nickname = nickname
             this.age = age
         }
      }
      console.log(Person.nickname) // undefined
      console.log(Person.age) // undefined
       
      let person=new Person("jack",23) 
      console.log(person.nickname) // 'jack'
      console.log(person.age) // 23
       
      let person2=new Person("maria",11) 
      console.log(person2.nickname) // 'maria'
      console.log(person2.age) // 11

      类方法
      类方法是定义在类内部的函数,可以在类内部调用:this.function_name(params),也可以在实例上调用:instance_name.function_name(params)

      class Person{
          constructor(nickname, age){
              this.nickname = nickname
              this.age =age
          }
          getNickname(){
              return this.nickname
          }
          getAge(){
              return this.age
          }
          summary(){
              return  `${this.nickname}:${this.age}`
          }
      }
      let person=new Person('jack', 23)
      console.log(person.getNickname()) // ''jack
      console.log(person.getAge()) // 23
      console.log(person.summary()) // 'jack:23'

      静态方法
      静态方法是可以通过类直接调用的方法,不需要实例化

      class Person{
          static sayHello(){
              console.log('hello')
          }
      }
      Person.sayHello() // 'hello'

      继承

      继承就是将父类所有的方法和都继承下来,包括构造函数

      class Person{
              constructor(nickname, age){
                  this.nickname = nickname
                  this.age =age
              }
              getNickname(){
                  return this.nickname
              }
              getAge(){
                  return this.age
              }
              summary(){
                  return  'this is Person'
              }
      }
      class Male extends Person {}
      let  male=new Male('jack',23)
      console.log(male.nickname) // 'jack'
      console.log(male.age) // 23
      console.log(male.getNickname()) // 'jack'
      console.log(male.getAge()) // 23
      console.log(male.summary()) // 'this is Person'
      class Far {
                      constructor(x, y) {
                          this.x = x;
                          this.y = y;
                      }
                      sum() {
                          console.log(this.x + this.y);
                      }
                  }
      
                  class Jc extends Far {
                      constructor(x, y) {
                          super(x, y);
                      }
                  }
      
                  new Jc(1, 2).sum();

      0x003 重写

      有时候我们不希望一个函数的作用和父类一致,比如在上面的栗子中,male.summary()返回this is Person,不符合我们的逾期,我们希望返回this is Male,这个时候就可以用到重写,只要写一个和父类相同名字和函数就行了,甚至参数个数不一致也不影响

      class Person{
              constructor(nickname, age){
                  this.nickname = nickname
                  this.age =age
              }
              getNickname(){
                  return this.nickname
              }
              getAge(){
                  return this.age
              }
              summary(){
                  return  'this is Person'
              }
      }
      class Male extends Person {
          summary(){
              return  'this is Male'
          }
      }
      let male=new Male()
      console.log(male.summary()) // this is Male
  • 相关阅读:
    解决IE6不支持position:fixed的bug
    响应式Web设计基础
    多行文本溢出显示省略号(…)全攻略
    解读CSS布局之-水平垂直居
    理解CSS中BFC
    七个你可能不了解的CSS单位
    屏蔽系统热键钩子Hook程序
    Win 2008 r2 远程桌面多用户登陆,一用户多登陆配置
    把Excel转换成DataTable,Excel2003+
    DataGridView不显示未绑定的列-AutoGenerateColumns
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/11528552.html
Copyright © 2011-2022 走看看