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) // let person2=new Person("maria",11)
    console.log(person2.nickname) // 'maria'
    console.log(person2.age) //

    类方法
    类方法是定义在类内部的函数,可以在类内部调用: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()) //
    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) //
    console.log(male.getNickname()) // 'jack'
    console.log(male.getAge()) //
    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

es6基础:类、继承、重写的更多相关文章

  1. C++基础——类继承中方法重载

    一.前言 在上一篇C++基础博文中讨论了C++最基本的代码重用特性——类继承,派生类可以在继承基类元素的同时,添加新的成员和方法.但是没有考虑一种情况:派生类继承下来的方法的实现细节并不一定适合派生类 ...

  2. ES6——class类继承(读书笔记)

    前言 我一定是一个傻子,昨天这篇文章其实我已经写好了一半了,但是我没有保存 这是学习ES6的过程,我没有系统的看完阮大大的书.零零散散的,很多功能知道,但是没有实际的用过 看了几遍,总是看前面几章,所 ...

  3. C++基础——类继承

    一.前言  好吧,本系列博客已经变成了<C++ Primer Plus>的读书笔记,尴尬.在使用C语言时,多通过添加库函数的方式实现代码重用,但有一个弊端就是原来写好的代码并不完全适用于现 ...

  4. java基础 类 & 继承

    类 在Java中,类文件是以.java为后缀的代码文件,在每个类文件中可以有多个类,但是最多只允许出现一个public类,当有public类的时候,类文件的名称必须和public类的名称相同,若不存在 ...

  5. 深入解析ES6 更易于继承的类语法的使用

    和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...

  6. 实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法

    实现Square类,让其继承自Rectangle类,并在Square类增添新属性和方法,在2的基础上,在Square类中重写Rectangle类中的初始化和打印方法 #import <Found ...

  7. Python基础(十一) 类继承

    类继承: 继承的想法在于,充份利用已有类的功能,在其基础上来扩展来定义新的类. Parent Class(父类) 与 Child Class(子类): 被继承的类称为父类,继承的类称为子类,一个父类, ...

  8. C#基础--类/接口/成员修饰符,多态、重载、重写,静态和非静态

    C#基础--类/接口/成员修饰符,多态.重载.重写,静态和非静态 类/接口/成员修饰符 C#修饰符---接口: 接口默认访问符是internal接口的成员默认访问修饰符是public C#修饰符--类 ...

  9. ES6中的类继承和ES5中的继承模式详解

    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...

  10. 创建线程的一般方式和匿名内部类方式对比——继承thread类,重写run()方法

    第一种:继承thread类,重写run()方法 一般方式:Demo01.java /** * 创建线程的第一种方式:继承thread类,重写run()方法 * * @author :liuqi * @ ...

随机推荐

  1. 阿里云ECS安装JAVA+MYSQL+NGINX

    2019独角兽企业重金招聘Python工程师标准>>> 1.准备工作 查看linux版本: linux版本为CentOS 7.4 查看系统信息: 系统为64位 确保服务器系统处于最新 ...

  2. 请不要浪费你的生命,一文多发推广就用它(OpenWrite)

    你我的共同困惑 你是否跟我一样?刚开始尝试写作,自己没有名气,有以下几个困惑: 想要推广自己,想在多个平台发文? 多平台发文之后,想要看各个平台的流量如何? 有了流量,想要引流用户到自己的网站? 网站 ...

  3. JavaSpring中级联查询

    一对一级联查询映射文件PersonMapper.xml代码: <?xml version="1.0" encoding="UTF-8"?> < ...

  4. Linux服务器有大量的TIME_WAIT状态

    我们经常会遇到在服务器上看到大量的TIME_WAIT,它们占用进程不释放,最后会导致所有进程数被耗完,服务器负载增高等生产事故,具体是什么原因导致的呢?我们先来看看TCP的三次握手四次挥手都是怎样的一 ...

  5. Edge Weight Assignment(树-异或-贪心)

    大意: 给定一棵无根树,要求你任意设置n-1条边的边权. 使得任意叶子节点间边权的XOR值为0: 此时,令f为所有边权数值不同的个数,求最小的f和最大的f. \(\color{Red}{------- ...

  6. N - Marriage Match II 网络流

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3081 推荐博客:https://www.cnblogs.com/liuxin13/p/4728131. ...

  7. Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

    今天上传图片遇到这个报错 百度了下,网上说是input标签type=file所以导致的问题,可是我的type=hidden 解决办法: 把上面的代码改成如下问题就解决了

  8. 你知道Spring是怎么解析配置类的吗?

    彻底读懂Spring(二)你知道Spring是怎么解析配置类的吗? 推荐阅读: Spring官网阅读系列 彻底读懂Spring(一)读源码,我们可以从第一行读起 Spring执行流程图如下: 如果图片 ...

  9. [hdu5255]枚举

    思路:这题与csu1392题目类似,方法类似.枚举最高位,最低位和中间数字的长度,然后列等式,计算中间的数字,看长度是不是跟枚举的一致,需要注意的是中间数字可以有前导0,如果根据等式算出来的中间数字为 ...

  10. JS防抖和节流:原来如此简单

    一.函数防抖 前端开发工作中,我们经常在一个事件发生后执行某个操作,比如鼠标移动时打印一些东西: window.addEventListener("mousemove", ()=& ...