JavaScript高级

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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值