摘要:Ipv4的地址是0.0.0.0 到 255.255.255.255, 匹配这个字段需要判断三种情况: 1. 如果第一位是0或1, 则第二位和第三位可以是0-9的任意数值: 2. 如果第一位是2, 第二位是0-4, 那第三位可以是0-9的任意数值: 3. 如果第一位是2, 第二位是5, 那第三位只能是
阅读全文
摘要:function test(a, b){ if (arguments.length add.length) { console.log("形参和实参个数相等"); } else { console.log("形参和实参个数不等"); } } test(1); // "形参和实参个数不等"
阅读全文
摘要:目前主流的操作系统有三个: Windows / MacOS / Linux. 想要用JavaScript判断其所在的操作系统可以通过: navigator.platform 实现; 返回值一般有下面三种: 1. Windows: "Win32" 2. MacOS: "MacIntel" 3. Lin
阅读全文
摘要:首先, 我们可以获取浏览器安装的所有在插件: navigator.plugins 它会返回一个类似数组的对象, 包含所有已安装插件的具体信息. 然后我们可以通过正则去判断这些插件里是否有flash:
阅读全文
摘要:可以通过检测navigator.userAgent字段中是否有"mobi"字段来检测是PC浏览器还是手机浏览器:
阅读全文
摘要:需要使用iframeElement.contentWindow;
阅读全文
摘要:如果脚本网址与网页网址不在同一个域(比如使用了 CDN), 那如果这个脚本执行报错了, 就会报:Script error. 由于同源策略, 浏览器禁止向外部脚本泄漏信息, 因此不会提供完整的报错信息, 而是报一个 “Script error.”,行号为0,其他信息都没有. 一种解决方法是: 在脚本所
阅读全文
摘要:使用window.onload属性可以监听完档载入完成的load事件.
阅读全文
摘要:方法1: 使用setTimeout(); 方法2: 使用window.requestAnimationFrame(); 两者区别: setTimeout()需要手动设置延迟时间, 而requestAnimationFrame()则是会推迟到浏览器下一次重流时执行. 因此, 前者比较通用, 后者主要是
阅读全文
摘要:可以在网页onload时存一个当前时间的时间戳, 后面需要用到时再用当前时间戳相减得到, 但还有更好的办法: performance.now() 会返回一个高精度的时间戳, 用于表示当前网页的加载时间.
阅读全文
摘要:就是按住鼠标左键以后拖动选中的文本, 可以通过window.getSelection()方法获取;
阅读全文
摘要:使用window.print()可以调出打印界面, 功能和Ctrl + p 效果是一样的. 但手机浏览器没有打印功能, 所以可以加一个判断条件, 先判断window.print()方法是否存在, 若true, 则打印:
阅读全文
摘要:取余用: % 取整用: parseInt() 或 Math.floor();
阅读全文
摘要:元素节点的滚动有三种方法: 1. Element.scrollTop, 表示滚动到距离顶部多少像素 2. Element.scrollLeft, 表示滚动到距离左边多少像素 3. Element.scrollIntoView() 表示滚动到和页面的可视区域, 即视口, 和锚点定位类似.
阅读全文
摘要:有三个方法和页面滚动相关: 1. window.scrollTo() 函参是两个数值, 单位为px, 表示从网页左上角为零点的x轴和y轴滚动距离, 下面代码表示将页面滚动至顶部: 此外, 这个方法还可以像下面这样使用: 2. window.scroll() 是 window.scrollTo() 的
阅读全文
摘要:一般来说是无法移动的, 只有使用window.open()创建的网页窗口才可以移动, 并且它所在的 Tab 页是当前窗口里面唯一的, 这时才能移动这个窗口. 移动的方法有两种: 1. window.moveTo(), 接收两个整数类型的参数, 表示移动的x和y轴坐标, 以屏幕左上角为xy零点: 2.
阅读全文
摘要:1. window.open() 可以打开一个网页窗口, 参数设置方法很多, 这里就不演示了. 2. window.close() 可以关闭一个网页窗口, 一般是用来关闭使用window.open()打开的网页窗口. 3. window.stop() 可以中止当前页面加载, 会停止加载图像、视频等正
阅读全文
摘要:浏览器默认的对话框有三种: 1. window.alert(), 一段话+一个确定按钮 2. window.prompt(), 一段话 + 一个输入框 + 一个确定按钮 + 一个取消按钮 3. window.confirm(), 一段话 + 一个确定按钮 + 一个取消按钮
阅读全文
摘要:即: https:// 为加密环境, http:// 为非加密环境. 需要使用window.isSecureContext; 如果是https, 则返回true, 反之返回false;
阅读全文
摘要:第一组: window.screenX 和 window.screenY, 只读, 返回浏览器窗口左上角与屏幕左上角的水平距离和垂直距离(单位像素); 第二组: window.innerHeight 和 window.innerWidth, 只读, 返回视口的宽高. 第三组: window.oute
阅读全文
摘要:所谓设备像素比率, 指的是一个CSS像素点大小与一个物理像素点大小的比值, 这个比值越大, 表示屏幕呈现的内容越高清. 可以通过window.devicePixelRatio来获取.
阅读全文
摘要:需要在框架窗口中使用: window.top
阅读全文
摘要:注意, 这里的window.frameElement只在frame或iframe中才有效, 如果是在window中直接使用, 则返回null
阅读全文
摘要:需要使用window.length, 或者window.frames.length; 如果页面中不包含frame和iframe元素, 则返回0;
阅读全文
摘要:1. 使用window.self 2. 使用window.window 3. 使用window.globalThis 4. 在全局环境直接使用this 5. 使用window.frames 6. 使用window.top 7. 在没有框架窗口的页面中可以使用window.parent;
阅读全文
摘要:方法1. 在子窗口手动将window.opener设置为null 方法2. 给 a 元素 添加 rel = "noopener" 属性, 可以防止新打开的窗口获取父窗口的全局属性和方法
阅读全文
摘要:使用 window.open(window.opener.origin); window.opener;属性表示父窗口的相关信息, 是从子窗口获取父窗口信息的一种方法. 如果一个窗口没有父窗口, 那window.opener会返回null. 下面代码可以从子窗口获取父窗口设置的window.name
阅读全文
摘要:使用window.closed; 属性可以检测当前窗口是否关闭, 由于代码是运行在这个窗口中的, 因此只要能运行, 那就说明是没有关闭的. 因此这个属性多用于检测window.open()所创建的窗口是否关闭;
阅读全文
摘要:window.name表示当前窗口的名字, 而非网页的名字, 网页的名字需要使用: document.title; window.name一般是空的字符串, 他的作用其实是配合配合超链接和表单的target来使用的, 也就是跳转时将当前窗口的信息带过去. 只要这个窗口不关闭, 那从这个窗口打开的其他
阅读全文
摘要:下面是一些相关概念: 1. 重流: reflow, 重绘: repaint 2. 重流必定导致重绘, 重绘不一定重流 3. 布局改变会发生重流, 元素颜色等改变只会发生重绘 下面是通过减少重流/重绘次数而优化页面性能的一些手段: 1. 减少js中的dom操作, 若必须, 则尽量将读取dom和写入do
阅读全文
摘要:浏览器内核可以分为两部分: 1. 渲染引擎 2. JS引擎 渲染引擎的作用是将html代码和css代码解析为用户看到的网页. JS引擎的作用是读取网页中的js代码并执行它. 下面是常见的渲染引擎和JS引擎: 浏览器名称 渲染引擎 JS引擎 Firefox Gecko SpiderMonkey Saf
阅读全文
摘要:所谓"脚本的动态加载", 指的是的在执行js代码时, 动态地加载并执行其他的js脚本. 因此我们需要在js中动态地创建<script>标签, 并引入脚本文件, 如下: 注意: 通过这种方式动态加载的脚本是不会阻塞页面渲染的, 但执行顺序无法保证, 那个脚本先下载完成就会先执行哪个脚本. 如果需要按顺
阅读全文
摘要:如果script标签是引用的外部js文件, 那就会有一个下载js文件这一过程, 为了不因为这个下载过程而阻塞页面解析与渲染, 我们需要一种机制来解决这一问题, 方法之一就是使用 defer和async属性. 方法1. 使用 defer属性 defer属性的作用是延迟脚本的执行, 只有等到DOM生成之
阅读全文
摘要:有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错: 上图所示的代码表明, 如果js代码在页面DOM没有解析出来时, document无法获取body元素, 这样就会造成报错. 解决方法有下面两种: 1. 将操作dom的代码放到body标签底部: 2. 使用
阅读全文
摘要:我们可以把网页的加载过程理解为: 下载与解析. 这两个过程是同时进行的, 也就是说, .html文件还没下载完, 解析已经开始了. 大致的加载流程如下: 1. 浏览器边下载html文件, 边解析其内容. 2. 解析过程中发现有script标签时, 会暂停dom和css解析, 转而交给js引擎去处理.
阅读全文
摘要:有四种方法: 方法1: 在<script>标签内直接写代码 方法2: 在使用<script>标签的src属性引入外部js文件 方法3: 通过事件属性 方法4: 使用URL协议
阅读全文
摘要:1. 向上取整使用: Math.ceil() 2. 向下取整使用: Math.floor() 3. 四舍五入取整使用: Math.round() 4. 保留n位小数使用: Number().toFixed(n) 5. 生成区间随机数使用Math.random();
阅读全文
摘要:使用Object.keys()可以获取对象本身所有的可遍历属性; 使用Object.getOwnPropertyNames()可以获取对象本身所有属性, 不管是否可遍历; 使用for...in...循环可以获取对象所有可遍历属性, 包括本身的属性和继承的属性; 使用下面的函数可以获取对象的所有属性,
阅读全文
摘要:有两种方法, Object.getOwnPropertyNames() 和 Object.keys() 第一种: Object.getOwnPropertyNames(obj)只获取参数对象本身定义的属性, 不论这个属性是否可遍历. 第二种: Object.keys()只获取参数对象本身定义的属性,
阅读全文
摘要:这里仅整理一个思路, 日后会详细补充. 1. 首先得下载 wordpress安装包, 上传到服务器上的 /var/www/html, 然后解压. 2. 然后安装apache 并启动, 启动一般是使用: systemctl start httpd.service 命令. 3. 在浏览器访问: ip/主
阅读全文
摘要:这个问题是谷歌基于用户体验方面的考虑, 对页面加载时自动播放的音频作了限制, 试想一下, 如果你打开某个页面就立刻自动播放某种不可描述的声音, 那体验想必是十分酸爽. 尽管这个设定是针对音频的, 但实际上还影响了视频的自动播放, 因为视频也是有声音的!!!! 因此, 解决这个报错的方法很简单: 将给
阅读全文
摘要:1. 使用Object.prototype.constructor.prototype进行比较 2. 使用: Object.prototype.isPrototypeOf()进行比较 注意, 这个方法和 instanceof 有点类似, 他的判断逻辑也是往参数对象原型链去找的, 因此就有了下面这些判
阅读全文
摘要:Object.create()是一个用于生成新的对象的方法, 特点是: 1. Object.create()接收的第一个参数对象将会作为待生成的新对象的原型对象; 2. Object.create()接收的第二个参数是一个属性描述对象, 用于给新生成的对象添加实例方法和属性; 3. Object.c
阅读全文
摘要:使用: Object.create(null)生成的空对象在原型对象上也没有任何属性和方法.
阅读全文
摘要:Object.create()会将参数对象作为一个新创建的空对象的原型, 并返回这个空对象, 基于这个功能, 就有了下面这个Object.create()的手动实现:
阅读全文
摘要:1. 使用 Object.getPrototypeOf(); 2. 使用 obj.constructor.prototype; 3. 使用obj.__proto__; 三种方法中, 第一种是最靠谱的, 后面两种都不太靠谱.
阅读全文
摘要:封装/继承/多态是面向对象编程的三个特征, js中实现构造函数的继承需要分两步实现: 1. 在子类构造函数中调用父类的构造函数; 2. 让子类的原型对象"复制"父类的原型对象; 下面是一个具体的例子:
阅读全文
摘要:js不提供现成的多重继承的方法, 但可以通过Object.assign()来手动实现:
阅读全文
摘要:修改原型对象的方法分为两种情况, 一种是对原型对象的属性方法做增删改, 一种改变原型对象的指向. 第一种: 对原型对象的属性/方法做增删改 第二种: 改变原型对象的指向 以下代码中, 我们如果要整个改变原型对象的指向, 那目标对象中必须要有一个constructor属性, 值为这个原型对象关联的构造
阅读全文
摘要:通过obj.constructor.name获取当前实例对象的构造函数名;
阅读全文
摘要:emmm, 其实就是通过实例对象的constructor属性来new一个新的实例出来.. 这是一种不直接使用构造函数, 但可以生成实例对象的方法.
阅读全文
摘要:上面这段代码表明: prototype对象的constructor属性指向当前实例对象的构造函数. 也就是说, constructor属性其实是反映了实例对象与构造函数之间的关系, 就好比是给孩子做DNA鉴定, 我们可以通过constructor这个属性来检测当前实例对象是哪个构造函数"生"的.
阅读全文
摘要:通过构造函数生成的实例对象中的属性和方法其实是从构造函数中"copy"一份后生成的, 也就是说虽然生成的对象是构造函数的实例, 但里面的属性和方法确实相互独立的, 比如下面的lilei.sayHi 和 hanmeimei.sayHi这两个方法虽然同名, 功能也一样, 但实际上是内存中的两个不同地址里
阅读全文
摘要:在三种绑定this的方法中, Function.prototype.call() 和 Function.prototye.apply() 都是会立即执行该函数的, 但回调函数是不能立即执行的, 它只是将函数体传进去即可. 因此就需要使用 Function.prototype.bind() 方法.
阅读全文
摘要:有三种方法: 1. Function.prototype.call(); 2. Function.prototype.apply(); 3. Function.prototype.bind(); 一、Function.prototype.call() 可以指定函数在参数对象环境下执行; 注意: 1.
阅读全文
摘要:数组的空元素empty表示空位, 它不是一种数据类型, 而是由于人为修改arr.length 或者写入时多写了逗号造成的. undefined是一种数据类型, 在数组中表示这个位置的值未定义, 但它仍然指向某个内存地址, 这个内存地址指向的是undefined; empty和undefined在操作
阅读全文
摘要:1. 使用Math.max.apply(null,arr) 2. 使用Math.max(...arr) 注意: Math.max()会把传进去的每个参数都用Number()转换为数值类型, 如果检测到某个数组元素不能转换为数值, 则终止操作, 并返回 NaN.
阅读全文
摘要:所谓对象的原生方法, 也就是对象的原型链上的方法, 比如Object.prototype.hasOwnProperty(), 但原生方法可以在实例对象中覆盖, 这是如果我们想调用它的原生方法, 那就需要使用Function.prototype.call()方法了. 将Object.prototype
阅读全文
摘要:回调函数中的this不做处理的话, this仍然会指向window, 解决方法有两种. 第一种: 使用另一个变量固定this, 适用于在对象方法中使用的情况. 下面是实际执行结果: 第二种: 将this作为数组处理方法的第二个参数传递进去
阅读全文
摘要:如下所示, 得到的结果里面, 第二个this指向的是window这个全局对象而非f2, 原因就是多层this造成的指向不明引起的. 上面这段代码的实际运行效果其实是这样的: 但我们需要的效果是他指向a对象, 而不是window, 解决方法是通过另一个变量将this固定住: 这里使用了一个变量: se
阅读全文
摘要:1. 自定义一个异常需要使用构造函数 Error() 2. 抛出异常需要使用 throw 关键字 执行后就可以得到这样的效果:
阅读全文
摘要:JavaScript里的this, Python里的self, 其实都是一个东西, 它的存在跟构造函数 / 类这种是分不开的, 当然, 也可以在其他场合下使用, 他的意义很多, 但最共通的一个特点是: this/self 总是返回一个对象. 至于返回的这个对象到底是什么, 其实就是我们需要去发掘的.
阅读全文
摘要:需要使用Object.create()方法. 上面的代码说明了一个情况, 就是通过Object.create()生成的实例对象尽管是Person的实例对象, 在不手动赋值之前, 它的属性和方法是跟参数对象保持一致的;
阅读全文
摘要:实现new命令的功能, 首先需要知道new命令都做了些什么: 第一步: 创建一个空对象, 作为实例对象的容器; 第二步: 将空对象的prototype指向构造函数的prototype; 第三步: 将空对象赋值给构造函数的this; 第四步: 执行构造函数中的其它代码; 基于上面的步骤, 就有了下面这
阅读全文
摘要:因为构造函数也是一个函数, 自然也可以有return语句, 不过和一般函数不太一样的是, 在构造函数中如果return的是一个对象, 则会直接返回这个对象, 如果return 的不是一个对象, 那在new时会忽略这个retrun, 转而返回this对象. 1. 下面演示构造函数中返回一个对象的情况,
阅读全文
摘要:如果一个构造函数内部没有this, 那可以说这个压根不是构造函数, 因为他并不能返回一个实例对象; 由上面的代码可知, 如果一个构造函数中没有this, 那使用new命令创建的实例对象是一个空对象, 但这个空对象的原型确实来自Person, 原因是new命令执行的四个步骤中, this是必要的. 如
阅读全文
摘要:通过new命令生成一个实例对象经历了四个步骤: 1. 创建一个空对象, 作为将要返回的实例; 2. 将空对象的原型指向构造函数的prototype属性; 3. 将空对象赋值给构造函数的this; 4. 执行构造函数内部代码; 下面是这四个过程的演示:
阅读全文
摘要:通过构造函数 "new" 一个对象出来时, 如果忘记写这个 new, 那这个构造函数就不会返回一个实例对象, 而是会像普通函数一样执行. 下面是两种规避忘记写new时所引发的问题的方法: 1. 使用严格模式, 只需要在函数体内部第一行加一个单独的字符串: "use strict", 就可以在没有ne
阅读全文
摘要:不使用new关键字时, 构造函数是一个普通函数 使用new关键字时, 构造函数生成的是一个实例对象 注意: 构造函数有两大特征区别于一般函数: 1. 内部声明的变量, 如果需要被实例对象所继承, 则需要使用this关键字. 2. 只有使用new命令才会实例化一个对象, 不使用的话就跟普通函数没有区别
阅读全文
摘要:理解对象可以从两个方面入手: 1. 对象是对实物, 对现实世界的抽象. 比如鼠标就是个一个对象, 鼠标左键 / 鼠标右键 / 鼠标滚轮这些就是这个对象的属性. 而左键 / 右键 / 滚轮的功能就是这个对象的方法. 比如电脑就是一个对象, 键盘 / 屏幕 / 触控板 / 摄像头 / CPU 等各种硬件
阅读全文
摘要:1. 匿名函数没有函数名 2. 匿名函数只有在执行到那里的时候才会创建, 执行完成后就会被销毁 3. 匿名函数不参与预解析 这个很好理解, 就是匿名函数因为不是function声明的, js检测不到, 所以不会参与预解析. 而且, 匿名函数是执行的时候才会创建, 执行完成后就会销毁, 因此可以节约内
阅读全文
摘要:如下: 注意递归函数必须要设置结束递归的条件, 否则会进入死循环直到耗尽内存, 程序崩溃.
阅读全文
摘要:前言: 函数的声明可以使用字面量, 也可以使用构造函数, 使用字面量时又分为: 1. 用 function声明; 2. 用 var声明; 这两者声明方式在进行JS预解析时是不一样的, 导致在调用时会有些许区别; 第一步: 使用 function声明, 整个函数都会被预解析, 函数可以在声明前调用 第
阅读全文
摘要:需要使用构造函数: Function, 用法如下: 上面代码使用构造函数声明了四个函数: 加减乘除, 用于计算: 21*32+24/3-5 如上所示, 使用构造函数声明函数的做法较为繁琐, 性能上也没有字面量形式声明好, 但使用构造函数声明函数的做法体现的是: 函数也是对象 这句话.
阅读全文
摘要:前言: 检测对象是否具有某个属性分为两种情况. 1. 如果要检测从原型链上继承的属性, 则使用: in 关键字; 2. 如果不检测继承的属性, 则使用: Object.hasOwnProperty() 方法; 第一步: 使用 in 关键字 第二步: 使用 Object.prototype.hasOw
阅读全文
摘要:使用 delete 关键字, 可以删除对象的属性或方法. 由上可知, 使用delete可以删除对象的属性或方法, 删除成功会返回 true, 对不存在的属性进行引用时会返回 undefined, 对不存在的方法进行调用时会报错.
阅读全文
摘要:答: 因为不使用var声明的变量不会被预解析, 如下:
阅读全文
摘要:JS的预解析包括两部分: 1. 变量提升 2. 函数声明 对于变量提升, 可以看下下面这块代码 对于函数声明, 可以看下下面这块代码 由上面的执行结果, 我们可以知道JS的预解析对变量和函数的行为是不一样的, 对于变量来说, 预解析阶段是不会赋值的, 也就是说: 预解析之于变量, 实际上是在内存中开
阅读全文
摘要:前言: 理解了作用域链, 就理解了为什么函数作用域可以引用全局作用域下声明的变量, 反正则不行. 第一步: 理解下面这段代码 第二步: 理解下面这段代码 第三步: 理解下面这段代码 第四步: 理解下面这段代码 第五步: 理解下面这段代码 通过上面的代码我们构建了三个作用域: 1. 全局作用域: wi
阅读全文
摘要:下面这段代码在执行的时候, 打印的结果是1, Error: undefined; 原因是这个函数在执行的时候, 是先执行的: y = 1; 因为这里的y在声明赋值时没有使用var, 因此会默认成为全局变量, 然后将一个全局变量的值赋值给一个局部变量x; 其实际的执行过程如下:
阅读全文
摘要:前言: 全局作用域下声明的变量再其他作用域下也可以使用, 但函数作用域下声明的变量, 无法在全局作用域下使用. 注意: ES5 中没有块级作用域, 因此在全局作用域下的if 或 for 或 {} 中声明的变量都是全局变量, 如果if 或 for 或 {} 在函数作用域中, 则在其内部声明的变量可以在
阅读全文
摘要:前言: undefined表示 "未定义", null 表示 "空" 第一步: 一般在变量或属性没有声明或者声明以后没有赋值时, 这个变量的值就是undefined; 第二步: null是检测变量指向的内存地址是否存在, 即: 如果变量不指向任何一个内存地址, 则返回null. 注意: null 和
阅读全文
摘要:前言: 判断基本类型用: typeof, 判断引用类型用: instanceof 注意: 1. typeof可以当关键字使用, 也可以当函数使用, 它可以检测基本类型, 但无法检测引用类型. 2. instanceof 只能作关键字使用, 可以检测引用类型, 不能检测基本类型. 第一步: typeo
阅读全文
摘要:前言: 基本类型(数值 / 字符串 / 布尔值)和引用类型(对象)作为参数传递给函数时的行为是不一样的. 基本类型传递的是值的地址, 它在函数内部的改变不会影响到原变量. 引用类型传递的是引用的地址, 它在函数内部的改变实际上是对原变量的改变. 第一步: 下面演示基本类型的值做实参时的情况 注意:
阅读全文