
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript对象</title>
</head>
<body>
  <script>
    // 声明字符串类型变量
    let str = 'hello world!'
    
    // 声明数值类型变量
    let num = 199
    // 声明对象类型变量，使用一对花括号
    // user 便是一个对象了，目前它是一个空对象
    let user = {}
  </script>
</body>
</html>

✨属性和访问

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 ',' 分隔
属性就是依附在对象上的变量
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象</title>
</head>
<body>
  <script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象，它包含了一个属性 name
    // 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔
    let person = {
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    }
  </script>
</body>
</html>

可以通过点符号或方括号访问对象的属性。点符号是最常见的访问属性的方式，但如果属性名包含特殊字符或者是变量，就需要使用方括号。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象</title>
</head>
<body>
  <script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象，它包含了一个属性 name
    // 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔
    let person = {
      name: 'w', // 人的姓名
      age: 18, // 人的年龄
      stature: 185, // 人的身高
      gender: '男', // 人的性别
    };
    
    // 访问人的名字
    console.log(person.name) // w
    // 访问人性别
    console.log(person.gender) //  男
    // 访问人的身高
    console.log(person['stature']) //  185
   // 或者
    console.log(person.stature) //  185
  </script>
</body>
</html>

扩展：也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象</title>
</head>
<body>
  <script>
    // 声明一个空的对象（没有任何属性）
    let user = {}
    // 动态追加属性
    user.name = 'w'
    user['age'] = 8
    
    // 动态添加与直接定义是一样的，只是语法上更灵活
  </script>
</body>
</html>

修改和添加属性


// 修改属性
person.age = 35;
 
// 添加新属性
person.gender = "female";
 
console.log(person); // 输出: {name: "Alice", age: 35, gender: "female"}

删除属性

使用 delete 关键字可以从对象中删除属性。


delete person.age;
console.log(person); // 输出: {name: "Alice", gender: "female"}

✨方法和调用

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript  对象方法</title>
</head>
<body>
  <script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
      singing: function () {
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
  </script>
</body>
</html>

声明对象，并添加了若干方法后，可以使用 . 或 [] 调用对象中函数，称之为方法调用。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象方法</title>
</head>
<body>
  <script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
      singing: function () {
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
    
    // 调用对象中 singing 方法
    person.singing()
    // 调用对象中的 run 方法
    person.run()
  </script>
</body>
</html>

扩展：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象方法</title>
</head>
<body>
  <script>
    // 声明一个空的对象（没有任何属性，也没有任何方法）
    let user = {}
    // 动态追加属性
    user.name = '小明'
    user.['age'] = 18
    
    // 动态添加方法
    user.move = function () {
      console.log('移动一点距离...')
    }
    
  </script>
</body>
</html>

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

✨this关键字

this 关键字是一个特殊变量，它指向函数调用的上下文对象。在方法中使用 this 可以访问调用该方法的对象的属性。


let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};
 
person.greet(); // 输出: Hello, my name is Alice

✨null

null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object。

JavaScript 对象入门：基础用法全解析

⭐对象

✨语法

✨属性和访问

✨方法和调用

✨this关键字

✨null

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/708540