• JavaScript学习笔记04

    JavaScript笔记04

    方法

    定义方法

    • 当一个函数是一个对象的属性时，称之为方法。
    • 例：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        let person = {
            name: "张三",
            birthday: 2001,
            // 方法
            age: function () {
                // 获取现在的年份
                let now = new Date().getFullYear();
                // 今年 - 出生的年份
                return now - this.birthday;
            }
        }
    script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 打开浏览器控制台，输入person.age();，查看结果：

    在这里插入图片描述

    • 上面的代码也可以拆开写成这样：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        function getAge() {
            // 获取现在的年份
            let now = new Date().getFullYear();
            // 今年 - 出生的年份
            return now - this.birthday;
        }

        let person = {
            name: "张三",
            birthday: 2001,
            // 方法
            age: getAge
        }
    script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 打开浏览器控制台，输入person.age();（注意要带上括号），查看结果：

    在这里插入图片描述

    理解 this

    • 尝试直接使用getAge();来获取age：

    在这里插入图片描述

    • 发现返回值为NaN。
    • 分析原因：因为我们此时的函数getAge()是写在对象person的外面的，由于函数getAge()中的this的始终是指向调用它的对象的（此时调用函数getAge()的对象为全局对象window，而不是对象person），所以会返回NaN（Not a Number）。

    apply( )

    • 在 Java 中，this是无法控制指向的，它只能默认指向调用它的那个对象。
    • 但是在 JavaScript 中，我们可以通过使用apply()来控制this的指向。
      • Function实例的apply(thisArg, argsArray)方法会以给定的this 值和作为数组（或类数组对象）提供的arguments调用该函数。
      • 参数：thisArg - 调用函数时提供的 this 值；argsArray（可选）- 一个类数组对象，用于指定调用函数时的参数。
    • 例：使用apply()指定上面代码中的getAge()函数的this指向person对象：
      • 在控制台中输入getAge.apply(person,[]);，查看结果：

    在这里插入图片描述

    • 使用apply()指定this指向person后，成功获取到了age。

    内置对象

    标准对象

    typeof 123;
'number'
typeof '123';
'string'
typeof true;
'boolean'
typeof NaN;
'number'
typeof [];
'object'
typeof {};
'object'
typeof alert;
'function'
typeof undefined;
'undefined'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    Date

    • 创建一个 JavaScript Date实例，该实例呈现时间中的某个时刻。Date对象则基于 Unix 时间戳，即自 1970 年 1 月 1 日（UTC）起经过的毫秒数。

    基本使用

    • 首先我们创建一个Date示例对象，表示当前时间：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        "use strict";
        let now = new Date();
    script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 然后我们来测试一下以下基本方法：
    getFullYear() // 返回一个指定的 Date 对象的完整年份（四位数年份）
getMonth() // 返回一个指定的 Date 对象的月份（0–11），0 表示一年中的第一月
getDate() // 返回一个指定的 Date 对象为一个月中的哪一日（1-31）
getDay() // 返回一个指定的 Date 对象是在一周中的第几天（0-6），0 表示星期天
getHours() // 返回一个指定的 Date 对象的小时（0–23）
getMinutes() // 返回一个指定的 Date 对象的分钟数（0–59）
getSeconds() // 返回一个指定的 Date 对象的秒数（0–59）
getTime() // 返回一个数值，表示从1970年1月1日0时0分0秒（UTC，即协调世界时）距离该 Date 对象所代表时间的毫秒数（更早的时间会用负数表示）

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 测试结果如下：

    在这里插入图片描述

    补充：将时间戳转换为时间 & toLocaleTimeString( )

    new Date(时间戳) // 时间戳转为时间
toLocaleString() // 返回一个表述指定Date对象时间部分的字符串，该字符串格式因不同语言而不同

    • 1
    • 2
    • 测试结果如下：

    在这里插入图片描述

    JSON（了解格式和转换，后面再深入学习）

    • JSON（ JavaScript Object Notation， JS 对象简谱 ）是一种轻量级的数据交换格式。
    • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
    • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

    JSON 与 JavaScript

    • 在 JavaScript 中，一切皆为对象，任何 JavaScript 支持的类型都可以用JSON来表示，例如字符串、数字、对象、数组等。
    • 格式：
      • 对象都用{}
      • 数组都用[]
      • 所有的键值对都用key:value格式
    • 例：
    let obj = {a:"hello", b:"hi"}; // JS对象
