Brains - 灵感乌托邦 - 学习笔记
type: channel
link: https://www.fuuuy.cn/category/notes
items: 『笔记』『教程』搭建FRP内网穿透，轻松实现外网访问群晖
items: 『笔记』『教程』自制随机显示必应每日一图，以及API代码及调用方法
items: 『原创』『教程』为你的博客添加阅读模式（适配Joe，其他主题也可用）
items: 『原创』『教程』给自己博客的侧栏增加社交信息，方便业务（PY）联系
items: 『笔记』JavaScript进阶学习笔记 0
items: 『笔记』JavaScript基础学习笔记 6
items: 『笔记』JavaScript基础学习笔记 5 — DOM（文本对象模型）
items: 『笔记』JavaScript基础学习笔记 4
items: 『笔记』JavaScript基础学习笔记 3
items: 『笔记』JavaScript基础学习笔记 2

『笔记』『教程』搭建FRP内网穿透，轻松实现外网访问群晖
type: item
date: 2023-02-21T17:40:00+08:00
description: 前言内网穿透frp穿透教程来了，不多bb直接上教程，想了解frp具体原理和详情的请百度搜索名，这里最终演示的目的是通过frp登陆群晖。 本教程适用于一下人群：没有公网想进行外网访问nas的有公网在公网出问题增加一个外网访问保障的{alert type="success"}友情提示，如果对linux或者命令不怎么熟悉的，就完全按照我的教程做（本教程已经尽力最简化了），我这里怎么操作，你就怎么操作，先保证成功，然后在根据自身个性化设置。{/alert}一、服务端操作（一）前提条件SSH工具：FinalShell 下载地址一台具有公网ip的云服务器（二）设置服务器root密码和ssh1、 首先登陆腾讯云，修改服务器root密码（知道的话可以不修改）2、用ssh工具登陆云服务器。（三）安装frps1、因为frps官方安装需要vi编辑器和linux等命令，这里为了简便，采用github上开源的一键脚本安装frps，脚本有两个源，国外VPS用Github的源，国内的VPS建议使用Aliyun的源，要不可能很慢。Aliyun（阿里云源） #下载脚本（依次复制输入） wget https://code.aliyun.com/MvsCode/frps-onekey/raw/master/install-frps.sh -O ./install-frps.sh #设置脚本权限 chmod 700 ./install-frps.sh #运行脚本 ./install-frps.sh install2、本教程使用的是腾讯云国内服务器，使用Aliyun的源，依次输入命令，如下图。3、输入第三条命令以后回车进入配置界面，选择下载frps的下载地址，这里面我们选择【1】。下面的一些端口号及配置请根据自身选择输入，不要完全按照我的照搬，如果不明白端口的意思就按照我的输入，在教程完成之后，明白了端口的意义，在根据自身需求修改。（尤其标记重要的请一定要修改）4、输入frps的通信端口，请根据自己需求输入，我这里输入【7000】5、输入http通信端口，我这里输入【8880】（重要）6、输入https通信端口，我这里输入【8443】（重要）7、输入frp信息面板端口，我这里输入【8444】8、分别输入管理面板用户名和密码，例如用户名为admin，管理密码为admin。9、输入通信密码，我这里输入去、12345678（重要）10、设置域名，如果有就填写，没有就默认IP，这里我选择默认。11、接下来的步骤一路默认敲击回车就行 12、出现这个界面核对之前输入的信息是否正确，然后继续下一步。13、稍等片刻，会出现如下界面。14、登陆腾讯云控制台找到【防火墙设置】开放4、5、6、7步骤的端口，这里我开放【7000】【8880】【8443【8444】】端口。（多个端口请用英文输入状态下的,隔开）15、 浏览器输入域名（ip）:端口号，如果出现下面网页说明后台搭建成功，这里我输入 http://152.136.119.20:8444 用户名和密码为步骤8设置。服务器端成功部署完成，总体来说使用一键脚本部署还是非常简单的，感谢一键脚本的开发作者。群辉客户端1、登录群辉，打开file station在docker目录下新建frp文件夹，在桌面新建立一个文本文档，然后将文本文档拖动到frp目录中。2、 双击文本文档，粘贴下如下命令，请根据自己情况灵活改变配置，这里举两个例子，一个是使用http协议访问NAS，一个是使用tcp协议登录ssh，然后ctrl+s保存，将文件重命名为frpc.ini。[common] # 服务器ip server_addr = 152.136.119.20 token = 12345678 # 端口 server_port = 7000 #名字,自定义 [nas] # 类型 type = tcp # 局域网内设备ip local_ip = 192.168.31.11 # 局域网内设备端口 local_port = 5000 # 监听端口*可以修改为任意字母，等号后面的数字 remote_port = 5002 #名字,自定义 [ssh] # 类型 ssh类型为tcp type = tcp # 局域网内设备ip local_ip = 192.168.31.11 # 局域网内设备端口 local_port = 22 # 监听端口*可以修改为任意字母，等号后面的数字注意：所有监听端口都需要在服务区防火墙中开放。 3、 打开群辉docker→注册表搜索'stilleshan'选择stilleshan-frpc下载镜像,下载好以后再镜像中启动。4、 下载完成以后启动映像，容器名称默认，勾选使用高级权限执行容器，然后点击高级设置。5、 按照下面设置。 高级设置：勾选启用自…

