当前位置：首页 > news >正文

JavaScript学习笔记04

news 文章来源：https://blog.csdn.net/weixin_53983068/article/details/133000694 2024/11/7 13:52:47

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（了解，后面再深入学习）

参考：Ajax - Web 开发者指南
原生的 JS 写法 xhr 异步请求
jQuery 封装好的方法 $("#name").ajax("")
axios 请求

面向对象编程

什么是面向对象

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

原型

原型是 JavaScript 对象相互继承特性的机制。参考：对象原型 - 学习 Web 开发
__proto__ - 参考：Object.prototype.__proto__ - JavaScript
例：创建一个对象student1和一个对象xiaoming，使用__proto__设置对象xiaoming的原型为student1，通过这种方式实现继承：

<!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 的原型为 student1xiaoming.__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 的原型为 Birdxiaoming.__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>

测试：

在这里插入图片描述

原型链（了解）

JavaScript 中所有的对象都有一个内置属性，称为它的 prototype（原型）。它本身是一个对象，故原型对象也会有它自己的原型，逐渐构成了原型链。原型链终止于拥有 null 作为其原型的对象上。
详细参考：
- 继承与原型链 - JavaScript | MDN (mozilla.org)
- javascript——原型与原型链 - 雅昕 - 博客园 (cnblogs.com)

JavaScript学习笔记04

JavaScript笔记04 方法定义方法当一个函数是一个对象的属性时，称之为方法。例： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script>let p…...

编程日记 2023/9/19 9:52:45

18 Python的sys模块

概述在上一节，我们介绍了Python的os模块，包括：os模块中一些常用的属性和函数。在这一节，我们将介绍Python的sys模块。sys模块提供了访问解释器使用或维护的变量，以及与解释器进行交互的函数。通俗来讲，sy…...

编程日记 2023/9/19 9:50:42

Spring Boot 各版本的支持时间

1. Spring Boot 各版本的支持时间 Spring Boot 2.7 的版本，支持到2023-11-18，之后就要停止支持了。按照官网的数据，3.0 的版本也是到2023年11月就停止支持了。如果要转到SpringBoot3，直接从3.1开始吧。到写这篇文章时&#xff…...

编程日记 2023/9/19 9:49:41

华为云云耀云服务器L实例评测｜Git 私服搭建指南

前言本文为华为云云耀云服务器L实例测评文章，测评内容是云耀云服务器L实例 Git 私有服务器搭建指南系统配置：2核2G 3M Ubuntu 20.04 我们平时在使用代码托管服务的时候，可能某些代码托管平台对成员有限制，或是由于内容原因会对…...

编程日记 2023/9/19 9:45:38

Linux下的Swap内存

目录一、Swap简介二、Swap内存查看三、Swap内存释放1、关闭swap2、查看关闭进度2、开启swap 一、Swap简介 swap space 是磁盘上的一块区域，可以是一个分区，也可以是一个文件。所以具体的实现可以是 swap分区也可以是 swap文件。当系统物理内存吃紧时…...

编程日记 2023/9/19 9:44:37

Unity中程序集dll