let json = '{"a":"hello", "b":"hi"}'; // JSON字符串

    • 1
    • 2

    JSON字符串 和 JS对象的相互转化

    • 使用stringify()将对象转化为JSON字符串
    • 使用parse()将JSON字符串转化为对象。（注意：参数为一个JSON字符串）
    • 例：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        let user = {
            name: "张三",
            age: 18,
            gender: "男"
        };

        // stringify() - 将对象转化为 json 字符串
        let jsonUser = JSON.stringify(user);
        console.log(jsonUser); // {"name":"张三","age":18,"gender":"男"}

        // parse() - 将 json 字符串转化为对象，注意:参数为一个 json 字符串
        let obj = JSON.parse('{"name":"张三","age":18,"gender":"男"}');
        console.log(obj);
    script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    Ajax（了解，后面再深入学习）

    面向对象编程

    什么是面向对象

    • 面向对象的语言有 Java、JavaScript、C# 等等，但其中 JavaScript 和其他面向对象的语言又有一些区别。
    • 类与对象
      • 类：模板
      • 对象：具体的实例

    原型

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        let student1 = {
            name: "张三",
            age: 18,
            run: function () {
                console.log(this.name + "is running");
            }
        };

        let xiaoming = {
            name: "小明"
        };

        // 设置 xiaoming 的原型为 student1
        xiaoming.__proto__ = student1;
    script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 打开浏览器控制台，输入console.log(xiaoming)和xiaoming.run()：

    在这里插入图片描述

    • 创建一个对象Bird，使用__proto__设置对象xiaoming的原型为Bird：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        let student1 = {
            name: "张三",
            age: 18,
            run: function () {
                console.log(this.name + " is running");
            }
        };

        let xiaoming = {
            name: "小明"
        };

        let Bird = {
            fly: function () {
                console.log(this.name + " is flying");
            }
        }

        // 设置 xiaoming 的原型为 Bird
        xiaoming.__proto__ = Bird;
    script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 在浏览器控制台输入console.log(xiaoming)和xiaoming.fly()：

    在这里插入图片描述

    • 在 ES 6 之前，定义一个类只能通过使用原型的方式。（了解即可）
    • 例：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        function Student(name) {
            this.name = name;
        }

        // 给 Student 新增一个方法
        Student.prototype.hello = function () {
            alert("hello");
        };
    script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    class 继承

    • ES 6 新增了class关键字，通过class 声明我们能创建一个基于原型继承的具有给定名称的新类（本质上还是通过原型继承）。 参考：class - JavaScript
    • 例：定义一个学生类并创建它的的实例对象：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        // 定义一个学生类
        class Student {
            constructor(name) {
                this.name = name;
            }

            hello() {
                alert("hello");
            }
        }

        // 实例化，创建 Student 类的实例对象
        let xiaoming = new Student("小明");
        let xiaohong = new Student("小红");
    script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 打开浏览器控制台，测试一下我们创建的学生类对象：

    在这里插入图片描述

    • 和 Java 一样，在 JavaScript 中，我们也使用extends关键字来实现继承，不过在 Java 中我们是基于父类继承，而在 JavaScript 中，我们是基于原型继承。
    • 例：定义一个小学生类（Pupil），继承学生类（Student）：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
        // 定义一个学生类
        class Student {
            constructor(name) {
                this.name = name;
            }

            hello() {
                alert("hello");
            }
        }

        // 定义一个小学生类，继承学生类
        class Pupil extends Student {
            constructor(name, grade) {
                super(name);
                this.grade = grade;
            }

            myGrade() {
                alert("我今年" + this.grade + "年级了");
            }
        }

        // 实例化，创建 Student 类的实例对象
        let xiaoming = new Student("小明");
        // 实例化，创建 Pupil 类的实例对象
        let xiaohong = new Pupil("小红", 3);
    script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 测试：

    在这里插入图片描述

    原型链（了解）

  • 相关阅读:
    MybatisPlus学习(四)---DML编程控制
    leetcode热题100——第二天：5、6、10、11
    前端例程20221102：黑暗模式（Dark Mode）
    基于51单片机空气质量检测超限报警Proteus仿真
    Java8 Streams用法总结大全 之 Collector用法详解
    mybatis 源码本地编译
    编程面试_数组
    vue 中 mixin 和 mixins 区别
    【宋红康 MySQL数据库 】【高级篇】【20】其他数据库日志
    Elasticsearch 浅尝
  • 原文地址：https://blog.csdn.net/weixin_53983068/article/details/133000694