JavaScript-05-笔记

Posted 寻7

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript-05-笔记相关的知识,希望对你有一定的参考价值。

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 顶级父类

以上是关于JavaScript-05-笔记的主要内容,如果未能解决你的问题,请参考以下文章

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段

sh bash片段 - 这些片段大多只是我自己的笔记;我找到了一些,有些我已经找到了

需要一种有效的方法来避免使用 Laravel 5 重复代码片段

Oracle-常用数据库对象笔记(片段)

如何使用导航组件处理片段内的向上按钮

JSP笔记