『笔记』『教程』自制随机显示必应每日一图，以及API代码及调用方法
type: item
date: 2022-09-09T10:53:00+08:00
description: 前言主题有好多模板设置了分类的背景图，调用了第三方api但是最近第三方挂了这就是图省事不写代码的后果，一旦图片都失效，网站打开速度慢不说，图片的背景图还是灰蒙蒙一片，非常尴尬。。。百度了下必应每日api源代码有很多，但是随机显示的也都是调用人家自己的，这样就可能再次出现无法打开的情况，但是仅仅调用一张图片又略显单调（最烦我这种啥也不是，要求还多的人。。。）终于皇天不负有心人让我找到了一个随机显示必应图片的api调用方法，附上代码及适用教程。调用方法(教程和代码在下方)此API只支持https调用，所有参数均仅适用于以 GET 方式进行请求，可直接插入img标签中请求地址：（不要适用本站api代码，跨域）https://www.hellolin.cn/api-hello/bing调用参数参数代码参数含义可用参数rand是否随机显示最近8天内的图片true or falseday显示指定的最近图片-1，0，1，2，3，4，5，6，7(0为今天，-1为昨天)size指定获取图片大小详见下方可用分辨率info获取图片基础信息（json格式）true or false以上所有参数均非必要，默认参数为rand=false，day=0，size=1920×1080，info=false可用分辨率1920x10801366x7681280x7681024x768800x600调用示例默认调用：https://www.hellolin.cn/api-hello/bing不带任何参数调用，显示必应当天图片。Info调用：https://www.hellolin.cn/api-hello/bing?info=true返回值：{ title:Micheldever Wood的蓝铃花，英国汉普郡 (© Hursley/Getty Images Plus), url:https://www.bing.com/th?id=OHR.BluebellWood_ZH-CN8128422960_1920x1080.jpg, link:https://www.bing.com/search?q=%E8%93%9D%E9%93%83%E8%8A%B1&form=hpcapt&mkt=zh-cn, time:20200419 }随机调用:(随机显示一张图片)https://www.hellolin.cn/api-hello/bing?rand=true {mtitle title="随机显示，刷新更换"/}教程和API代码{hide}首先在网站根目录新建一个php文件，例如：index.php，然后粘贴如下代码：<?php //判断是否随机调用 if ($_GET['rand']==='true') { $gettime = rand(-1,7); }else{ //若不为随机调用则判断是否指定日期 $gettimebase = $_GET['day']; if (empty($gettimebase)) { $gettime = 0; }else{ $gettime = $gettimebase; } } //获取Bing Json信息 $json_string = file_get_contents('https://www.bing.com/HPImageArchive.aspx?format=js&idx='.$gettime.'&n=1'); //转换为PHP数组 $data = json_decode($json_string); //提取基础url $imgurlbase = "https://www.bing.com".$data->{"images"}[0]->{"urlbase"}; //判断是否指定图片大小 $imgsizebase = $_GET['size']; if (empty($imgsizebase)){ $imgsize = "1920x1080"; }else{ $imgsize = $imgsizebase; } //建立完整url $imgurl = $imgurlbase."_".$imgsize.".jpg"; //获取其他信息 $imgtime = $data->{"images"}[0]->{"startdate"}; $imgtitle = $data->{"images"}[0]->{"copyright"}; $imglink = $data->{"images"}[0]->{"copyrightlink"}; //判断是否只获取图片信息 if ($_GET['info']==='true') { echo "{title:".$imgtitle.",url:".$imgurl.",link:".$imglink.…

