![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript 基础
JavaScript 高程学习笔记,以便查阅
邪人君子
毕业于云南大学,电子信息工程专业。工作期间独立负责移动端项目开发,熟悉nginx建站流程,有linux环境开发经验,有iOS、Android端企业级应用的打包发布经验,有移动端首页白屏优化经验
展开
-
JavaScript--25 构造函数的误用问题(this 指向 window)
构造函数其实就是一个使用new 操作符调用的函数。当使用new 调用时,构造函数内用到的this 对象会指向新创建的对象实例,如下面的例子所示:function Person(name, age, job){ this.name = name; this.age = age; this.job = job; console.log(this)}var person = new Per...原创 2020-04-16 17:14:29 · 465 阅读 · 0 评论 -
JavaScript--24 你不知道的数据类型转换
本节目录typeof操作符转换为数值的几种方法Number() 函数parseInt()函数parseFloat() 函数转换为字符串的几种方法toString() 方法String() 函数加号操作符typeof操作符typeof null // object // -- 因为从逻辑角度来看,特殊值null 被认为是一个空的对象引用。另外注意:对未初始化的变量执行typeof 操作...原创 2020-03-25 16:33:42 · 118 阅读 · 0 评论 -
JavaScript--23 使对象不可篡改
使对象不可篡改的三种方式不可扩展对象密封对象冻结对象总结一下这三种方式的检测不可扩展对象默认情况下,所有对象都是可以扩展的。也就是说,任何时候都可以向对象中添加属性和方法。例如,可以像下面这样先定义一个对象,后来再给它添加一个属性。var person = { name: "Nicholas" };person.age = 29;使用 Object.preventExtensions(...原创 2020-03-11 12:28:19 · 218 阅读 · 0 评论 -
JavaScript--22 什么是惰性载入函数
所谓惰性载入,就是说函数的if分支只会执行一次,之后调用函数时,直接进入所支持的分支代码。很多时候我们只需要进行一次判断,因为之后每次调用函数判断的结果都一样。所以如果if 语句不必每次执行,我们可以使用称之为惰性载入的技巧来进行优化。惰性载入的逻辑是在第一次进行 if 判断之后就对函数重新定义,这样后面每次调用该函数都不会再进行if判断。下面提供了实现惰性载入的两种方式。第一种:函数被调...原创 2020-03-11 10:58:01 · 269 阅读 · 0 评论 -
JavaScript--21 一些跨域技术的总结(jsonp/nginx/Access-Control-Allow-Origin)
本节目录Access-Control-Allow-Origin - 主要在于后端关于 JSONP图像Ping使用 nginx 进行反向代理通过XHR 实现Ajax 通信的一个主要限制,就是跨域问题。默认情况下,XHR 对象只能访问与包含它的页面位于同一个域中的资源。CORS(Cross-Origin Resource Sharing,跨源资源共享)是W3C 的一个标准,它允许浏览器向跨源服务器...原创 2020-03-11 08:52:48 · 212 阅读 · 0 评论 -
JavaScript--20 深入理解 Ajax
深入学习 AjaxXMLHttpRequest 对象XHR的用法Ajax 技术的核心是XMLHttpRequest 对象(简称XHR),XHR能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据。虽然名字中包含XML 的成分,但Ajax 通信与数据格式无关;这种技术就是无须刷新页面即可从服务器取得数据,但不一定是XML 数据。XMLHttpRequest ...原创 2020-03-03 20:10:43 · 190 阅读 · 0 评论 -
JavaScript--19 JSON和对象的相互转换
JSON 语法支持属性简单值对象数组解析对象JSON 对象JSON.stringify() 方法JSON.parse() 方法JSON 的语法可以表示以下三种类型的值。简单值:使用与JavaScript 相同的语法,可以在JSON 中表示字符串、数值、布尔值和null。但JSON 不支持JavaScript 中的特殊值undefined。对象:对象作为一种复杂数据类型,表示的是一组无序的键...原创 2019-12-18 19:07:31 · 162 阅读 · 0 评论 -
JavaScript--18 操作 form 表单的选择框
选择框脚本选择框简介select 的属性和方法option 的属性选择选项的方式使用 selectedIndex 属性设置 selected 属性添加选项的方法使用 DOM 操作使用 Option 构造函数使用 add() 方法移除选项的方法使用 removeChild 方法使用 remove() 方法设置为 null移除所有项移动选项选择框间移动选择框内移动选择框简介选择框是通过<se...原创 2019-12-18 15:58:05 · 728 阅读 · 0 评论 -
JavaScript--17 文本框内容的选择、过滤和H5验证
文本框脚本选择文本select()方法select 事件获取选择的文本选择部分文本屏蔽字符屏蔽所有字符屏蔽数值兼容和完善自动切换焦点在HTML 中,有两种方式来表现文本框:一种是使用<input>元素的单行文本框,另一种是使用<textarea>的多行文本框。选择文本select()方法上述两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本...原创 2019-12-18 11:17:59 · 457 阅读 · 0 评论 -
JavaScript--16 JavaScript 操作表单元素
表单的基础知识取得表单元素提交表单点击按钮提交submit 事件调用方法提交表单重复提交表单的问题重置表单点击按钮重置reset 事件调用方法重置表单表单字段表单字段共有的属性表单字段共有的方法表单字段共有的事件取得表单元素其中最常见的方式就是将它看成与其他元素一样,并为其添加id特性,然后再像下面这样使用getElementById()方法找到它var form = document.ge...原创 2019-12-18 08:41:31 · 189 阅读 · 0 评论 -
JavaScript--15 一篇文章搞懂事件流(兼容、冒泡、捕获)
本届目录一、事件流1.1 事件冒泡1.2 事件捕获1.3 事件捕获机制二、时间处理程序2.1 HTML 事件处理2.2 JavaScript 事件处理2.3 JavaScript 监听事件并处理一、事件流在单击按钮的同时,你也单击了按钮的容器元素,甚至也单击了整个页面。事件流描述的是从页面中接收事件的顺序。1.1 事件冒泡IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套层次...原创 2019-12-17 17:13:42 · 128 阅读 · 0 评论 -
JavaScript--14 DOM 元素大小和元素遍历(NodeIterator、TreeWalker )
本节目录一、style 属性二、DOM 样式属性和方法三、偏移量(offset dimension)四、客户区大小(client dimension)五、滚动大小(scroll dimension)六、TreeWalker 遍历 DOM 结构一、style 属性任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象包含着通过 HTML的st...原创 2019-10-22 22:06:44 · 264 阅读 · 0 评论 -
JavaScript--13 DOM 选择符(id、class) 和元素替换
本节目录一、选择符1.1 querySelector() 方法1.2 querySelectorAll() 方法一、选择符1.1 querySelector() 方法querySelector()方法接收一个CSS 选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回 null。获取文档中第一个 <p>元素:document.querySelector("p...原创 2019-10-21 22:38:05 · 664 阅读 · 0 评论 -
JavaScript--12 DOM 常用节点类型的属性和方法
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。本节目录一、Node 类型 ---- 确定节点类型1.1 基础属性1.1.1 nodeName 和 nodeValue 属性1.1.2 childNodes 属性的节点列表对象1.2 查询父子兄弟节点1.3 操作子节点的属性...原创 2019-10-08 11:19:52 · 185 阅读 · 0 评论 -
JavaScript--11 检测呈现引擎、浏览器和操作系统(浏览)
检测 Web 客户端的手段很多,而且各有利弊。但最重要的还是要知道,不到万不得已,就不要使用客户端检测。只要能找到更通用的方法,就应该优先采用更通用的方法。一言以蔽之,先设计最通用的方案,然后再使用特定于浏览器的技术增强该方案。本节目录一、能力检测(特性检测)1.1 检测某方法是否存在1.2 进一步检测方法是否是想要的类型一、能力检测(特性检测)1.1 检测某方法是否存在能力检测的目标...原创 2019-03-06 18:00:20 · 495 阅读 · 0 评论 -
JavaScript--10 BOM(window、location、history、navigator)
BOM 的核心对象是 window,它表示浏览器的一个实例。在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global (全局)对象。本节目录一、window 对象1.1 全局作用域1.2 窗口大小和位置1.2.1 窗口位置 ---- moveTo() 和 moveBy() 方法1.2.2 窗口大小 ...原创 2019-03-05 21:53:07 · 454 阅读 · 0 评论 -
JavaScript--09 理解函数(递归、闭包和作用域)
本节目录一、创建函数的两种方式1.1 函数声明1.2 函数表达式1.3 函数声明提升的问题二、递归2.1 递归函数2.2 arguments.callee ---- 回调2.3 命名函数表达式 ---- 最好三、闭包3.1 闭包概念3.2 作用域链3.2.1 作用域链的概念3.2.2 [[Scope]]属性 ---- 作用域链存放位置3.3 闭包的作用域链生命周期3.4 闭包的缺点3.5 闭包中变...原创 2019-03-05 16:27:38 · 286 阅读 · 0 评论 -
JavaScript--08 原型链、经典继承和组合继承等的优缺点及最理想的继承方式
许多 OO 语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。如前所述,由于函数没有签名,在 ECMAScript 中无法实现接口继承。ECMAScript 只支持实现继承,而且其实现继承主要是依靠原型链来实现的。本节目录一、原型链1.1 构造函数、原型和实例的关系1.2 原型链的基本概念1.3 原型链的原型搜索机制1.4 所有函数的默认原型 -...原创 2019-03-03 21:01:18 · 527 阅读 · 0 评论 -
JavaScript--07 工厂模式、构造函数模式、原型模式的优缺点及组合使用
ECMA-262 把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样(以及其他将要讨论的原因),我们可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数。本节目录一、普通方式创建对象1.1 Object 构造函数...原创 2019-03-02 21:59:34 · 1612 阅读 · 1 评论 -
JavaScript--06 原型模式及对象属性详解
本节目录一、prototype(原型)属性示例二、理解原型对象2.1 Object.getPrototypeOf() 方法 ---- 获取对象的原型2.2 不能通过对象实例重写原型中的值2.3 delete 操作符 ---- 解决同名属性问题2.4 批量写原型方法三、检测属性3.1 hasOwnProperty() 方法 ---- 检测属性是否存在于实例中3.2 in 操作符 ---- 此处检测属...原创 2019-03-01 16:57:47 · 328 阅读 · 1 评论 -
JavaScript--05 字符串和数值的操作方法(Number、Math、String)
2019-02-22 13:44:41,740 DEBUG [http-bio-8888-exec-8] com.jxbank.ehk.service.CoreService - 模板数据:{td_f=editSupplierRegisterApplyInfo, supplierId=SU201812161214070065, roleId=1, resultCode=999999, td_abc...原创 2019-02-26 11:33:17 · 498 阅读 · 0 评论 -
JavaScript--04 常用引用类型(Object、Array、Function、Date、RegExp)
引用类型有时候也被叫做对象定义对象是某个特定引用类型的实例,新对象使用 new 操作符后面跟一个构造函数来创建的。构造函数实际上就是一个函数,只不过该函数是出于创建新对象的目的而定义的。比如:· var person = new Object();一、object类型创建 Object 实例的方式有两种1、使用 new 操作符var person = new Object();pe...原创 2019-02-25 18:29:13 · 685 阅读 · 0 评论 -
JavaScript--03 正则表达式详解及实例应用
本节目录一、RegExp 对象属性和修饰符1.1 RegExp 对象属性1.2 修饰符1.2.1 g 修饰符1.2.2 i 修饰符1.2.3 m 修饰符二、RegExp 对象方法2.1 exec() 方法2.2 test() 方法2.3 toLocaleString() 和 toString() 方法三、字符串的实例方法3.1 match() 方法3.2 search() 方法3.3 replac...原创 2019-02-21 21:58:17 · 389 阅读 · 0 评论 -
JavaScript--02 数组类型的增删改查
本节目录前言一、创建数组的方式1.1 使用 Array 构造函数1.2 使用数组字面量二、读取和设置数组2.1 使用 length 属性移除项2.2 使用 length 属性新增项三、检测数组3.1 使用 instanceof 操作符3.2 使用 Array.isArray()方法四、转换方法4.1 toString() 和 valueOf() 方法4.2 join() 方法五、栈方法 ---- ...原创 2019-02-19 17:54:29 · 401 阅读 · 0 评论 -
JavaScript--01 复制变量、作用域和垃圾收集
本节目录一、基本类型和引用类型的值1.1 复制变量值:1.1.1 复制基本类型值:1.1.2 复制引用类型值:1.2 传递参数1.2.1 传递基本类型值1.2.2 传递引用类型值1.3 检测类型1.3.1 typeof 操作符1.3.2 instanceof 操作符二、执行环境及作用域2.1 基础概念2.1.1 执行环境2.1.2 作用域链2.1.3 标识符解析2.2 JavaScript 没有块...原创 2019-02-18 19:46:12 · 655 阅读 · 0 评论