04-JS中的物件導向ES5

自由的代价很贵發表於2024-07-07

01 JS物件中key的型別

02 建立物件的方法

03 物件的常見操作

3.1 訪問物件的屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var person = {
            name: "kobe",
            age: 30,
            height: 1.98
        }
        console.log(person.age)
        console.log(person.height)
    </script>
</body>
</html>

3.2 修改物件的屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var person = {
            name: "kobe",
            age: 30,
            height: 1.98
        }
        person.age = 25
        console.log(person.age)
    </script>
</body>
</html>

3.3 給物件中新增屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var person = {
            name: "kobe",
            age: 30,
        }
        person.height = 1.98
        console.log(person.height)
    </script>
</body>
</html>

該屬性存在就修改,不存在就新增上去

3.4 刪除物件中的屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var person = {
            name: "kobe",
            age: 30,
        }
        delete person.age
        console.log(person.age)
    </script>
</body>
</html>

04 物件的方括號使用

主要是因為key是一個字串的原因

05 物件的遍歷

5.1 for迴圈示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var info = {
            name: "kobe",
            age: 30,
            height: 1.98
        }

        var infokeys = Object.keys(info)
        for (var i = 0; i < infokeys.length; i++) {
            console.log(infokeys[i])
        }
    </script>
</body>
</html>

5.2 for ... in ...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var info = {
            name: "kobe",
            age: 30,
            height: 1.98
        }

        for (var key in info) {
            console.log(info[key])
        }
    </script>
</body>
</html>

06 記憶體分配初步理解圖

07 js中一些現象的理解

7.1 現象1: 2個物件的比較

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj1 = {}
        var obj2 = {}
        console.log(obj1 === obj2)
    </script>
</body>
</html>

因為在js中只要是物件就一定會在堆記憶體中建立一個新的物件，就意味著它們在堆記憶體中會有2個不同的地址，所以它們肯定是不等的

7.2 現象2: 引用賦值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var info = {
            name: "kobe",
            friend: {
                name: "james"
            }
        }

        var friend = info.friend
        friend.name = "john"
        console.log(info.friend.name)
    </script>
</body>
</html>