学习笔记

今儿再看了看ES6,准备把设计模式用ES6重写一下,以加深理解。

ES6的class只是现有javascript[[Prototype]]机制的包装。

想到设计模式就应该现梳理一下面向对象相关的知识。 面向对象最基本的核心就是 封装、继承、多态。以下就针对这三点基本核心做以下梳理。

ES6面向对象知识梳理

封装的概念大概可以理解为 组织包含一组跟对象相关的属性和方法。

属性包括 共有 私有 静态

方法包括 共有 私有 静态

封装

ES5之前的Javascript当中实现的对象封装

var Book = function(title, author, category) {  
    // 公有属性
    this.title = title;
    this.author = author;
    this.category = category;

    // 私有属性
    var bookNum = 0;

    // 公有方法
    this.show = function() {
        console.log(this.title);
    };

    // 特权方法
    this.getBookNum = function() {
        return this.bookNum;
    }

    // 构造器
    this.setTitle = function(title) {
        this.title = title;
    }

    // 静态私有方法
    function checkId(id) {

    }

}


// 原型构建
Book.prototype = {  
    isJSBook : false,
    display : function(){}
}

// 安全类定义
var Book = function() {  
    if(this instanceof Book) {

    } else {
        return new Book();
    }
}

ES6的对象封装

let methodName = 'showTitle';

class Book {  
   constructor(title, author, category) {
       this.title = title
       this.author = author
       this.category = category
       this.show()
   }
   set title(value) { this.title = value }
   get title() { return this.title }
   // 公共方法
   show () {
       console.log(title)
   }
   // 静态方法
   static checkId() {

   }

   // 动态方法
   [methodName]() {
       console.log(this.title);
   }

   // 生产方法
   *createIterator() {
        yield 1;
        yield 2;
        yield 3;
    }

    // 迭代遍历方法
    *[Symbol.iterator]() {
        yield *this.items.values();
    }
}

继承

ES5 之前的继承方式

类式继承

function SuperClass() {

}

function SubClass() {

}

SubClass.prototype = new SuperClass();  

子类的prototype赋值成一个父类的实例,从而实现对父类的继承。问题是子类的扩展会向所有父类的实例广播。

构造继承

function SuperClass() {

}

function SubClass(id) {  
    SuperClass.call(Subclass, id)
}

子类实例化实际上是应用call来包含父类的属性和方法,是对父类的复制。

组合继承

function SuperClass() {

}

function SubClass(time) {  
    SuperClass.call(SubClass, id)

    this.time = time;
}

SubClass.prototype = new SuperClass();  

单子类会继承时运行父类,构造时也运行父类 运行两次。

原型继承

function inheritObject(o) {  
   function F();
   F.prototype = o;
   return new F();
}

返回一个全新的对象。继承了目标对象的属性和方法。

寄生式继承

function CreatSomeThing(obj) {  
    var o = new inheritObject(obj);
    o.show = function() {

    }

    return o;
}

函数内部调用原型继承, 创建一个实例,然后对该实例进行扩展。

寄生组合式继承

function inheritPrototype(SuperClass, SubClass) {  
    var p = inheritObject(SuperClass.prototype);
    p.constructor = SubClass;
    SubClass.prototype = p;
}

可实现用子类的构造函数,然后继承父类的属性和方法。

多继承

function extend = fucntion(target, source) {  
    for(property in source) {
        target[property] = source[property];
    }
    return target;
}// 多个对象继承多层循环

ES6推荐的继承

使用extends关键字

class SubClass extends SuperClasss {

    constructor {

    }

    show() {

    }

}

子类中可以用super来表示父类

class SuperClass {}  
class SubClass extends SuperClass() {  
    super(); // 基于父类定义自己的结构
}

另外静态方法将被继承

多态

ES5之前的多态实现

function add() {  
    var arg = arguments;

    len = arg.length;

    switch(len) {
        case 0 :
            return 0;
        case 1 :
            return 0 + arg[0];
        case 2 :
            return arg[0] + arg[1]
    }
}

ES6的多态实现

可以用super()来实现多态

class SuperClass {  
    constructor() {

    }
    show() {

    }
}

class SubClass() {  
    constructor() {

    }
    show() {
        super();
        // do somthing
    }
}

Yuan Liang

资深程序渣、秧歌队贝斯手、摄影百拍王、意淫旅行家、正经的令人发指!

http://yuanliang.io
—Read This Next—

开源俺们的HTML5播放器


开源这话题没啥可说的,所有程序员 甚至所有公司都应该开源, 有人骂你的代码说明还有人关注你,你还有提高的空间:) 个人觉得甚至公司的数据都应该开源,并不是说别人用了你的代码和数据你就没有任何可以保护的核心技术了,我相信如果亚马逊把一些自己的技术开源 即便是有人用了他们的数据和程序
—You Might Enjoy—

ES6设计模式(二)


创建型设计模式学习笔记 个人学习笔记 所以没有说明细节,有时间补充一下。如有错误欢迎指正批评:) 工厂模式 ES5前 var BookFactory = function(subType, superType) { if(typeof BookFactory[supe