[TOC]

JavaScript面向对象

1.1、面向对象介绍

    在 Java 中我们学习过面向对象,核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。

    ![面向对象介绍.png](https://cdn.nlark.com/yuque/0/2021/png/1455470/1629611056028-afdd0b95-f2f4-48ba-944c-6c2447dbe9e9.png#clientId=ufa248152-a556-4&from=drop&id=u79dc0e07&margin=%5Bobject%20Object%5D&name=%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E4%BB%8B%E7%BB%8D.png&originHeight=374&originWidth=720&originalType=binary&ratio=1&size=60493&status=done&style=none&taskId=u7dab5688-b290-4af4-bfef-82a7c628421)

1.2、类的定义和使用

  • 结构说明

类的定义和使用.png

  • 代码实现
    ```html <!DOCTYPE html>

<a name="01772288"></a>
## 1.3、字面量类的定义和使用

-  **结构说明** 

![字面量定义类和使用.png](https://cdn.nlark.com/yuque/0/2021/png/1455470/1629611083744-134ead9b-2afc-4cdb-9d35-219322b0ff75.png#clientId=ufa248152-a556-4&from=drop&id=u419b2c30&margin=%5Bobject%20Object%5D&name=%E5%AD%97%E9%9D%A2%E9%87%8F%E5%AE%9A%E4%B9%89%E7%B1%BB%E5%92%8C%E4%BD%BF%E7%94%A8.png&originHeight=357&originWidth=312&originalType=binary&ratio=1&size=29756&status=done&style=none&taskId=u627cb26b-cec5-40fa-98a0-a8d7281d66a)

-  **代码实现**  
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字面量定义类和使用</title>
</head>
<body>

</body>
<script>
    //定义person
    let person = {
        name : "张三",
        age : 23,
        hobby : ["听课","学习"],

        eat : function() {
            document.write("吃饭...");
        }
    };

    //使用person
    document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
    person.eat();
</script>
</html>

1.3、继承

  • 继承:让类与类产生子父类的关系,子类可以使用父类有权限的成员。
  • 继承关键字:extends
  • 顶级父类:Object
    ```html <!DOCTYPE html>

```

1.4、小结

  • 面向对象
    把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统建模,更贴近事物的自然运行模式。
  • 类的定义
    class 类{} 字面量定义
  • 类的使用
    let 对象名 = new 类名(); 对象名.变量名 对象名.方法名()
  • 继承
    让类和类产生子父类关系,提高代码的复用性和维护性。
    子类 extends 父类
    Object 顶级父类