02-JS中的面向对象ES5

已注销
87 阅读2分钟

01 JS对象中key的类型

00030.png

02 创建对象的方法

00031.png

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是一个字符串的原因

00032.png

05 对象的遍历

00033.png

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 内存分配初步理解图

00034.png

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>

00035.png

因为在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>

00036.png

08 创建一系列对象的方式

8.1 第1种方式: 字面量的方式

00037.png 这种方式虽然可以创建,但是可以发现它们是非常类似,只有属性的值不一样,这样写就会写大量的重复代码

8.2 第2种方式: 函数的方式

00038.png 这种方法编写方式的缺点就是返回的结果是一个对象不够直观

<!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>
      function Person(name, age) {
        var stu = {}
        stu.name = name
        stu.age = age
        return stu 
      }

      var person1 = Person("kobe", 33)
      console.log(person1)
    </script>
</body>
</html>

8.3 第3种方式: 通过js提供的方式[ES5]

00039.png new一个对象时,js帮我们做的事情如下 00040.png

avatar
文章
阅读
粉丝