JavaScript高级

最新推荐文章于 2024-04-09 01:15:00 发布

熊熊fire

最新推荐文章于 2024-04-09 01:15:00 发布

阅读量1.2k

点赞数

文章标签： html dom js

本文链接：https://blog.csdn.net/xglfire/article/details/106908284

版权

JavaScript高级

JavaScript 面向对象

面向对象介绍

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

在这里插入图片描述

类的定义和使用

定义格式
使用格式

代码:

<!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(){
   
            document.write(this.name+","+this.age+"<br>");
        }

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

    //使用Person类
    let p = new Person("zhangsan",19);
    p.show();
    p.eat();
</script>
</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>

继承

继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
继承关键字：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>

面向对象小结

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

JavaScript 内置对象

Number

在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number</title>
</head>
<body>
    
</body>
<script>
    //1. parseFloat()  将传入的字符串浮点数转为浮点数
    document.write(Number.parseFloat("3.14") + "<br>");

    //2. parseInt()    将传入的字符串整数转为整数
    document.write(Number.parseInt("100") + "<br>");
    document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换，直到不是数字为止
    document.write(Number.parseFloat("3.191919sss")+"<br>");
    document.write(Number.parseInt("12345erty")+"<br>");
    document.write(isNaN(NaN)+"<br>");
    document.write(NaN == NaN);
</script>
</html>

Math

在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math</title>
</head>
<body>
    
</body>
<script>
    //1. ceil(x) 向上取整
    document.write(Math.ceil(4.4) + "<br>");    // 5
    
    //2. floor(x) 向下取整
    document.write(Math.floor(4.4) + "<br>");   // 4
    
    //3. round(x) 把数四舍五入为最接近的整数
    document.write(Math.round(4.1) + "<br>");   // 4
    document.write(Math.round(

最低0.47元/天解锁文章

熊熊fire

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级

JavaScript高级JavaScript 面向对象面向对象介绍在 Java 中我们学习过面向对象，核心思想是万物皆对象。在JavaScript 中同样也有面向对象。思想类似类的定义和使用定义格式使用格式代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi
复制链接

扫一扫