es6基础0x018:类、继承、重写、超类调用

2018-11-16 admin

0x000 概述

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'

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

0x004 调用超类

有时候我们希望在父类的流程基础上添加一些自己的逻辑,这个时候就可以用到调用超类。要注意的是,如果要重写构造函数,必须要在构造函数的第一行调用父类的构造函数super(...params),在而在其他地方,则可以通过super.variable_name或者super.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 is Person'
        }
}
class Male extends Person {
    constructor(nickname, age){
        super(nickname, age)
        this.sex='male'
    }
    getSex(){
        return this.sex
    }
    summary(){
        return  super.summary()+', and this is Male'
    }
}
let male=new Male()
console.log(male.sex) // male
console.log(male.summary) //this is Person, and this is Male

[转载]原文链接:https://segmentfault.com/a/1190000017030462

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45570.html

文章标题:es6基础0x018:类、继承、重写、超类调用

相关文章
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
canvas图片绘制跨域问题解决方案Tainted canvases may not be exported
图片跨域问题的一般解决方法 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下...
2018-04-19
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
回到顶部