ES6原生Class

Posted bruce-gou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6原生Class相关的知识,希望对你有一定的参考价值。

es5 之前定义构造函数的方法

// 先定义一个函数,强行叫它构造函数,大写的P也不是必须的,只是约定俗成
function Point(x, y) {
  this.x = x; // 构造函数的属性都定义在函数内部
  this.y = y; // this指向实例对象
}

// 构造函数的方法都定义在构造函数的原型上
Point.prototype.toString = function () {
  return ( + this.x + ,  + this.y + );
};

// new 一个对象,就OK了
var p = new Point(1, 2);

es6 定义类常见方法

//定义类
class Point {
  constructor(x, y) { // 定义构造方法
    this.x = x; // this指向实例对象
    this.y = y;
  }
  toString() { // 定义一个方法,注意这里没有function关键字
    return ( + this.x + ,  + this.y + ); // this指向实例对象
  }
}
var test = new Point(2,3);//实例化
console.log(test.toString());//(2, 3)

 

   基本上,ES6的class可以看做知识一个语法糖,它的绝大部分功能,ES5都可以看到,新的class写法只是让对象原型的写法更加清晰,更像面向对象编程语法而已

   定义了一个Point类,他里面有个constructor方法,这就是构造方法;而this关键字则代表实例对象,也就是说,ES5的构造函数Point,对应ES6的Point类的构造方法; 

 Point类除了构造方法,还定义了一个toString方法,定义类的方法的时候,前面不需要加function这个关键字,直接将函数定义放进去就行了 ,另外,方法之间不需要逗号分隔;

构造函数的prototype属性,在ES6的类上继续存在,实际上,类的所有方法都定义在类的prototype属性上面;

constructor方法
constructor方法是类的默认方法,通过new生产对象实例时,自动调用该方法,一个类必须有constructor方法,如果没有定义,则默认添加空的constructor方法
class Point{
}
//等同于
class Point {
     constructor () { }
}
constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象
class Person {
     constructor  () {
         return {};
     }
}

类就是function 的另一种写法,本身还是function

class Point {
        }
console.log(typeof Point);// "function" 类的数据类型就是函数
console.log(Point === Point.prototype.constructor);// true 类本身就指向构造函数

this指向

class Logger {
    printName(name = there) {
        this.print(`Hello ${name}`);
    }
    print(text) {
        console.log(text);
    }
}
const logger = new Logger();
const printName = logger.printName;
logger.printName(); 这样不会报错
printName();//报错
printName方法中的this,默认指向Logger类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境,因为找不到print方法而导致报错。

class 的静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
class Point{
     static classMethod(){
         return hello;
     }
}
Point.classMethod();//hello
如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。注意,如果静态方法包含this关键字,这个this指的是类,而不是实例。
class Point{
    static classMethod(){
        return this.getName();
    }
    static getName(){
        return zs;
    }
    getName(){
        return ls;
    }
}
console.log(Point.classMethod());//zs

class 的静态属性和实例属性

静态属性指的是 Class 本身的属性,即Class.propName,而不是定义在实例对象(this)上的属性。
class Foo {
}
Foo.prop = 1;
Foo.prop // 1
//Foo类定义了一个静态属性prop,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。
类的实例属性-->类的实例属性可以用等式,写入类的定义之中
class Point{
    num = 30;
    constructor(){
        console.log(this.num);//30
    }
}
//num就是Point的实例属性。在Point的实例上,可以读取这个属性。
var test = new Point();
console.log(test.num);//30

class的继承

父类的静态方法,可以被子类继承。
class parent{
    static getName(){
        return parent;
    }
}
class child extends parent{
}
console.log(child.getName());//parent

(1)子类没constructor时

子类American继承父类Person,子类没用定义constrcutor,则默认添加一个,并且在constrcutor中调用super函数,相当于调用父类的构造函数。调用super函数是为了在子类中获得父类的this,调用之后this指向子类。

class parent{
    foo(){
        return foo;
    }
}
class child extends parent{
    get(){
        return this.foo()
    }
}
var test = new child();
console.log(test.foo());//foo
console.log(test.get());//foo

(2)子类有constructor

子类必须在constructor方法中调用super方法,否则new实例时会报错。因为子类没有自己的this对象,而是继承父类的this对象。
如果不调用super函数,子类就得不到this对象。super()作为父类的构造函数,只能出现在子类的constructor()中,但是super指向父类的原型对象,可以调用父类的属性和方法。
class parent{
    foo(){
        return foo;
    }
}
class child extends parent{
    constructor(){
        super()
    }
    get(){
        return this.foo()
    }
}
var test = new child();
console.log(test.foo());//foo
console.log(test.get());//foo

 





 









以上是关于ES6原生Class的主要内容,如果未能解决你的问题,请参考以下文章

纯原生JS使用ES6语法实现飞机大战

es6之class

纯原生JS用面向对象class方法实现简易扫雷小游戏

ES6(简介及常用)-上

PIXI.JS 基于parcel 打包es6 class语法 做了个流星雨

es6 类