JavaScript-05-笔记

最新推荐文章于 2024-07-16 17:56:11 发布

寻7

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript 类 class 面向对象编程多态

本文链接：https://blog.csdn.net/qq_24410589/article/details/117858776

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript面向对象

JavaScript面向对象

JavaScript面向对象

1、面向对象介绍

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

2、类的定义和使用

结构说明

代码实现

<!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类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //show方法
        show(){
            document.write(this.name + "," + this.age + "<br>");
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //使用Person类
    let p = new Person("张三",23);
    p.show();
    p.eat();
</script>
</html>

3、字面量类的定义和使用

结构说明(对比)

代码实现

<!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>

3、继承

继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
继承关键字：extends

顶级父类：Object

<!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类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //定义Worker类继承Person
    class Worker extends Person{
        constructor(name,age,salary){
            super(name,age);
            this.salary = salary;
        }

        show(){
            document.write(this.name + "," + this.age + "," + this.salary + "<br>");
        }
    }

    //使用Worker
    let w = new Worker("张三",23,10000);
    w.show();
    w.eat();
</script>
</html>

4、小结

面向对象

把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式。
类的定义

class 类{} 字面量定义
类的使用

let 对象名 = new 类名(); 对象名.变量名对象名.方法名()
继承

让类和类产生子父类关系，提高代码的复用性和维护性。

子类 extends 父类

Object 顶级父类

寻7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JavaScript-05-笔记

JavaScript面向对象1、面向对象介绍2、类的定义和使用3、字面量类的定义和使用3、继承4、小结JavaScript面向对象1、面向对象介绍在 Java 中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。
复制链接

扫一扫