ES6之class

class基本语法:

1.实质:

​ class只是一个语法糖，类的所有方法都定义在类的prototype属性上，本质是通过ES5的原型链继承实现的。

注意:

​ prototype对象的constructor属性直接指向'类'本身，这与ES5的行为是一致的：

 Point.prototype.constructor = Point;

使用:

  class Point{

        constructor(){ //... }

        toValue(){  //... }

    }

    //等同于

    Point.prototype = {

        constructor(){},

        toValue(){},

    };

constructor方法：

是类的默认方法，通过new命令生成对象实例时自动调用该方法，没有显式定义时会默认添加一个空的无参构造方法。 构造方法默认返回实例对象，不过可以指定返回另外一个对象。 类必须使用new来调用。

2.实例属性:

实例的属性除非显式定义在其本身(this对象)，否则都是定义在原型上。 所有的实例共享一个原型对象，proto属性都是相等的，因此可以通过实例的proto属性为“类”添加方法(不建议使用)。在生产环境中，一般通过Object.getPrototypeOf方法来获取实例对象的原型，再为原型添加方法/属性。

Class表达式：

 const MyClass = class Me{ //... };

类的名字是MyClass而不是Me，Me只能在Class内部使用，用来指代当前类，因此可以省略Me。 采用Class表达式，可以写出立即执行的Class

注意:

  1. 严格模式: 类和模块的内部默认使用严格模式，所以不需要显示声明。

  2. 不存在变量提升

  3. name属性: 本质上，ES6的类只是ES5的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。 name属性总是返回紧跟在Class关键字后的类名。

  4. Generator 方法:在某个方法之前加上星号，就表示该方法是一个Generator函数

  5. this的指向: 类的方法内部如果含有this，默认指向类的实例，但是一旦单独使用该方法，很有可能会报错。

    解决方法：

    • 在构造方法中绑定this：this.printName = this.printName.bind(this);

    • 使用箭头函数：

       this.printName = (name = 'there') => {this.print(`hello ${name}`);  }
    • 使用Proxy，在获取方法的时候自动绑定this

3.静态方法:

类相当于实例的原型，所有在类中定义的方法都会被实例继承，在方法前加上staic关键字，表示 该方法不会被实例继承，而是直接通过类调用，被称为静态方法。

父类的静态方法可以被子类继承。

4.class的静态属性和实例属性:

ES6中明确规定，Class内部只有静态方法没有静态属性。 只能写成：

  class Foo{//...};     Foo.prop = 1;

目前有一个新提案，其中对静态属性和实例属性都规定了新的写法：

静态属性：

只要在上边的实例属性写法前加上static关键字即可。

实例属性：

以前定义实例属性时只能写在构造函数里。，现在可以用等式写进类的定义中：myProp = 42; 为了获得更强的可读性，对于已经在构造函数中定义的实例属性，新写法允许将其直接列出。

5.私有方法和私有属性:

私有方法:

ES6未提供，通过变通方法来模拟实现：

  • .将私有方法移除模块，因为模块内部的所有方法都是对外可见的。

  • .利用Symbol值得唯一性将私有方法得名字命名为一个Symbol值。

私有属性:

ES6不支持私有属性，目前有一个提案是在私有属性名前加上#来表示，也可以用来编写私有方法。

6.new.target属性:

new是从构造函数生成实例的命令。ES6为new命令引入了new.target属 性 在构造函数里)，返回new命令所作用的构造函 数，如果构造函数不是通过new命令调用的，new.target会返回undefined，因此这个属性可以用于确定构造 函数是怎么调用的。

子类继承父类时，new.target会返回子类，利用这个特点可以写出不能独立使用必须继承后才能使用的类：

if(new.target === super){     throw new Error('本类不能实例化');}

class的继承:

1.简介:

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

class Point {
}

class ColorPoint extends Point {
}

2.Object.getPrototypeOf()方法:

可以用来从子类上获取父类。

Object.getPrototypeOf(ColorPoint) === Point
// true

因此，可以使用这个方法判断，一个类是否继承了另一个类。

3.super:

子类必须在constructor方法里调用super方法，否则不能新建实例。这是因为子类没有属于自己的this对象，而是继承了父类的this对象而对其进行加工。显然，只有调用了super方法之后，才可以使用this。

而super本身指代的是父类的实例对象，我们可以使用super.的方式调用父对象的方法。此外，由于对象总是继承于其它对象，所以可以在ES6的任何一个对象中使用super关键字。

e.g.:

let obj = {arr : [1,2,3],   
toString(){
console.log('super:'+super.toString.apply(this.arr));  
  } 
}; 
obj.toString()

这里的super显然指向的是Object实例对象。

4.prototype 属性和 proto属性:

大多数浏览器的ES5实现之中，每一个对象都有proto属性，指向对应的构造函数的prototype属性。

子类实例的proto属性的proto属性，指向父类实例的proto属性。也就是说，子类的原型的原型，是父类的原型。

Class作为构造函数的语法糖，同时有 prototype属性和proto属性，因此同时存在两条继承链。

  • 子类的proto属性，表示构造函数的继承，总是指向父类。
  • 子类prototype属性的proto属性，表示方法的继承，总是指向父类的prototype属性。

这些特点和ES5的寄生组合式继承完全一致，所以类的继承可以看做是寄生组合式继承的语法糖

5.原生构造函数的继承:

原生构造函数是指语言内置的构造函数，通常用来生成数据结构。

Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()

class定义:

class Person{
  //构造函数，参数可以带默认值
  constructor(name,address='wang'){
                this.name = name;
                this.address = address;
            }
}
const person = new Person('hj')

继承extends:

class Person{
        constructor(name,address='mu ke wang '){
                this.name = name;
                this.address = address;
            }
        }

class Child extends Person{
         constructor(name,address='mu ke wang 2'){
                super(name, address);
            }
        }
const child = new Child('jj');
console.log(child)

方法:

 class Person{
            constructor(name,address='mu ke wang '){
                this.name = name;
                this.address = address;
            }
            //定义一个原型方法方法获取属性
            get getName(){
                return this.name;
            }
         //定义一个原型方法方法设置属性
            set setName(value){
                this.name = value;
            }
          //方法
            toString() {
                return '(' + this.name + ', ' + this.address + ')';
            }
        }
        const person = new Person('hj');
        console.log(person.getName)
        person.setName='hjj'
        console.log(person.getName)

6.Mixin模式的实现:

Mixin就是把多个类合并成一个类使用，实现起来就是把多个类的property合并起来，只要这个property不是构造函数（constructor），不是原型（prototype），不是类名（name），就合并起来用，但是这里有个问题，不同类之间的方法不能重名，否则会覆盖，所以不是很完美吧感觉。
这个东西合并多个底层模块的使用，先分，再和，这样写底层模块的时候，是区分各个模块去写的，使用的时候，又不用知道那么多模块，搞一个东西按需组装就好了，用起来，不用查到底是哪个底层模块的。
感觉比较优美，既区分了各个模块，好管理，又因为使用起来不用管到底是哪个模块的，透明化，而降低了模块的使用门槛。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,470评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,393评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,577评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,176评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,189评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,155评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,041评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,903评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,319评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,417评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,013评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2赞 353