Class的使用,构造方法,实例属性和实例方法,静态属性和静态方法,this和super关键字,类的继承

Posted jiazhaolong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Class的使用,构造方法,实例属性和实例方法,静态属性和静态方法,this和super关键字,类的继承相关的知识,希望对你有一定的参考价值。

s6新增了一种定义对象实例的方法,Class(类)这个概念,作为对象的模板。class可以看作只是一个语法糖,通过class关键字,可以定义类。让对象原型的写法更加清晰、更像面向对象编程的语法。

 

 

一.  Class的基本用法

1.  constructor方法

 1 //定义类
 2 class Point {
 3   constructor(x, y) {
 4     this.x = x;
 5     this.y = y;
 6   }
 7  
 8   toString() {
 9     return ( + this.x + ,  + this.y + );
10   }

ES6的类,完全可以看作构造函数的另一个写法。类的数据类型就是函数,类本身就指向构造函数。使用时候,类必须使用new调用。

 1 class Point {
 2   // ...
 3 }
 4  
 5 typeof Point // "function"
 6 Point === Point.prototype.constructor // true   prototype对象的constructor属性,直接指向“类”的本身,这与 ES5 的行为是一致的。
 7  
 8 class Bar {
 9   doStuff() {
10     console.log(stuff);
11   }
12 }
13  
14 var b = new Bar();
15 b.doStuff() // "stuff"

 

类的所有方法都定义在类的prototype属性上面。在类的实例上面调用方法,其实就是调用原型prototype对象上的方法,所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

 

 1 class Point {
 2   constructor() {
 3   }
 4  
 5   toValue() {
 6   }
 7 }
 8  
 9 // 等同于
10  
11 Point.prototype = {
12   constructor() {},
13   toValue() {},
14 };
15  
16  
17 Object.assign(Point.prototype, {
18   toString(){},
19 })

2.class的静态属性和实例属性

2.1类的实例属性:类的实例属性可以用等式,写入类的定义之中。(Class 内部只有静态方法,没有静态属性)

1 class MyClass {
2   myProp = 42;
3  
4   constructor() {
5     console.log(this.myProp); // 42
6   }

为了可读性的目的,对于那些在constructor里面已经定义的实例属性,新写法允许直接列出。

1 class ReactCounter extends React.Component {
2   state = {
3     count: 0
4   };

2.2  类的静态属性:类的静态属性只要在上面的实例属性写法前面,加上static关键字就可以了。

1 class MyClass {
2   static myStaticProp = 42;
3  
4   constructor() {
5     console.log(MyClass.myStaticProp); // 42
6   }
7 }

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

 1 class Foo {
 2   static classMethod() {
 3     return hello;
 4   }
 5 }
 6  
 7 Foo.classMethod() // ‘hello‘
 8  
 9 var foo = new Foo();
10 foo.classMethod()// TypeError: foo.classMethod is not a function
11  
12  
13 //如果静态方法包含this关键字,这个this指的是类,而不是实例。静态方法可以与非静态方法重名。
14 class Foo {
15   static bar () {
16     this.baz();
17   }
18   static baz () {
19     console.log(hello);
20   }
21   baz () {
22     console.log(world);
23   }
24 }
25  
26 Foo.bar() // hello   静态方法bar调用了this.baz,这里的this指的是Foo类,而不是Foo的实例,等同于调用Foo.baz。

3.1实例方法

1 /* --- 实例方法 -- */
2 function ClassA() { //定义构造函数
3 };
4 ClassA.prototype.func = function() { //在构造函数的原型上添加方法
5   console.log("This is an instance method.");
6 }
7 var instance = new ClassA(); //新建一个实例
8 ClassA.func(); // Error:ClassA.func is not a function
9 instance.func(); //This is an instance method.

 上面代码结果报错如下。。。

技术图片

 

1 // 定义在某个具体对象(实例)上的方法是实例方法
2 function ClassA() { //定义构造函数
3 };
4 var instance = new ClassA(); //新建一个实例
5 instance.func = function() {
6     console.log("This is an instance method.")
7   }
8   // ClassA.func(); // Error:ClassA.func is not a function
9 instance.func(); //This is an instance method.

 

4 this和super关键字

4.1   `super`这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。

第一种情况,`super`作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次`super`函数。

4.2  

面向对象语言中 this 表示当前对象的一个引用。

但在 javascript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

  • 在方法中,this 表示该方法所属的对象。
  • 如果单独使用,this 表示全局对象。
  • 在函数中,this 表示全局对象。
  • 在函数中,在严格模式下,this 是未定义的(undefined)。
  • 在事件中,this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

5 .类的继承

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

class Point {
}

class ColorPoint extends Point {
}

  

以上是关于Class的使用,构造方法,实例属性和实例方法,静态属性和静态方法,this和super关键字,类的继承的主要内容,如果未能解决你的问题,请参考以下文章

Object

Javascript定义类(class)的三种方法

在es6的语法下 对象的构造和继承实例

python-- 类的实例化过程特征共有属性和私有属性

ES6 class -- Class 的方法

反射:获取Class 类的实例(四种方法)