JavaScript学习笔记04

2023-09-18 22:59:17

JavaScript笔记04

方法

定义方法

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

</body>
</html>
  • 打开浏览器控制台，输入person.age();，查看结果：

在这里插入图片描述

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

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

</body>
</html>
  • 打开浏览器控制台，输入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'

Date

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

基本使用

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

</body>
</html>
  • 然后我们来测试一下以下基本方法：
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 对象所代表时间的毫秒数（更早的时间会用负数表示）
  • 测试结果如下：

在这里插入图片描述

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

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

在这里插入图片描述

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字符串

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

  • 使用stringify()将对象转化为JSON字符串
  • 使用parse()将JSON字符串转化为对象。（注意：参数为一个JSON字符串）
  • 例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

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

面向对象编程

什么是面向对象

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

原型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
  • 打开浏览器控制台，输入console.log(xiaoming)和xiaoming.run()：

在这里插入图片描述

  • 创建一个对象Bird，使用__proto__设置对象xiaoming的原型为Bird：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
  • 在浏览器控制台输入console.log(xiaoming)和xiaoming.fly()：

在这里插入图片描述

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

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

</body>
</html>

class 继承

  • ES 6 新增了class关键字，通过class 声明我们能创建一个基于原型继承的具有给定名称的新类（本质上还是通过原型继承）。 参考：class - JavaScript
  • 例：定义一个学生类并创建它的的实例对象：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
  • 打开浏览器控制台，测试一下我们创建的学生类对象：

在这里插入图片描述

  • 和 Java 一样，在 JavaScript 中，我们也使用extends关键字来实现继承，不过在 Java 中我们是基于父类继承，而在 JavaScript 中，我们是基于原型继承。
  • 例：定义一个小学生类（Pupil），继承学生类（Student）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
  • 测试：

在这里插入图片描述

原型链（了解）

更多推荐

动力节点老杜JavaWeb笔记(全)

Servlet关于系统架构系统架构包括什么形式？C/S架构B/S架构C/S架构？Client/Server（客户端/服务器）C/S架构的软件或者说系统有哪些呢？QQ（先去腾讯官网下载一个QQ软件，几十MB，然后把这个客户端软件安装上去，然后输入QQ号以及密码，登录之后，就可以和你的朋友聊天了，就可以使用这个软件了。）C

为何学linux及用处

为何学linux及用处目前企业使用的操作系统无非就是国产类的，windows和linux类。我们要提升自己的技能，需要学习这两款。我记得在大学时期，学习过windows以及linux，但当时觉得又不常用，就学的模棱两可。毕业之后，你会发现，其实这两种操作系统是很主流的。为什么学？下面就是一些工作中遇到的例子分享一下。我

golang 结合 cobra 使用 chatgpt qdrant 实现 ai知识库 cli

golang结合cobra使用chatgptqdrant实现ai知识库cli流程将数据集通过openaiembedding得到向量+组装payload,存入qdrant用户进行问题搜索,通过openaiembedding得到向量,从qdrant中搜索相似度大于0.8的数据从qdrant中取出数据得到参考答案将问题标题+

js兼容性的汇总

