当前位置: 首页 > 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 实时更新的数据…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

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

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

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...