JavaScript 类和对象_js 类和对象-优快云博客

本文链接：https://blog.youkuaiyun.com/xihuanLilia/article/details/123129784

本文介绍了JavaScript中的类和对象，包括面向对象的思维特点、类的创建、属性与方法的添加、类的继承以及使用类时应注意的点。通过示例详细讲解了constructor方法、super关键字的使用以及类的继承机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类和对象

前言
- 面向对象的思维特点
对象
class 类

前言

面向对象更贴近我们的实际生活
可以使用面向对象来描述现实世界事物但是事物可以分为具体的事物和抽象的事物
比如说手机和华为
手机就是抽象的泛指所有手机
华为就是具体的特指华为品牌的手机

面向对象的思维特点

抽取（抽象的）对象共用的属性和行为封装为一个类（模板）
对类进行实例化，获取类的对象

面向对象编程我们考虑的是有哪些对象按照面向对象的思维特点
不断创建对象
指挥对象做事情

对象

这里的对象指的是现实生活中的对象
在现实生活中所有东西都是对象
对象指的是一个具体的事物看得见也摸得着的实物
比如说一本书一个人等等
一个网页，一个数据库等等也是一个对象

在我们JavaScript中对象一组无序的相关属性和方法的集合
所有事物都是对象比如字符串数组函数等等
所以我们可以理解为
只要是对象就是由属性和方法组成的
属性：事物的特征
方法：事物的行为

class 类

在ES6中新增了类的概念可以用关键字 class 来声明一个类之后以这个类来实例化对象
简单的说
类的使用方法和构造函数类似但相比起来语法更加规范

创建类

语法如下
在这里插入图片描述

添加属性

我们的开发中
不太可能创造空对象一般对象都有属性
我们es6中用class创建对象也可以添加属性
利用constructor（）方法

constructor（）方法

constructor写在class里面
语法如下

class Star{
      constructor (uname,age){
      this.uname = uname;
      this.age = age;
      }

    }

我们实例化一个对象并打印出来看看结果如何

在这里插入图片描述

类里面添加方法

对象里面不只有属性还有方法
我们也可以类里面添加方法
这里我们要知道几个类的规范
1 类里面的函数不需要加function
2 类里面多个函数和方法之间不需要添加逗号
那我们按照规范来添加方法试试看

在这里插入图片描述

类的继承

在没有ES6的时代，想要实现继承是一个不小的工作。
一方面我们要创建父类的属性，另一方面我们需要继承父类的方法

但是在类中
我们可以用上extends
语法如下
class 继承属性的类 extends 被继承属性的类{}
因为这里是创造一个函数同时继承被继承函数的属性和方法
所以要记得加上{}

案例如下
在这里插入图片描述
发现方法还有属性都可以调用

super()

当super 作为函数调用时, 它代表的指向的是父类的构造函数,在子类的构造函数必须执行一次 super 函数
简单的说就是调用了一次父类的函数
我们看下面的代码

class Father {
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  sum(){
    console.log(this.x+this.y);
  }
}
class Son extends Father{
  constructor(x,y){
    this.x = x;
    this.y = y;
  }

}
let x =new Son(2,4);
x.sum();

我们让Son继承了Father的属性和方法
并且实例化了一个对象
如何我们试试方法的调用
在这里插入图片描述
这里报错是因为this的指向问题
虽然继承了方法但是在类Father的方法中 this指向的还是类Father
这时候我们就要用上super（）函数

这里的x和y代表子类的x和y
调用的时候把子类的x和y分别传递给父类的x和y

从而达到了我们想要的效果
在这里插入图片描述

调用普通函数

在我们开发中不是只有调用构造函数也要调用普通函数
这时候我们也可以用super（）来调用普通函数

语法 super.要调用的函数名（）

class Father{
         sayhi(){
           return '啊 困';
         };
       }
       class Son extends Father{
         sayhi(){
           console.log('睡觉了');
         }
       }
       let x =new Son();
       x.sayhi();