JavaScript 面向对象

最新推荐文章于 2024-10-07 09:24:46 发布

悠然予夏

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量100

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52851967/article/details/122562888

版权

JavaScript 专栏收录该内容

49 篇文章 3 订阅

订阅专栏

1、类的定义和使用

定义格式

class  类名 {
        constructor(变量列表) {
                变量赋值；
        }
        方法名(参数列表) {

                方法体；

                return 返回值
        }
}
使用格式

let 对象名 = new 类名(实际变量值）

对象名.方法名

代码实现

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

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

结构说明

let 对象名 = {
    变量名:变量值,
    变量名:变量值,
    ······

    方法名:function() {
        方法体:
        return 返回值
    },
    ····
};

使用格式：

对象.变量名

对象名.方法名()

代码实现

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