『原创』『教程』为你的博客添加阅读模式（适配Joe，其他主题也可用）
type: item
date: 2022-08-22T11:04:00+08:00
description: 前言我又来拔flag了，最近立了好多flag，但是最近重庆太热了，不想写文章（其实就是懒了）既然给小伙伴立了flag，还是要说到做到，不然没有小伙伴来玩了。这个功能也是xcshare定制的功能，但是我还是分享出来吧成果展示教程开始一、添加后台开关一样的，还是在 Joe/functions.php 里添加（也可以在 Joe/public/custom.php 里添加，前提是你创建并引用了这个文件）// 是否启用阅读模式 $ReadBook = new Typecho_Widget_Helper_Form_Element_Select( 'ReadBook', array( 'off' => '关闭（默认）', 'on' => '开启'), 'off', '请选择是否启用阅读模式', '介绍：开启后，文章页可以进入阅读模式' ); $ReadBook->setAttribute('class', 'joe_content joe_custom'); //没有joe_custom就改成joe_other $form->addInput($ReadBook->multiMode());二、添加开关按钮在 Joe/public/footer.php 的 内部添加以下代码 <?php if ($this->options->ReadBook === 'on' && $this->is('post')) : ?> <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" fill="var(--minor)" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path> <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.6…

『原创』『教程』给自己博客的侧栏增加社交信息，方便业务（PY）联系
type: item
date: 2022-03-16T20:11:00+08:00
description: 前言前不久突发奇想，录了一个视频然后留了自己的博客，却发现博客却没有链接回去的方式，所以就写了一个社交信息的侧栏模块然后有小伙伴看到了，专门留言让我出个教程，当时答应的好好的，可是一连鸽了好几天，今天进入留言板看到许诺的话，不禁老脸一红，差点忘了这茬了 ::(狂汗) 成果展示博客的侧栏增加社交信息2.0 这个模块适合任何主题及程序，只需要根据自己的主题或者程序进行改进就行我这里演示的是我正在使用的Joe主题，是一款轻量、开源的主题{tabs}{tabs-pane label="PC展示"}{/tabs-pane}{tabs-pane label="PE展示"}{/tabs-pane}{/tabs}教程开始一、添加PC端打开 Joe/public/aside.php 文件，然后在想要增加的位置添加以下代码{tabs}{tabs-pane label="代码"}{hide} <?php if ($this->options->SocialInfo && (($this->options->SocialSwitch === 'on') || ($this->options->SocialSwitch === 'on2'))) : ?> <?php $SocialInfo = $this->options->SocialInfo; if ($SocialInfo) { $SocialInfo_arr = explode("\r\n", $SocialInfo); if (count($SocialInfo_arr) > 0) { for ($i = 0; $i < count($SocialInfo_arr); $i++) { $QQ = explode("||", $SocialInfo_arr[$i])[0]; $WeChat = explode("||", $SocialInfo_arr[$i])[1]; $BiliBili = explode("||", $SocialInfo_arr[$i])[2]; $Weibo = explode("||", $SocialInfo_arr[$i])[3]; } } } ?> <a href="https://wpa.qq.com/msgrd?v=3&uin=<?php echo trim($QQ) ?>&site=qq&menu=yes" target="_blank" title="QQ"> <img src="<?php echo trim($WeChat) ?>" /> <a href="https://space.bilibili.com/<?php echo trim($BiliBili) ?>" target="_blank" title="哔哩哔哩"> <a href="https://weibo.com/u/<?php echo trim($Weibo) ?>" target="_blank" title="微博"> <?php endif; ?>{/hide}{/tabs-pane}{tabs-pane label="位置"}{/tabs-pane}{/tabs}二、添加PE端打开 Joe/public/header.php 文件，然后在想要增加的位置添加上面PC的代码PE端的代码和上面的一样，只需要将 换成 三、添加后台直接在 Joe/functions.php 添加以下代码（当然，如果看过我之前的文章，也可以放在 Joe/public/custom.php 里面）// 侧栏社交信息开关 $SocialSwitch = new Typecho_Widget_Helper_Form_Element_Select( 'SocialSwitch', array( 'off' => '关闭（默认）', 'on' => '开启PC社交信息', 'on1' => '开启PE社交信息', 'on2' => '同时开启PC与PE社交信息', ), 'off', '是否启用侧栏社交信息', '介绍：开启后，侧栏展示社交信息功能（必须填写下面的侧栏社交信息）' ); $SocialSwitch->setAttribute('class', 'joe_content joe_custom'); //没有custom.php就把joe_custom改成joe_other $form->addInput($SocialSwitch->multiMode()); //侧栏社交信息 $SocialInfo = new Typecho_Widget_Helper_Form_Element_Textarea( 'SocialInfo', NULL, NULL, '侧栏社交信息', '介绍：用于设置侧…