js兼容问题大多是在ie浏览器低版本以及ie浏览器和不同普通浏览器的差异事件对象document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；vare=ev;console.log(e);}document.onclick=function(){//谷歌和IE支持，火狐不支

css3动画基础详解（@keyframes和animation）

动画是使元素从一种样式逐渐变化为另外一种效果，CSS3动画的生成，主要依赖@keyframes定义动画，animation执行动画。@keyframes通过@keyframes规则创建动画。@keyframeskeyframes-name{keyframes-selector{css-styles;}}keyframe

【数据结构】哈希表（详）

文章目录前言正文一、基本概念二、基本原理1.哈希函数1.1直接定址法（常用）1.2除留余数法（常用）1.3平方取中法（了解）1.4折叠法(了解)1.5随机数法(了解)1.6数学分析法(了解)2.哈希冲突2.1平均查找长度2.2负载因子2.3闭散列(开放定制法)2.1.1线性探测2.1.2二次探测2.1.3二重哈希2.4

MySQL 8.0 OCP (1Z0-908) 考点精析-架构考点5：数据字典(Data Dictionary)

文章目录MySQL8.0OCP(1Z0-908)考点精析-架构考点5：数据字典(DataDictionary)File-basedMetadataStorage（基于文件的元数据存储）TransactionalDataDictionary（事务数据字典）SerializedDictionaryInformation(S

相机One Shot标定

1原理说明原理部分网上其他文章[1][2]也已经说的比较明白了，这里不再赘述。2总体流程参考论文作者开源的Matlab代码[3]和github上的C++代码[4]进行说明（不得不说还是Matlab代码更优雅）论文方法总体分两部，第一部是在画面中找到所有的类棋盘格角点，第二步是角点的基础上构建出棋盘格形状。3模块说明3.

【Verilog 教程】3.1 Verilog 连续赋值

关键词：assign，全加器连续赋值语句是Verilog数据流建模的基本语句，用于对wire型变量进行赋值。：格式如下assignLHS_target=RHS_expression；LHS（lefthandside）指赋值操作的左侧，RHS（righthandside）指赋值操作的右侧。assign为关键词，任何已经声

Redis面试二“缓存击穿是什么”

条件缓存击穿是应为Redis某个缓存数据设置了过期时间，而刚好有大并发数据请求这个数据，导致DB有大量请求，引发DB崩溃。第一种方法就是设置互称锁当缓存失效时不立即删除缓存而是用setnx设置一个互斥锁，当操作完成后在loaddb，并回设缓存，否则重试get缓存方法，这样就减少了直接大量访问DB的请求。实现@Servi

Java高级-动态代理

动态代理1.介绍2.案例1.介绍publicinterfaceStar{Stringsing(Stringname);voiddance();}publicclassBigStarimplementsStar{privateStringname;publicBigStar(Stringname){this.name=n

热文推荐
  1. JavaScript之观察者模式

    本文作者为360奇舞团前端开发工程师概述在日常开发中，开发人员经常使用设计模式来解决软件设计中的问题。其中，观察者模式是一种常用的模式，它可以帮助开发人员更好地处理对象之间的通信。在JavaScript中，观察者模式的应用非常广泛，可以用于实现事件处理、数据绑定等功能。本文将介绍观察者模式的基本概念和实现方式。什么是观

  2. 大数据之Hadoop

    大数据按顺序给出数据存储单位：bit、Byte、KB、MB、GB、TB、PB、EB、ZB、YB、BB、NB、DB。1Byte=8bit1K=1024Byte1MB=1024K1G=1024M1T=1024G1P=1024THadoopHadoop是一个能够对大量数据进行分布式处理的软件框架。分布式处理是指：比如有100

  3. 苹果CMS主题 MXonePro二开优化修复开源版影视网站源码

    MXPro模板主题(又名：mxonepro)是一款基于苹果cms程序的一款全新的简洁好看UI的影视站模板类似于西瓜视频，不过同对比MxoneV10魔改模板来说功能没有那么多,也没有那么大气，但是比较且可视化功能较多简洁且有周更记录样式等多功能后台设置，类似预mxone魔改版的预告片功能，用来做影视站模板也是极好的，但之

  4. 【go语言】条件，选择，循环和特殊语句

    if语句a:=10ifa>20{fmt.Printf("a大于20")}elseifa<10{fmt.Printf("a小于10")}else{fmt.Printf("a大于等于10，a小于等于20")}go语言的if语句和C语言的if语句的差不多，需要注意的是else和elseif要写在括号右边；go语言的if语句还

  5. golang http

    函数说明http.ServeMux是Go语言标准库中的一个多路复用器（multiplexer）。它用于路由和处理HTTP请求，将请求分发到相应的处理器函数。http.HandleFunc是Go语言标准库中的一个函数，用于注册处理器函数来处理HTTP请求。它是对http.ServeMux的简化封装，方便快速实现路由功能。

  6. 微信小程序通过 wxministore 实现类似于vuex的全局装填数据管理

    首先我们打开终端引入依赖npminstallwxministore--save然后如果你是新版开发者工具就npmi构建一下如果你是老版本的微信开发者工具就打开右上角详情选择本地管理勾选使用npm模块然后在根目录下创建一个store.js当然建在哪是你自己决定的反正后面能引入到就好然后store.js编写代码如下impo

  7. Java版分布式微服务云开发架构 Spring Cloud+Spring Boot+Mybatis 电子招标采购系统功能清单

    项目说明随着公司的快速发展，企业人员和经营规模不断壮大，公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境，最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范，以及审计监督要求；通过电子化平台提高招投标工作的公开性和透明性；通过电子化招投标，使得招标采购的质量更高、速度

  8. MyBatis 缓存模块

    文章目录前言缓存的实现Cache接口PerpetualCache缓存的应用缓存对应的初始化一级缓存二级缓存第三方缓存前言MyBatis作为一个强大的持久层框架，缓存是其必不可少的功能之一，Mybatis中的缓存分为一级缓存和二级缓存。但本质上是一样的，都是使用Cache接口实现的。缓存的实现Cache接口Cache接口

  9. WebGL 初始化着色器

    目录前言初始化着色器的7个步骤创建着色器对象（gl.createShader（））gl.createShader（）规范gl.deleteShader（）规范指定着色器对象的代码（gl.shaderSource（））gl.shaderSource（）规范编译着色器（gl.compileShader（））gl.compi