浅谈javascript面向对象和类

关注

原创最新推荐文章于 2025-10-23 23:43:58 发布 345 阅读 AI 写同款· GEO 优化 ›

JavaScript的面向对象，你真的懂了吗？是否一定需要使用”类“来编程？前言提到JavaScript，就不得不提那强大的原型链（prototype）。但是近些年的JSers，我想真正在使用原型进行编程的应该很少。为什么？因为JavaScript处处是对象，面向对象设计似乎能与它天然结合。各大流行库例如React，都包含着面向对象设计的思想。自从ES6 ‘class’ 语法糖的出现，以及Typescript的一些增强语法（例如public, private关键字），更是为我们蒙了一层面纱，今天就是要扒开这层面纱，和大家聊聊JavaScript的面向对象设计，以及另外一种可替代阅读详情

面向对象:

面向对象是为了帮助我们更好的进行编程,面向过程是分析解决问题的所需步骤然后用函数把这些步骤一步一步的实现,但是当问题的过程非常复杂的时候,面向过程就会非常麻烦所以我们要将过程分解为不同的对象进行处理,目的是为了让一个对象处理一种行为这样相同或者相似的行为就可以使用一个函数来处理。

面向对象的三大特性：

封装继承多态

封装：
- 将数据的操作细节隐藏起来，只暴露对外的接口，外界调用不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
继承：
- 子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
多态：
- 由继承而产生了相关不同的类，对同一方法可以有不同的响应，比如cat，dog都继承自animal 但是分别实现了自己的eat方法。此时针对某一实例，不需要知道是cat还是dog直接调用eat方法。

面向切面：

如图理解：
在这里插入图片描述

类

ES7中无需在constructor中定义属性，可以直接在类里面定义。

具有同种属性的对象称为类, 这是为了让我们更容易的管理程序, 因为类可以共享,就好像我们班级70人我们给他们每个人都指派好任务可能一晚上都讲不完,但是我们说今天晚上咱们班的男生做什么女生做什么又或者听懂了的做什么没听懂的做什么就能很简单的解决这个任务
之所以将类分成父类子类超类基类我认为也是为了方便我们的编程而已,核心并没有区别,不论是基类还是超类都是为了我们继承在接下来编写类似的内容方便修改

属性:属性又分成2类,静态属性和实例属性.

方法(属性):那么类有了我们就需要来告诉这个类你需要做什么,就是通过方法,方法是什么就是属性的组合,简单的说用属性来定义类的行为就叫做方法.在js中关注类的功能,弱化对象的类型.

静态方法和实例方法

用static定义的方法都是静态方法静态方法的特点:
虽然可以在静态方法中使用this，但是我们禁止在静态方法中使用this静态方法中不允许使用this，意味着不允许调用实例化对象
一切实例化方法和属性都不允许调用只能调用静态属性 static d=10; 属性相当于局部变量
本质上是类属性类方法

实例方法:
用new的方法创建,实例方法要通过先定义一个引用变量，指向构造函数定义的新对象。

这里有个constructor可能比较难理解吧?

js中基本上每一个函数都拥有一个prototype属性,这个属性的值是一个对象,这个对象包含唯一一个不可枚举的属性constructor,constructor属性的值是一个函数对象;

var o=new F();

o.constructor===F //true o的constructor就是F 我们就可以使用constructor来传递接收F中的参数

上面不重要,我们只要知道constructor可以帮助我们传参

class Arrays{//这个只是帮助理解
length=0;
data={};
a=0;
b=0;
static d=10;
constructor(_a=0,_b=0){ //constructor这个就是类名
this.a=_a;
his.b=_b;
}

最重要的是当我们写一个js文件,一个html文件,想让html里面实例化的也就是new的新对象的参数可以带入到我们js文件的类中,就用constructor

//js中的类
export default class Rain{
    y=1;
    speedY=4;
    elem;
    rect;
    static WIDTH=2;
    static HEIGHT=4;
    static list=[];
    constructor(_x){
        this.elem=this.createElem(_x);
        this.moveTo(this.y);
        Rain.list.push(this);
    }

//html中
let rain=new Rain(Math.random()*1400); 
这个参数就会带入到constructor的_x里面 在接收之后一般需要this.x=_x来进行获取

简单说下继承 : 继承字面意思继承父类方法

 class List extends Arrays{  
            // Arrays就是constructor
            constructor(_a,_b,_c){//传参  constructor就是类名
                super(_a,_b);//super超类的构造函数,
                // 如果子类中需要重新描述构造函数，则必须super()执行父类的构造函数
                这句话的解释就是如果我们要增加这个构造函数的功能,我们先super执行原来的
                再添加新的
                // 并且根据需求填入对应的参数
                this.c=_c;
            }
     在下面你还可以接着给list写方法和属性
     add push 等等
     
     //另外继承会被覆盖 也就是后写的会覆盖继承的

存储器

class  Animal {
	constructor() {
		this.name = name
	}
	get name() {
		return this.name
	}
	
	set name(val) {
		this.name = val
	}
}

let ani = new Animal("Dog")   //直接赋值
console.log(ani.name) // 调用getter
ani.name = "cat" // 调用setter