『笔记』JavaScript进阶学习笔记 0
type: item
date: 2021-11-22T14:18:00+08:00
description: 数据类型1、分类基本（值）类型{alert type="info"}String：任意字符串Number：任意的数字Boolean：true/falseundefined：undefinednull ：null{/alert}对象（引用）类型{alert type="info"}object ：任意对象function ：函数，一种特别的对象（可以执行）array ：数组，一种特别的对象（数值具有下标，内部数据是有序的）{/alert}2、类型的判断{alert type="success"}typeof ：可以判断 undefined/ 数值 / 字符串 / 布尔值Boolean / Function -不能判断 null和object object和arrayinstanceof ：判断对象的具体类型=== ：全等，可以判断undefined,null{/alert} 1、undefined与null的区别？undefined 代表定义未赋值null 代表定义并赋值了，但是值为null2、什么时候给变量赋值为null？初始赋值：表明将要赋值为对象结束前：让对象成为垃圾对象（垃圾回收）3、严格区别变量类型与数据类型？（1）数据的类型基本类型对象类型（2）变量的类型（变量内存值的类型）基本类型：保存的基本类型的数据引用类型：保存的是地址值对象类型即是引用类型 数据、变量、内存定义1、什么是数据存储在内存中代表特点信息的东西，本质上是0101.......数据的特点：可传递、可运算2、什么是内存内存条通电以后产生的可存储数据的空间（临时的）内存产生和死亡： 内存条（电路板）==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失一块小内存的2个数据 `内部存储的数据` `地址值`内存分类 `栈：保存全局变量/局部变量（变量名）` `堆：对象（函数、数组）` 3、什么是变量可变化的量：由变量名、变量值组成每个变量都对应一块小内存，变量名用来查找对应的内存，变量值就是内存中保存的数据4、内存、数据、变量三者之间的关系内存是用来存储数据的空间变量是内存的标识

『笔记』JavaScript基础学习笔记 6
type: item
date: 2021-11-17T21:32:00+08:00
description: DOM（文本对象模型）（20）鼠标拖拽的事件拖拽(一、二) 我是一段文字 box的偏移量=鼠标的偏移量-元素的偏移量捕获测试 按钮01 按钮02 拖拽（三） 我是一段文字 <img src="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/08/809131067.png" id="img1" style="width:100px; position:absolute;" （21）滚轮的事件 （22）键盘的事件 <!-- --> 键盘移动vid {nextPage/}BOM（浏览器对象模型）BOM可以通过JS来操作浏览器在BOM中提供了一组对象，用来完成对浏览器的操作BOM对象{alert type="success"}Window 代表的是整个浏览器的窗口，同时也是网页中的全局对象Navigator 代表当前浏览器的信息，通过该对象可以识别不同的浏览器Location 代表当前浏览器的地址栏信息，通过location可以获取地址栏信息或者操作浏览器跳转页面History 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问有效Screen 代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息这些BOM对象在浏览器中都是作为window对象的属性保存的{/alert}// console.log(window.navigator); console.log(navigator); console.log(location); console.log(history);一、Navigator（浏览器信息）代表当前浏览器的信息，通过该对象可以识别不同的浏览器由于历史原因（网景公司倒闭了），Navigator对象中的大部分属性都已经不能识别浏览器了一般只会使用userAgent来判断浏览器的信息userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent// appCodeName 返回浏览器名称的代码 // appName 返回浏览器的名称 // userAgent 返回一个字符串来描述浏览器的信息 // alert(navigator.appName); // 在IE11中已经将微软和IE相关的标识都去除了，所以基本不能通过userAgent来识别浏览器是不是IE了 var ua = navigator.userAgent; console.log(ua); if(/firefox/i.test(ua)){ alert("我是火狐"); }else if(/chrome/i.test(ua)){ alert("我是Chrome"); }else if(/msie/i.test(ua)){ alert("我是IE浏览器"); }else if("ActiveXObject" in window){ alert("你是IE11，我已经抓住你了"); } // 如果不能通过userAgent来判断浏览器信息，还可以通过一些浏览器中特有的对象来判断浏览器的信息 // 比如：ActiveXObject // alert("ActiveXObject" in window); if("ActiveXObject" in window){ alert("你是IE，我已经抓住你了"); }else{ alert("你不是IE"); } 二、History（历史记录）代表浏览器的历史记录，可以通过该对象来操作浏览器向前或向后翻页 点我一下 History 去下一个页面 三、Location（浏览器地址栏）该对象中封装了浏览器的地址栏的信息 点我一下 四、Window（浏览器的窗口）window的方法1、 定时调用 （1）切换图片练习 开始 停止 （2）修改div移动练习 2、 延时调用 （1）定时器的应用一 点击按钮以后box1向右移动 {nextPage/}（2）定时器的应用二 点击按钮以后box1向右移动 点击按钮以后box1向左移动 （3）定时器的应用三 点击按钮以后box1向右移动 点击按钮以后box1向左移动 点击按钮以后box2向右移动 测试按钮 tools.js（用于存放工具程序） // 尝试创建一个可以执行简单动画的函数 // 参数:obj:要执行动画的对象 // attr:要执行动画的样式，比如left height top // target:执行动画的目标位置 // speed:移动的速度（正数向右移动，负数向左移动） // callback:回调函数，将会在动画执行完毕以后执行 f…

