• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

Class的使用

1.1 Class的使用

class的三大特性

封装:内部调用对于外部用户是透明的

继承:在分类里的属性,方法被自动继承

多态:调用这个函数,可以使多个类同时执行

使用class我们可以简单的在JavaScript编写面向对象的编程。


在class关键字之后,设置在括号中的变量和方法。

class { 

  设置变量和方法

  }

class Person {

        constructor(name) {

          this.name = name;

        }

        say() {

          console.log("你好," + this.name + "课程!");

        }

      }

      var x = new Person("德玛西亚");

      x.say();

      var y = new Person("诺克萨斯")

      y.say();

class Person {

  constructor(name) {

    this.name = name;

  }

  say() {

    console.log("你好," + this.name + "世界!");

  }

}

使用class关键字定义“Person”类。

在括号中,我们定义了一个名为“constructor”的方法和一个名为“say”的方法。

var x = new Person("德玛西亚");

x.say();

var y = new Person("诺克萨斯")

y.say();

创建实例需要使用“new”关键字。这样做,就会调用类的“constructor”方法。

通过在new类完成时指定不同的名称,分别通过say方法输出“玉女心经”和“独孤九剑”的字符串。

1.2 构造方法

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

class Point {

}

// 等同于

class Point {

  constructor() {}

}

1.3 静态属性

静态属性指的是 Class 本身的属性,即 Class.propName,而不是定义在实例对象(this)上的属性

class Foo {

}

Foo.prop = 1;

Foo.prop // 1

上面的写法为Foo类定义了一个静态属性prop。

目前,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。现在有一个提案提供了类的静态属性,写法是在实例属性的前面,加上static关键字。

class MyClass {

  static myStaticProp = 42;

  constructor() {

    console.log(MyClass.myStaticProp); // 42

  }

}

这个新写法大大方便了静态属性的表达

// 老写法

class Foo {

  // ...

}

Foo.prop = 1;


// 新写法

class Foo {

  static prop = 1;

}

上面代码中,老写法的静态属性定义在类的外部。整个类生成以后,再生成静态属性。这样让人很容易忽略这个静态属性,也不符合相关代码应该放在一起的代码组织原则。另外,新写法是显式声明(declarative),而不是赋值处理,语义更好。

1.4 静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

class Foo {

  static classMethod() {

    return 'hello';

  }

}

Foo.classMethod() // 'hello'

var foo = new Foo();

foo.classMethod()

// TypeError: foo.classMethod is not a function

上面代码中,Foo类的classMethod方法前有static关键字,表明该方法是一个静态方法,可以直接在Foo类上调用(Foo.classMethod()),而不是在Foo类的实例上调用。如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。

1.5 this和super关键字

this

访问属性:

访问本类中属性,如果本类中没有此属性,就从父类继承过来的属性中查找

调用方法:

访问本类中方法

调用构造器:

调用本类构造器,必须放在第一行

特殊用法:

表示当前对象,有时可以return this;

super

访问属性:

访问父类中的属性

调用方法:

直接访问父类中方法

调用构造器:

调用父类构造器,必须放在首行,如果不写的话,系统会默认调用父

类的无参构造器

特殊用法:

不能表示父类对象

1.6 类的继承

继承是一种新建类的方式,新建的类称为子类,被继承的类称为父类

继承的特性是:子类会遗传父类的属性

继承是类与类之间的关系

class Person{

    constructor(name){

        this.name = name;

    }

    showName(){

        return this.name;

    }

}

class SubPerson extends Person{

    constructor(name,job){

        super(name);    // 指向父类的构造函数

        this.job = job;

    }

    showJob(){

        return this.job;

    }

}

var p1 = new SubPerson('德玛西亚','诺克萨斯');

console.log(p1.name);  

// console.log(p1.showName());  

// console.log(p1.job); 

extends就代表这继承的意思,super就是指向父类的构造函数,指代了整个prototype对象或者_proto_指针指向的对象

1.7实例属性和实例方法

实例属性:

class Example{

 a = 2

 constructor(){

 console.log(this.a)

  }

}

class Example {

     constructor(){

          this.sum = (a, b) => 

          { console.log(a + b); 

        } 

    } 

}