JavaScript之类和对象相关知识

JS中的类和对象

一、JS中的类
二、JS创建自定义对象

一、JS中的类

1、类的声明

function 类名(形参1,形参2....){
    this.属性名1 = 形参1;
    this.属性名2 = 形参2;
    .....
    this.属性名 = 函数
}
1
2
3
4
5
6

2、类的使用

var 对象名 = new 类名(实参1，实参2.....);
1

注意：js中类的内容只是对象的公共部分，每个对象还可以自定义的进行扩充。

3、类的继承（prototype关键字）

通过prototype关键字实现了不同对象之间的数据共享
作用1：实现某个类的所有子对象的方法区对象的共享，节省内存
作用2：类似链式继承

4、样例

DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之类和对象学习title>
    <script>
        //1、类的声明--person
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        function User(uname,pwd){
            this.uname = uname;
            this.pwd = pwd;
        }
        //使用prototype
        Person.prototype.test = function(){
            alert("嘿嘿")
        };
        Person.prototype.user=new User();
        User.prototype.testUser = function(){
            alert("我是user")
        };
        //2、使用类
        var p1 = new Person("张三", 18);
        alert(p1.name);
        var p2 = new Person("李四", 20);
        alert(p2.name);
        alert(p1.test===p2.test);
        p1.user.testUser();
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

二、JS创建自定义对象

1、作用

用来存储整体数据，不会在自定义对象中存储函数对象。同时js中的对象属性和内容是可以自定义的扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了节省代码的冗余的。

2、原因

很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时的创建一个对象来自定义属性存储数据，来保证数据的完整性。

3、创建自定义对象

var 对象名 = new Object();
    对象名.属性1 = 属性1;
    对象名.属性2 = 属性2;
    对象名.属性3 = 属性3;
   ....
                    
var 对象名 = {};
   对象名.属性1 = 属性1;
   对象名.属性2 = 属性2;
   对象名.属性3 = 属性3;
  ....
1
2
3
4
5
6
7
8
9
10
11

4、样例

DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>JavaScript之自定义对象title>
    <script>
    //1、创建自定义对象
        var obj = new Object();
        obj.name = "张三";
        obj.age = 23;
        obj.test = function(){
            alert("我是obj");
        }
     
    script>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

相关阅读:
三年半经验，成功拿下字节阿里网易offer
happens-before规则——理解happens-before规则
Android Studio中BitmapDrawable的使用2-2
力扣2578. 最小和分割
【算法系列】实战篇：Diffie-Hellman算法实现通信秘钥流程
单元测试实战（五）普通类的测试
LIO-SAM算法解析
【DL with Pytorch】第 1 章：深度学习与PyTorch简介
SpringBootCMS漏洞复现分析
AI提示工程实战：从零开始利用提示工程学习应用大语言模型【文末送书-19】

原文地址：https://blog.csdn.net/qq_46106857/article/details/126243896