前言❤️❤️hello hello这里是洋不写bug~欢迎大家点赞关注收藏这篇博客学习JS中类和对象部分这些部分整体上跟Java部分还是有点差别的语法相对来说还是比较宽松的学习起来也不算难个人主页洋不写bug的博客所属专栏前端基础铁汁们对于前端的各种常用核心语法都可以在上面的前端专栏学习专栏正在持续更新中有问题可以写在评论区或者私信我哦~1对象的创建在Java中可以创建一个对象在里面写一些属性和方法然后通过对象.来调用那这些在JS中也是可以实现的只是语法跟Java有些差异下面是三种在JS中创建对象的方法。1字面值创建对象创建一个学生对象里面我们用字符串的形式写这个学生的信息也可以在里面写上方法可以用与Java类似的方式对象.属性去调用对象中的这些属性和方法如下所示scriptletstudent{name:carrie,height:178cm,weight:53kg,sayHello:function(){console.log(hello world);}}console.log(student.name);console.log(student.height);console.log(student[weight]);student.sayHello();/scriptJS还新增了一种方法就是用方括号里面加上字符串类型的属性名去调用属性。console.log(student[weight]);2new Object() 或大括号创建对象这种方法的特点就是上来先去创建一个空对象然后通过给属性赋值的这种写法去新增属性scriptletcarnewObject();car.name问界M7;car.price309800;car.typeSUV;car.Sayfunction(){console.log(遥遥领先);}console.log(car.name);car.Say();console.log(car.price);/script直接用一个空的大括号去创建对象效果跟new Object() 完全相同都是创建了一个空对象。let car {};3通过构造函数来创建对象前两种方法有一个缺陷就是当只创建一个对象时那代码量确实比Java少但是如果创建很多属性类型都相同的话比如创建很多学生对象那用前两种方法就要一个对象从头到尾写份代码那代码就很长了能不能学Java中使用类中的构造函数来创建对象呢但是在JS 6之前JS中是没有类的概念的那早期版本我们能用构造函数去创建对象吗当然可以因为JS中的对象是脱离类而存在的因此我们就可以直接写个构造函数用于创建对象。scriptfunctionStudent(name,height,length){this.namename;this.heightheight;this.lengthlength;this.sayfunction(){console.log(hello friend);}}letmarknewStudent(mark,180,75);console.log(mark.height);mark.say();letcarrienewStudent(carrie,170,60);console.log(carrie.height);carrie.say();/script注这里我们调用构造函数的时候一定要在函数前面加个new因为这不是普通函数而是构造函数4通过类中构造方法来创建在JS 6之前是没有引入class关键字但是现在已经是JS 16了早就引入了这个关键字因此使用类中的构造方法去创建对象具体的操作步骤和Java中相差不大。scriptclassPeople{constructor(name,height,weight){this.namename;this.heightheight;this.weightweight;}Say(){console.log(name说hello);}}letcarrienewPeople(carrie,175,70);console.log(carrie);carrie.Say();/script这里也可以在工作台上显示出这个对象属于哪个类以及这个对象的所有信息在类中写方法时无需写function就是直接方法名就行构造方法 constructor里面的字母注意不要打错打错就不会识别它是构造方法就会报错2类1static在JS中同样也可以在类中去使用static关键字规则跟Java中也差不多在Java中用static关键字定义的属性就是类属性定义的方法是类方法它们属于类而不属于对象要调用这些属性或者方法时必须用类名去调用而对象是调用不了的。大家如果对static感兴趣的话也可以看博主之前写的这篇博客戳我看static那我们同样测试一下这里用对象去调用id会发现这个属性是undefined没有定义这里就可以确定对象是调用不了类属性的。而把对象名改为类名People这里就可以访问属性了铁汁们可以试一下。scriptclassPeople{constructor(name,height,weight){this.namename;this.heightheight;this.weightweight;}Say(){console.log(name说hello);}staticid1242;}letcarrienewPeople(carrie,175,70);console.log(carrie.id);/script方法也是类似要用类名去调用如下所示scriptclassPeople{constructor(name,height,weight){this.namename;this.heightheight;this.weightweight;}staticSay(){console.log(说hello);}}letcarrienewPeople(carrie,175,70);carrie.Say();/script这里用对象去调用方法就会直接报错改成用类名去访问再试下就正常运行了2继承这里Student类继承了People类属性同时还添加了特有的id属性其实写法跟Java也基本上一摸一样构造方法中用super调用父类中的构造方法。另外Student也进行了Say方法的重写。scriptclassPeople{constructor(name,height,weight){this.namename;this.heightheight;this.weightweight;}Say(){console.log(说hello);}}classStudentextendsPeople{constructor(name,height,weight,id){super(name,height,weight);this.idid;}Say(){console.log(祝你上岸);}}lethellynewStudent(helly,175,75,9);console.log(helly);helly.Say();/script在网页控制台中在打印对象helly时下面有个Prototype这个可以理解为就是Student类继承的类 
长河君 · 2026/10/27 9:33:22 · 阅读 1.2k JavaScript（三）JS中对象和类的详细解析
前言❤️❤️hello hello这里是洋不写bug~欢迎大家点赞关注收藏这篇博客学习JS中类和对象部分这些部分整体上跟Java部分还是有点差别的语法相对来说还是比较宽松的学习起来也不算难个人主页洋不写bug的博客所属专栏前端基础铁汁们对于前端的各种常用核心语法都可以在上面的前端专栏学习专栏正在持续更新中有问题可以写在评论区或者私信我哦~1对象的创建在Java中可以创建一个对象在里面写一些属性和方法然后通过对象.来调用那这些在JS中也是可以实现的只是语法跟Java有些差异下面是三种在JS中创建对象的方法。1字面值创建对象创建一个学生对象里面我们用字符串的形式写这个学生的信息也可以在里面写上方法可以用与Java类似的方式对象.属性去调用对象中的这些属性和方法如下所示scriptletstudent{name:carrie,height:178cm,weight:53kg,sayHello:function(){console.log(hello world);}}console.log(student.name);console.log(student.height);console.log(student[weight]);student.sayHello();/scriptJS还新增了一种方法就是用方括号里面加上字符串类型的属性名去调用属性。console.log(student[weight]);2new Object() 或大括号创建对象这种方法的特点就是上来先去创建一个空对象然后通过给属性赋值的这种写法去新增属性scriptletcarnewObject();car.name问界M7;car.price309800;car.typeSUV;car.Sayfunction(){console.log(遥遥领先);}console.log(car.name);car.Say();console.log(car.price);/script直接用一个空的大括号去创建对象效果跟new Object() 完全相同都是创建了一个空对象。let car {};3通过构造函数来创建对象前两种方法有一个缺陷就是当只创建一个对象时那代码量确实比Java少但是如果创建很多属性类型都相同的话比如创建很多学生对象那用前两种方法就要一个对象从头到尾写份代码那代码就很长了能不能学Java中使用类中的构造函数来创建对象呢但是在JS 6之前JS中是没有类的概念的那早期版本我们能用构造函数去创建对象吗当然可以因为JS中的对象是脱离类而存在的因此我们就可以直接写个构造函数用于创建对象。scriptfunctionStudent(name,height,length){this.namename;this.heightheight;this.lengthlength;this.sayfunction(){console.log(hello friend);}}letmarknewStudent(mark,180,75);console.log(mark.height);mark.say();letcarrienewStudent(carrie,170,60);console.log(carrie.height);carrie.say();/script注这里我们调用构造函数的时候一定要在函数前面加个new因为这不是普通函数而是构造函数4通过类中构造方法来创建在JS 6之前是没有引入class关键字但是现在已经是JS 16了早就引入了这个关键字因此使用类中的构造方法去创建对象具体的操作步骤和Java中相差不大。scriptclassPeople{constructor(name,height,weight){this.namename;this.heightheight;this.weightweight;}Say(){console.log(name说hello);}}letcarrienewPeople(carrie,175,70);console.log(carrie);carrie.Say();/script这里也可以在工作台上显示出这个对象属于哪个类以及这个对象的所有信息在类中写方法时无需写function就是直接方法名就行构造方法 constructor里面的字母注意不要打错打错就不会识别它是构造方法就会报错2类1static在JS中同样也可以在类中去使用static关键字规则跟Java中也差不多在Java中用static关键字定义的属性就是类属性定义的方法是类方法它们属于类而不属于对象要调用这些属性或者方法时必须用类名去调用而对象是调用不了的。大家如果对static感兴趣的话也可以看博主之前写的这篇博客戳我看static那我们同样测试一下这里用对象去调用id会发现这个属性是undefined没有定义这里就可以确定对象是调用不了类属性的。而把对象名改为类名People这里就可以访问属性了铁汁们可以试一下。scriptclassPeople{constructor(name,height,weight){this.namename;this.heightheight;this.weightweight;}Say(){console.log(name说hello);}staticid1242;}letcarrienewPeople(carrie,175,70);console.log(carrie.id);/script方法也是类似要用类名去调用如下所示scriptclassPeople{constructor(name,height,weight){this.namename;this.heightheight;this.weightweight;}staticSay(){console.log(说hello);}}letcarrienewPeople(carrie,175,70);carrie.Say();/script这里用对象去调用方法就会直接报错改成用类名去访问再试下就正常运行了2继承这里Student类继承了People类属性同时还添加了特有的id属性其实写法跟Java也基本上一摸一样构造方法中用super调用父类中的构造方法。另外Student也进行了Say方法的重写。scriptclassPeople{constructor(name,height,weight){this.namename;this.heightheight;this.weightweight;}Say(){console.log(说hello);}}classStudentextendsPeople{constructor(name,height,weight,id){super(name,height,weight);this.idid;}Say(){console.log(祝你上岸);}}lethellynewStudent(helly,175,75,9);console.log(helly);helly.Say();/script在网页控制台中在打印对象helly时下面有个Prototype这个可以理解为就是Student类继承的类