JavaScript类和对象

路庆华的博客

已于 2024-06-23 18:32:38 修改

阅读量1.1k

点赞数 3

分类专栏： Web前端开发文章标签： javascript 开发语言类和对象

于 2022-07-30 23:08:11 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/lqh4188/article/details/126079088

版权

Web前端开发同时被 2 个专栏收录

98 篇文章 7 订阅

订阅专栏

Javascript

7 篇文章 0 订阅

订阅专栏

1、面向对象与面向过程

1.1 面向过程编辑POP(Process-oriented programming)

1.2 面向对象编程OOP(Object Oriented Programming)

1、面向对象与面向过程

1.1 面向过程编辑POP(Process-oriented programming)

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。面向过程，就是按照我们分析好的步骤，按照步骤解决问题。

1.2 面向对象编程OOP(Object Oriented Programming)

面向对象是把事务分解成一个个对象，然后由对象之间分工与合作。是以对象功能来划分问题，而不是步骤。

面向对象编辑具有灵活、代码可复用、容易维护和开发的优点。

面向对象的三大特征：封装性、继承性、多态性。

优点：易维护、易复用，易扩展，可以设计出低耦合的系统，使系统更灵活、更加易于维护。

缺点：性能比面向过程低。

2、类和对象

2.1 对象

万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如：一本书、一个人可以是对象，一个数据库、一个远程服务器的连接也可以是对象。

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，使用数据、数组、函数等。

对象是由属性和方法组件的：

属性：事物的特征，在对象中用属性来表示(常用名词)
方法：事物的行为，在对象中用方法来表示(常用动词)

2.2 类 class

在ES6中增加了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。

类抽象了对的公共部分，它泛指某一大类(class)

对象特指某一个，通过类实例化一个具体的对象

2.3 创建类

创建实例：类必须使用new 实例化对象

const obj=new name()

new在执行时会做四件事性：

在内存中创建一个新的空对象
让this指向这个新的对象
执行构造函数里的代码，给这个新对象添加属性和方法
返回这个新对象(所以构造函数里面不需要return)

2.4 构造函数 constructor

constructor()方法是类的构造函数(默认方法)，用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有显示定义，类内部会自动给我们创建一个constructor().

1 通过class关键字创建类，首字母大写

2 constructor函数，可以接受传递过来的参数，同时返回实例对象

3 constructor只要new 生成实例时，就会自动调用这个函数，如果不写，类也会自动生成这个函数

4 生成实例,new 不能省略

5 创建类，类名后不加小括号，生成实例类名后面要加小括号，构建函数不需要function

3、类的继承

3.1 super关键字

super 用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

const Person = {
  name: '名字',
  age: 18,
  funStr() {
    console.log(`姓名：${this.name},年龄：${this.age}`);
  },
};
const Son = {
  __proto__: Person,
  //重写覆盖父类方法
  funStr() {
    console.log(`重写姓名：${this.name},年龄：${this.age + 1}`);
  },
};
Son.name = '刘德华';
Son.funStr();// 重写姓名：刘德华,年龄：19

上面的代码可以用class重构

    class Person {
        // 构造函数，
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
        // 普通函数
        funStr() {
          console.log(`姓名：${this.name},年龄：${this.age}`);
        }
      }
      class Son extends Person {
        constructor(name, age) {
          super(name, age);
        }
      }
      var son = new Son('刘天王', 22);
      son.funStr();

1. 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的

2. 继承中，如果子类里没有，就去找父类有没有这个方法，就执行父类的这个方法

3. 可以通过super直接调用父类的方法

3.2 类的继承extends

子类在构造函数中使用super,必须放到this前面（必须先调用父类的构造方法）

class Person {
  constructor(name, age) {
    this.name = name;
  }
}
class Student extends Person {
  // 子类继承父类
  constructor(name, other) {
    super(name); // 调用父类的constructor
    this.other = other; // 定义子类的属性
  }
}