『笔记』JavaScript基础学习笔记 5 — DOM（文本对象模型）
type: item
date: 2021-11-16T16:02:00+08:00
description: DOM（文档对象模型）1、DOM的简介（1）什么是DOM：DOM：文档对象模型（Document Object Model） （2）模型：（3）节点：节点的类型节点的属性例： 我是一个按钮 （4）事件（Event）事件：就是用户和浏览器之间的交互行为可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码将会执行onclick 点击一次、ondblclick点击两次可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用 <!-- 我是一个按钮 --> 我是一个按钮 （5）文档的加载浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行将js代码编写到页面的下部是为了可以在页面加载完毕后再执行js代码onload事件会在整个页面加载完毕后才触发可以为window绑定一个onload事件，可以确保代码执行时所有的DOM对象都已经加载完毕了 点我一下 2、DOM查询（1）获取元素节点window.onload = function(){ //为id为btn01的按钮绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ var bj = document.getElenmentById("bj"); //打印bj //innerHTML 通过这个属性可以获取到元素内部的html代码 alert(bj.innerHTML); }; //为id为btn01的按钮绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ //查找所以li节点 //getElementsByTagName()可以根据标签名来获取一组元素节点对象 //这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中 //即使查询到的元素只有一个也会封装到一个对象中 var lis = document.getElenmentsByTagName("li"); //打印lis //alert(lis); //变量lis for(var i=0; i<lis.length; i++){ alert(lis[i].innerHTML); } }; //为id为btn03的按钮绑定一个单击响应函数 var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ //查找name=gender的所有节点 var inputs = document.getElenmentsByNmae("gender"); //alert(inputs.length); for(var i=0; i<inputs.length; i++){ //对于自结束标签，innerHTML无效 //alert(inputs[i].innerHTML); //如果需要读取元素节点属性直接使用：元素.属性名 //class属性不能采用这种方式，读取class属性时需要使用：元素.className alert(inputs[i].value); alert(inputs[i].name); alert(inputs[i].className); } }; };（2）图片切换的练习 <mata charset="UTF-8"> 上一张 下一张 （3）获取元素节点的子节点window.onload = function(){ //为id为btn04的按钮绑定一个单击响应函数 var btn04 = document.getElementById("btn04"); btn04.onclick = function(){ //获取id为city的元素 var city = document.getElementById("city"); //查找#city下所有的li节点 var lis = city.getElementsByTagName("li"); for(var i=0; i<lis.length; i++){ alert(lis[i].innerHTML); } }; //为id为btn05的按钮绑定一个单击响应函数 var btn05 = document.getElementById("btn05"); btn05.onclick = function(){ //返回id为city的节点 var city = document.getElementById("city"); //返回#city下所有子节点 //childNod…

『笔记』JavaScript基础学习笔记 4
type: item
date: 2021-11-10T16:22:00+08:00
description: 内建对象二、函数的方法1、 call() 和 apply(){alert type="success"}这两个方法都是函数对象的方法，需要通过函数对象来调用当对函数调用call()和apply()都会调用函数执行在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的 thiscall()方法可以将实参在对象之后依次传递apply()方法需要将实参封装到一个数组中统一传递{/alert}this的情况：{alert type="error"}以函数形式调用时，this永远都是window以方法的形式调用时，this是调用方法的对象以构造函数的形式调用时，this是新创建的那个对象使用call()和apply()调用时，this是指定的那个对象{/alert}function fun(){ // alert(this.name); console.log("a="+a); console.log("b="+b); } var obj = { name:"obj", sayName:function(){ alert(this.name); } }; // fun.call(); // fun.apply(); // fun(); fun.call(obj,2,2); fun.apply(obj,[2,3]); var obj2 = { name:"obj2" }; fun.call(obj); fun.apply(obj2); // fun(); //this为window obj.sayName.apply(obj2); 三、 arguments 对象在调用函数时，浏览器每次都会传递进两个隐含的参数函数的上下文对象this封装实参的对象argumentsarguments是一个类数组对象，可以通过索引来操作数据，也可以获取长度在调用函数时，所传递的实参都会在arguments中保存arguments.length可以用来获取实参的长度即使不定义形参，也可以通过arguments来使用实参arguments[0]表示第一个实参arguments[1]表示第二个实参。。。。。。arguments里面有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象function fun(){ // console.log(arguments instanceof Array); // console.log(Array.isArray(arguments)); // console.log(arguments.length); // console.log(arguments[1]); console.log(arguments.callee); } fun("hello",true);四、 Date对象在JS中使用Date对象来表示一个时间{alert type="success"}如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数日期的格式： 月份/日/年份 时:分:秒 {/alert}{alert type="error"}getDate() 获取当前日期对象是几日getDay() 获取当前日期对象是周几， 会返回0-6的值，0表示周日getMonth() 获取当前时间对象的月份， 会返回0-11的值，0表示1月.....11表示12月getFullYear() 获取当前时间对象的四位数年份getTime() 获取当前日期对象的时间戳时间戳，指的是从格林威治标准时间的1970年1月1日0时0分0秒到当前日期所花费的毫秒数 （1秒=1000毫秒）计算机底层在保存时间时使用的都是时间戳可以使用时间戳来测试代码执行的性能{/alert}//创建一个Date对象 var d = new Date(); //创建一个指定的时间对象 var d2 = new Date("12/03/2016 11:10:30") var date = d2.getDate(); var day = d2.getDay(); var month = d2.getMonth(); var year = d2.getFullYear(); var time = d2.getTime(); console.log("date="+date); console.log("day="+day); console.log("month="+month); console.log("year="+year); console.log("time="+time/1000/60/60/24/365); var d3 = n…

『笔记』JavaScript基础学习笔记 3
type: item
date: 2021-11-01T16:52:00+08:00
description: this解析器（浏览器）在调用函数时每次都会向函数内部传递进一个隐含的参数1、this的定义{alert type="success"}这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象根据函数的调用方式的不同，this会指向不同的对象1、 以函数的形式调用时，this永远都是window2、 以方法的形式调用时，this就是调用方法的那个对象 {/alert}function fun(){ //console.log("a=" +a+",b="+b); console.log(this.name); } fun();//输出object.window //创建一个对象 var obj = { name:"孙悟空", sayName:fun }; var obj2 = { name:"沙和尚", sayName:fun }; //console.log(obj.sayName == fun);//输出true var name = "全局的name属性" obj.sayName();//输出object.object [name:"孙悟空",sayName:fun] //以函数形式调用,this时window fun(); //以方法的形式调用，this是调用方法的对象 obj.sayName(); obj2.sayName();2、this补充//创建一个name变量 var name = "全局"; //创建一个fun()函数 function fun(){ console.log(this.name); } //创建两个对象 var obj = { name:"孙悟空", sayName:fun }; var obj2 = { name:"沙和尚", sayName:fun }; //调用obj.sayName()时输出obj的名字 obj.sayName();//输出 孙悟空 obj2.sayName();//输出 沙和尚对象1、使用工厂方法创建对象可以使用该方法大批量创建对象使用工厂方法创建的对象使用的构造函数都是Object所以创建的对象都是Object类型，导致无法区分出多种不同类型的对象function createPerson(name,age,gender){ //创建一个新的对象 var obj = new Object(); //向对象中添加属性 obj.name = name; obj.age = age; obj.gender = gender; obj.sayName = function(){ alert(this.name); } //将新的对象返回 return obj; } var obj2 = createPerson("猪八戒",18,"男"); var obj3 = createPerson("白骨精",17,"女"); var obj4 = createPerson("蜘蛛精",16,"女"); console.log(obj2); console.log(obj3); console.log(obj4); obj2.sayName();2、构造函数{alert type="success"}构造函数就是一个普通函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写构造函数和普通函数的区别就是调用的方式不同，普通函数是直接调用， 而构造函数需要使用 new 关键字俩调用使用同一个构造函数创建的对象称为一类对象，也将一个构造函数称为一个类将通过一个构造函数创建的对象称为该类的实例 {/alert}构造函数的执行流程： {alert type="warning"}立刻创建一个新的对象将新建的对象设置为函数中的this逐行执行函数中的代码将新建的对象作为返回值返回{/alert}使用同一个构造函数创建的对象，称为一类对象，也将构造函数称为一个类{alert type="success"}通过一个构造函数创建的对象，称为该类的实例{/alert}使用instanceof可以检查一个对象是否是一个类的实例 语法： 对象 instanceof 构造函数 {alert type="success"}如果是返回true，否则返回false所有的对象都是Object的后代任何对象和Object作instanceof检查时都会返回true {/alert}//创建一个构造函数，专门用来创建Person对象 var per = new Person(); function Person(name,age,gender){ this.name = name; this.age = age; this.gender = gender; this.sayNm…

『笔记』JavaScript基础学习笔记 2
type: item
date: 2021-10-25T11:43:00+08:00
description: 对象JS中的数据类型{alert type="success"}String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义以上五种类型属于基本类型，只要不是以上五种，都是对象Object 对象{/alert}基本数据类型都是单一的值，值和值之间没有任何联系在JS中用来表示一个人的信息（name gender age）var name="张三"; var gender="男"; var age="18";如果使用基本数据类型，创建的变量都是独立的，不能成为一个整体对象属于一种复合的数据，在对象中可以保存多个不同数据类型的属性一、对象的分类1、内建对象{alert type="success"}由ES标准中定义的对象，在任何的ES的实现中都可以使用比如：Math String Number Boolean Function Object……{/alert}2、宿主对象{alert type="success"}由JS的运行环境提供的对象，主要由浏览器提供的对象比如：BOM(浏览器对象模型) DOM(文档对象模型){/alert}console.log(); document.write(); //都是由浏览器提供3、自定义对象{alert type="success"}由开发人员自己创建的对象{/alert}二、创建对象1、 使用 new 关键字调用的函数，是构造函数constructor2、 构造函数是专门用来创建对象的函数3、 使用typeof来检查一个对象时，会返回object{alert type="warning"}在对象中保存的值称为属性向对象添加属性，语法： 对象.属性名=属性值; {/alert}var obj = new Object(); //console.log(typeof obj); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; console.log(obj);{alert type="warning"}读取对象中的属性语法： 对象.属性名; 如果读取对象中没有的值，不会报错而是会返回undefined{/alert}var obj = new Object(); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; console.log(obj.name);//输出“张三”{alert type="warning"}修改对象中的属性语法： 对象.属性名 = 新值; {/alert}var obj = new Object(); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; //修改obj的name属性值 obj.name="孙悟空" console.log(obj.name);//输出“孙悟空”{alert type="warning"}删除对象中的属性语法： delete 对象.属性名; {/alert}var obj = new Object(); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; //删除obj的name属性值 delete obj.name; console.log(obj.name);//没有该值，输出undefined三、属性名和属性值1、属性名对象的属性名不强制要求遵守标识符的规范尽量按照标识符的规范设置{alert type="success"}如果使用特殊的属性名，不能采用.的方式来操作需要使用另一种方式，语法： 对象["属性名"]=属性值;读取时也需要采用这种方式使用[]这种形式去操作属性更加灵活在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性{/alert}var obj = new Object(); obj["123"]=567; obj["nihao"]="你好"; var n = "nihao" console.log(obj["123"]); console.log(obj[n]); 2、属性值JS对象的属性值，可以是任意的数据类型， 甚至也可以是一个对象 {alert type="warning"}in 运算符通过该运算符可…