美文网首页
ES6中的Class

ES6中的Class

作者: gtt21 | 来源:发表于2017-07-11 22:28 被阅读0次

    JS语法中起始是原生不怎么支持面向对象的,所有的面向对象起源均通过一个构造函数,这一点和JAVA等语言原生支持面向对象的语言有很大的不同。

    通常生成一个对象的传统方式就是通过构造函数,这也是JS唯一面向的对象唯一起点。

    function Point(x, y){
    this.x = x;
    this.y = y;
    }

    Point.prototype.toString = function(){
    return '(' + this.x + ', ' + this.y + ')';
    };

    var p = new Point(1,3);
    注意 这时ES5的原生写法, 在接下来的篇幅我们会详细接受ES6中 关键字CLASS的使用方法。

    在ES6中使用class和 es6其实再本质上没有任何的区别,都是通过构造函数来做文章,只不过class的使用更符合类似向我这种通过JAVA转过来的使用习惯。

    class Point{
    constructor(x, y){
    this.x = x;
    this.y = y;
    }

    toString(){
    return '(' + this.x + ', ' + this.y + ')';
    }
    }
    基本上来讲 class已经是构造函数的另外一种写法,有几点不同之处在于

    class中的函数 基本不用逗号来区别
    Constructor toString 等方法都不需要加上function 直接起一个函数名并 定义其中方法即可
    class Point{
    }

    typeof Point // function
    Point === Point.prototype.constructor // true
    在构造函数的prototype属性,在ES6的类上面继续存在,实际上所有定义再类的方法都是定义再类的prototype熟悉上面。

    调用类的实例上面的方法其实就是调用原型的方法。

    ES6与ES5不同之处在于 所有定义在class的方法都是不可枚举的,但是所有ES5 prototype上的方法都是可枚举的。

    1. 严格模式

    类和模块的内部,默认都是严格模式,所以不需要 use strict来指定运行模式。起始ES6已经慢慢的将整个语言提升为严格模式了

    1. 类的实例对象

    与ES5一样,实例的属性除非显示定义再其本身(this对象上),否则都是定义在原型上。

    class Point{
    constructor(x, y){
    this.x = x;
    this.y = y;
    }

    toString(){
    return '(' + this.x + ',' + this.y + ')';
    }
    }

    var point = new Point(2, 3);
    point.toString(); /// (2, 3);

    point.hasOwnProperty('x'); // true
    point.hasOwnProperty('y'); // true
    point.hasOwnProperty('toString'); // false 定义再Point的原型对象上
    point.proto.hasOwnProperty('toString'); // true 对象的原型对象 proto
    所有的类的实例共享一个原型对象 这意味可以通过实例的 proto 属性添加方法

    1. this的指向

    js最让人头疼的便是this的指向, 在类的方法内部如果含有this,它默认指向类的实例。但是,一旦单独来使用该方法,this很可能会改变

    class Logger{
    printName(name = 'there'){
    this.print(Hello ${name});// 1. 默认this指向的是Logger的实例
    }

    print(text){
    console.log(text);
    }
    }

    const logger = new Logger();
    const {printName} = logger();
    printName();// 2. 因为在调用函数 导致this 丢失了
    因为语言设计的缘故导致this会指向该方法运行的所在的环境,

    解决方案一般有两种:

    讲方法绑定 再构造方法中绑定this ,这样就不会找不到print方法
    第二种解决方法是使用箭头函数

    1. Class的getter setter方法

    通过使用类 可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为

    1. Class的静态方法

    类的静态方法只能通过类来调用
    父类的静态方法,可以被子类继承

    链接:http://www.jianshu.com/p/40e92342e81d
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    相关文章

      网友评论

          本文标题:ES6中的Class

          本文链接:https://www.haomeiwen.com/subject/fjhvhxtx.html