首页 > 其他分享> 文章详细

JS：类-Class

2022-07-13 00:00:35 阅读：138 来源： 互联网

标签：console log People 子类 Class constructor JS class

class类

类是用于创建对象的模板。

我们使用 class 关键字来创建一个类，类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。

每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。

（1）概述

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。
类不可重复声明
类定义不会被提升，这意味着必须在访问前对类进行定义，否则就会报错

（2）类定义

// 命名类（声明类）
class Example {
   constructor(a) {
       this.a = a;
  }
}

// 匿名类
let Example = class {
   constructor(a) {
       this.a = a;
  }
}

（3）类的主体

ES5 中定义一个类

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

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

var p = new Point(1, 2);

 
ES6以后的语法（可以看做是ES5的语法糖）

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

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

（作者：施主画个猿
链接：https://www.jianshu.com/p/edf4d665d0df）

属性：ES6的类中不能直接定义变量，变量被定义在constructor中。

class People {
//a = 10; //SyntaxError: Unexpected token =
constructor() {
this.a = 100; //定义变量
}
}
let p = new People();
console.log(p.a);

方法
- constructor 方法是类的默认方法，创建类的对象时被调用。也被称为类的构造方法（构造函数、构造器）。一个类中有且仅有一个构造方法。
```
class People {
    constructor() {
        console.log("我是构造方法，使用new创建对象时调用");
    }
} 
new People(); //将执行constructor方法
```
- 原型方法：不需要使用function关键字，通过“对象.原型方法”调用。
```
class People {
    say(world) {
        console.log(`say ${world}`);
    }
    add(a, b) {
        console.log(a + b);
    }
}
let p = new People();
p.say("hello"); //say hello
p.add(1, 2); //3
```
- 静态方法：使用static修饰，调用时不需要创建对象，直接通过“类名.静态方法”调用
- 静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，但不属于对象，在实例化对象之前可以通过类名.方法名调用静态方法。静态方法不能在对象上调用，只能在类中调用。
```
class People {
    static sum(a, b) {
        console.log(a + b);
    }
}
People.sum(1, 2);
```

（4）类的继承

解决代码的复用
使用extends关键字实现继承
子类可以继承父类中所有的方法和属性
子类只能继承一个父类（单继承），一个父类可以有多个子类
子类的构造方法中必须有super()来指定调用父类的构造方法，并且位于子类构造方法中的第一行
子类中如果有与父类相同的方法和属性，将会优先使用子类的（覆盖）

class People {
   //父类构造方法
constructor() {
       this.a = 100; //父类中定义的变量
console.log("People constructor");
}
   //原型方法
eat() {
console.log("eat...")
}
   //静态方法
   static play() {
console.log("play...")
}
}

class Student extends People {
   //子类构造方法
constructor() {
super(); //调用父类构造器，必须存在，且位于子类构造器第一行的位置
       this.b = 200; //子类定义的变量
console.log("Student constructor");
}
study() {
console.log("study...");
}
}

let stu = new Student();
console.log(stu.a， stu.b);
stu.eat();
stu.study();
Student.play();

内部类：属于外部类的成员，必须通过“外部类.内部类”访问

// 外部类
class Outer {
constructor() {
        console.log("outer");
  }
}
// 内部类
Outer.Inner = class {
   constructor() {
        console.log("Inner");
  }
}    
new Outer.Inner();

标签：console,log,People,子类,Class,constructor,JS,class
来源： https://www.cnblogs.com/LIXI-/p/16472291.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS：类-Class

class类

（1）概述

在ES6中，class (类)作为对象的模板被引入，可以**通过 class 关键字定义类**。

（2）类定义

（3）类的主体

ES6以后的语法（可以看做是ES5的语法糖）

（4）类的继承

ICode9

JS：类-Class

class类

（1）概述

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

（2）类定义

（3）类的主体

ES6以后的语法（可以看做是ES5的语法糖）

（4）类的继承

在ES6中，class (类)作为对象的模板被引入，可以**通过 class 关键字定义类**。