一：前言一个程序集由一个或多个文件组成，通常为扩展名.exe和.dll的文件称为程序集，.exe是静态的程序集，可以在.net下直接运行加载，因为exe中有一个main函数(入口函数），.dll是动态链接库&#…...

编程日记 2023/9/19 9:43:36

识典百科取代快懂百科，如何在识典百科创建词条？

我们一个营销项目里面有四个百科词条的创建，在执行过程中遇见了快懂百科升级，创建词条请前往识典百科，看这个意思字节跳动是要把快懂百科升级整合到识典百科了。快懂百科升级整合进入识典百科近年来，字节跳动动作不断&#xff0…...

编程日记 2023/9/19 9:39:31

入门python

[NOIP2006 普及组] 明明的随机数题目描述明明想在学校中请一些同学一起做一项问卷调查，为了实验的客观性，他先用计算机生成了 N N N 个 1 1 1 到 1000 1000 1000 之间的随机整数 ( N ≤ 100 ) (N\leq100) (N≤100)，对于其中重复的数字…...

编程日记 2023/9/19 9:38:30

基于vue的黑马前端项目小兔鲜

目录项目学习初始化项目建立项目引入elementplus elementPlus主题设置配置axios 路由引入静态资源自动导入scss变量 Layout页组件结构快速搭建字体图标渲染一级导航渲染吸顶导航交互实现 Pinia优化重复请求 Home页分类实现 banner轮播图 …...

编程日记 2023/9/19 9:37:29

细节决定成败！jdbc的List＜?＞ qryList4Sql(String sql)报错-标志符过长

问题产生背景： 在写sql时，想着简单直接就偷懒了，没有看清细节操作步骤跟发现问题： 1. sql语句的执行选用的是jdbc提供的List<?> qryList4Sql(String sql) 方法 2，这是我的sql语句(简化处理) String sql "…...

编程日记 2023/9/19 9:34:26

ChatGLM Pytorch从0编写Transformer算法

预备工作 # !pip install http://download.pytorch.org/whl/cu80/torch-0.3.0.post4-cp36-cp36m-linux_x86_64.whl numpy matplotlib spacy torchtext seaborn import numpy as np import torch import torch.nn as nn import torch.nn.functional as F import math, copy, tim…...

编程日记 2023/9/19 9:29:19

9.18算法

机器人重物1126 注意编号是方块的，而不是格点的及如果为n*m的矩阵，需要开(n1)*(m1)的矩阵 //如果没有转向，就是走迷宫，结合记忆化，如果这个点之前走过就不走了 //又转向的话，就用一个变量记录当前转向&…...

编程日记 2023/9/19 9:28:18

【Spring Bean的生命周期】

文章目录 Spring Bean的生命周期实例化构造器实例化工厂方法实例化属性赋值XML方式注解方式初始化postProcessBeforeInitialization()和postProcessAfterInitialization()InitializingBean接口的afterPropertiesSet()方法通过Bean注解定义的初始化方法使用PostConstruct注解标…...

编程日记 2023/9/19 9:26:16

信息化发展49

软件设计 1 、软件设计是需求分析的延伸与拓展。需求分析阶段解决“做什么” 的问题，而软件设计阶段解决“怎么做” 的问题。同时， 它也是系统实施的基础， 为系统实施工作做好铺垫。合理的软件设计方案既可以保证系统的质量， 也可…...

编程日记 2023/9/19 9:25:15

linux常用命令(4)：mkdir命令(创建目录)

文章目录一、命令简介二、命令格式三、常用示例一、命令简介 mkdir（make directories）创建目录。若指定目录不存在则创建目录。若指定目录已存在，则会提示已存在而不继续创建。 touch与mkdir的区别? 很多人可能会把这个搞混淆&#xff…...

编程日记 2023/9/19 9:23:12

企业架构LNMP学习笔记58

开始学习Tomcat： 学习目标和内容： 1）能够描述Tomcat的使用场景； 2）能够简单描述Tomcat的工作原理； 3）能够实现部署安装Tomcat； 4）能够实现和配置Tomcat的Server服务…...

编程日记 2023/9/19 9:21:10

[JAVAee]SpringBoot配置文件

配置文件的介绍配置文件当中记录了许多重要的配置信息,例如: 数据库的连接信息(用户的账户与密码)项目的启动端口第三方系统的调用密匙用于记录问题产生的日志在spring框架中一些特定的框架会自动调用配置文件中的配置信息来运用. 配置文件中的属性也起到了类似全局变量的…...

编程日记 2023/9/19 9:20:09

复制远程连接到Linux使用VIM打开的内容到Windows

我们经常是使用SSH工具远程连接到Linux服务器上进行工作，有时候需要将Linux下使用VIM打开的文件内容复制到Windows上来，默认情况下，可能会复制不了，因为VIM默认情况下是使用的set mousea的设置，它会让鼠标选中的时候进…...

编程日记 2023/9/19 9:18:07

左神算法之中级提升班（9）

目录【案例1】【题目描述】【思路解析】【代码实现】【案例2】【题目描述】【思路解析平凡解技巧从业务中分析终止条件重点】【代码实现】【案例3】【题目描述】【思路解析】【案例4】【题目描述】【思路解析】【代码实现】【动态规划代码】…...

编程日记 2023/9/19 9:15:05

SmartNews 基于 Flink 的 Iceberg 实时数据湖实践

摘要：本文整理自 SmartNews 数据平台架构师 Apache Iceberg Contributor 戢清雨，在 Flink Forward Asia 2022 实时湖仓专场的分享。本篇内容主要分为五个部分： SmartNews 数据湖介绍基于 Icebergv1 格式的数据湖实践基于 Flink 实时更新的数据…...

编程日记 2023/9/19 9:12:02

websocket请求通过IteratorAggregate实现流式输出

对接国内讯飞星火模型，官方文档接口采用的是websocket跟国外chatgpt有些差异。虽然官网给出一个简单demo通过while(true)，websocket的receive()可以实现逐条接受并输出给前端，但是通用和灵活度不高。不能兼容现有项目框架的流式输出。故模仿…...

编程日记 2023/9/19 9:07:56

《C和指针》笔记28：可变参数和stdarg宏

可变参数列表可以通过宏来实现，这些宏定义于stdarg.h头文件，它是标准库的一部分。这个头文件声明了一个类型va_list和三个宏——va_start、va_arg和va_end 。我们可以声明一个类型为va_list的变量，与这几个宏配合使用，访问参数的值…...

编程日记 2023/9/19 9:03:52

Matlab论文插图绘制模板第114期—带图形标记的图

之前的文章中，分享了Matlab带线标记的图： 带阴影标记的图： 带箭头标记的图： 进一步，分享一下带图形标记的图，先来看一下成品效果： 特别提示：本期内容『数据代码』已上传资源群中&…...

编程日记 2023/9/19 9:02:50

Python：用于有效对象管理的单例模式

1. 写在前面在本文中，我们将介绍一种常用的软件设计模式 —— 单例模式。通过示例，演示单例创建，并确保该实例在整个应用程序生命周期中保持一致。同时探讨它在 Python 中的目的、益处和实际应用。关键点： 1、单例模式只有…...

编程日记 2023/9/19 9:01:49

【TCP】滑动窗口、流量控制以及拥塞控制

滑动窗口、流量控制以及拥塞控制 1. 滑动窗口（效率机制）2. 流量控制（安全机制）3. 拥塞控制（安全机制） 1. 滑动窗口（效率机制） TCP 使用确认应答策略，对每一个发送的数…...

编程日记 2023/9/19 9:00:48

Xilinx FPGA管脚约束语法规则（UCF和XDC文件）

文章目录 1. ISE环境（UCF文件）2. Vivado环境（XDC文件） 本文介绍ISE和Vivado管脚约束的语句使用，仅仅是管脚和电平状态指定，不包括时钟约束等其他语法。 ISE使用UCF文件格式，Vivado使用XDC文件&…...

编程日记 2023/9/19 8:56:44

服务网格和CI/CD集成：讨论服务网格在持续集成和持续交付中的应用。

🌷🍁 博主猫头虎带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺 &a…...

编程日记 2023/9/19 8:54:41

代码随想录训练营第56天|583.两个字符串的删除操作，72.编辑距离

代码随想录训练营第56天|583.两个字符串的删除操作，72.编辑距离 583.两个字符串的删除操作文章思路代码 72.编辑距离文章思路代码总结 583.两个字符串的删除操作文章代码随想录|0583.两个字符串的删除操作思路如果不按照编辑距离考虑的话，只需要…...

编程日记 2023/9/19 8:49:38

【JDK 8-Lambda】3.1 Java高级核心玩转 JDK8 Lambda 表达式

一、什么是函数式编程 ？ 二、什么是lambda表达式？ 1. 先看两个示例 A.【创建线程】 B.【数组排序-降序】 2. lambda表达式特性 A. 使用场景(前提): B. 语法 (params) -> expression C. 参数列表 D. 方法体 F. 好处一、什么是函数式编…...

编程日记 2023/9/19 8:47:34

【C#】XML的基础知识以及读取XML文件

最近在学读取文件目录介绍特点结构XML的语法规则XML 命名规则 C#操作XML新建读取第一种第二种第三种读取属性介绍 XML (可扩展标记语言，eXtensible Markup Language) 是一种标记语言，它被设计用来传输和存储数据。特点可扩展性：由于…...

编程日记 2023/9/19 8:46:33

外贸网站建设公司案例/18款禁用看奶app入口

思路： 这题应该不止一种解法，其中的一种可以看作是leetcode85https://www.cnblogs.com/wangyiming/p/11059176.html的加强版： 首先对于每一行，分别使用滑动窗口法将这一行划分成符合题目定义的若干合法子段s1, s2, s3, ...。对于每…...

编程日记 2024/11/7 13:29:52

金华企业网站推广/长沙seo排名公司

前段时间一直忙着。没有时间更新博客。今天，仍然需要一段时间才能实现对游戏的一小部分，最后打动他。BaseLayer.h: #import <GameKit/GameKit.h> #import "cocos2d.h"#import "AppDelegate.h" #import "PersonSprite.h&q…...

编程日记 2024/11/7 13:02:53

有哪些可以免费做视频的网站/整站排名服务

本文的内容是我的开源代码（https://github.com/e10101/AdminLogin）的中文说明。项目主要是实现了通过合理配置Nginx的auth_request模块来实现对敏感路径下的内容进行访问限制。代码可通过Github访问：https://github.com/e10101/AdminLogin&…...

编程日记 2024/11/7 5:38:11

家居企业网站建设如何/百度区域代理

刚看完urlretrieve函数，想要实战一下它的效果，于是找了国家地理杂志中国官网爬一下，网站http://www.nationalgeographic.com.cn/ 开发环境是Python2.7&&Pycharm 图片的src是这样的： 我们用正则&&BeautifulSoup匹配…...

编程日记 2024/11/7 3:31:32

免费微信小程序制作/百度seo流量

链表05--复杂链表的复制-jz25题目概述解析&参考答案注意事项说明题目概述算法说明输入一个复杂链表（每个节点中有节点值，以及两个指针，一个指向下一个节点，另一个特殊指针random指向一个随机节点），请…...

编程日记 2024/11/7 0:43:36

找个人给我做电影网站/百度搜索seo优化技巧

Python程序有两种退出方式： os._exit() 和 sys.exit()。我查了一下这两种方式的区别。os._exit() 会直接将python程序终止，之后的所有代码都不会执行。sys.exit() 会抛出一个异常: SystemExit，如果这个异常没有被捕获，那么python解…...

编程日记 2024/11/6 20:30:33

JavaScript笔记04

方法

定义方法

内置对象

Date

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

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

面向对象编程

什么是面向对象

原型

class 继承

原型链（了解）

相关文章：