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

JavaScript学习笔记04

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 方法 定义方法 当一个函数是一个对象的属性时&#xff0c;称之为方法。例&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script>let p…...

18 Python的sys模块

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

Spring Boot 各版本的支持时间

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

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

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

Linux下的Swap内存

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

Unity中程序集dll

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

识典百科取代快懂百科,如何在识典百科创建词条?

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

入门python

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

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

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

细节决定成败!jdbc的List<?> qryList4Sql(String sql)报错-标志符过长

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

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…...

9.18算法

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

【Spring Bean的生命周期】

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

信息化发展49

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

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

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

企业架构LNMP学习笔记58

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

[JAVAee]SpringBoot配置文件

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

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

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

左神算法之中级提升班(9)

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

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

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

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...