带你了解 JavaScript 中的对象

末蓝、 2024-05-06 21:24 87阅读 0赞

## 带你了解 JavaScript 中的对象 ##

### 基本概念 ###

对象指的就是一个具体的事物，在JavaScript中, 字符串, 数值, 数组, 函数都是对象

每个对象中包含若干的属性和方法

> 属性: 事物的特征  
> 方法: 事物的行为

### 1.使用字面量创建对象 ###

使用`{ }`创建对象

> 属性和方法使用键值对的形式来组织  
> 键值对之间使用 `,`分割，最后一个属性后面的`,`可以省略  
> 键和值之间使用`:` 分割，方法的值是一个匿名函数

示例代码

let a = {
        }
    let student = {
        
        name: "liaofeiyang",
        height: "170",
        weight: "60kg",
        sayHello:function() {
        
            console.log("hello")
        }
    }

**访问对象的属性**

> 1.使用 `.` 成员访问运算符来访问属性  
> 2.使用 `[ ]` 访问属性, 此时属性需要加上引号

console.log(student.name)
    console.log(student['height'])
    console.log(student['weight'])

**调用对象的方法**

student.sayHello()

### 2.使用new Object创建对象 ###

示例代码

let student = new Object()
    student.name = "fly"
    student.height = 180
    student['weight']= 75
    student.SayHello = function() {
        
        console.log("Say Hello")
    }
    
    console.log(student.name)
    console.log(student['height'])
    student.SayHello()

注：可以随时使用`student.name = "fly";` 这样的方式来新增属性

运行结果

![image-20240303205100473][]

### 3.使用构造函数创建对象 ###

**优势:** 使用构造函数可以快速批量的创建对象，而上述前面的2个创建对象的方式一次只能创建一个对象

**基本语法**

function 构造函数名(形参) {
        
        this.属性 = 值;
        this.方法 = function...
    }
        
    let fly = new 构造函数名(实参);

注意事项：

> 在构造函数内部使用 `this` 关键字来表示当前正在构建的对象  
> 构造函数的函数名首字母一般是大写的  
> 构造函数的函数名可以是名词  
> 创建对象的时候必须使用 `new` 关键字

示例代码

function People(name, height, weight) {
        
        this.name = name
        this.height = height
        this.weight = weight
        this.Say = function() {
        
            console.log(name + " say hello")
        }
    }
    let xiaoming = new People("小明", 172, 65)
    let zhangsan = new People("张三", 169, 74)
    console.log(xiaoming)
    xiaoming.Say()
    console.log(zhangsan)
    zhangsan.Say()

运行结果  
![image-20240303210914908][]

[image-20240303205100473]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/92143c718710476993266886d0042e39.png
[image-20240303210914908]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/4b9e963d38114ed2867861a2950a2041.png