《JavaScript高级程序设计》笔记

[lznbuild]

在做这次笔记之前，《高程》我就已经看过一遍了，这次不会全部看，只会挑一些章节记录。

第四章 变量，作用域和内存问题

Number()

parseInt(num,[进制])

parseFloat() 只解析十进制，16进制直接转换为0

执行环境负责管理代码执行过程中使用的内存。

垃圾收集器会按照固定的时间间隔周期性的执行这一操作。
垃圾回收机制的两个策略：

• 标记清除

• 引用计数
  跟踪记录每个值被引用的次数，垃圾收集器下次运行时，释放次数为0的变量
  缺点：循环引用的问题

具体垃圾回收机制请看 Javascript垃圾回收

第六章 面向对象的程序设计

对象的数据属性

• configurable: 能否通过delete删除属性，能否修改属性的特征（为false后，再次使用Object.defineProperty()只能修改writable,value属性，其他的修改报错）

• enumerable: 能否枚举

• writable: 能否修改属性的值

• value: 定义属性的值

Object.getOwnPropertyDescriptor 取得给定属性的描述符

hasOwnProperty 检测一个属性存在于实例还是原型上

怎么判断属性存在于原型上？

function hasPrototypeProperty(obj,name){
   reutrn !obj.hasOwnProperty(name)&&(name in obj)
   // obj有这个属性且不在实例上
}

for in 循环返回可枚举的属性，包括实例上的，原型上的

object.keys()返回实例上的可枚举属性

继承部分请看 Javascript多种继承方式

第八章 BOM

location

href 完整的url (protocal + host)
protocol 协议
host 主机，服务器名称和端口号 (hostname + port)
hostname 服务器名称
port 端口号
pathname url中的目录
search ？后的参数部分
hash

打开新页面或刷新当前页面

window.open('https://www.baidu.com','_block')
location.href = xxx
location.replace()
location.reload(true) 不去找缓存
修改url非hash部分

修改hash当前页面不会刷新，onhashchange监听hash的变化

第十章 DOM

[dom].nodeName // 元素标签名

操作class

//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("user");
//确定元素中是否包含既定的类名
div.classList.contains("bd")  

用于获取设置dom自定义属性

dom.dataset[id]

JS 添加样式的简写

el.style.backgroundColor = 'red'
// 或者 
el.style.cssText = 'background-color: red'
// 或者
Object.assign(el.style, {
    backgroundColor: "red",
    margin: "25px"
})

第十三章 事件

dom事件包括3个阶段

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

stopPropagation(),stopImmediatePropagation() 区别

event.stopPropagation();阻止事件冒泡。也阻止事件捕获.

event.stopImmediatePropagation(); 阻止事件冒泡,并且阻止该元素上同事件类型的监听器被触发

target，currentTarget区别

后者是事件绑定的dom节点，前者是触发此事件的节点（可能是子元素）

document.body.onclick = function(e){
   console.log(e.currentTarget)// document.body
   console.log(e.target) // div
}
// 点击body中的一个div，通过事件冒泡，触发此事件

focus,blur事件不会冒泡
focus、blur、load、unload等事件，不会冒泡 resize

判断是否功能键被按下，布尔值

e.shiftKey、ctrlKey、altKey 和 metaKey。

e.detail 中包含了一个数值，表示在给定位置上发生了多少次单击。

发生一次 mousedown 和一次 mouseup 事件算作一次单击。

在用户按了一下键盘上的字符键时，首先会触发 keydown 事件，然后紧跟着是 keypress 事件，最后会触发 keyup 事件。

keydown支持功能键，shift,ctrl，f1键等,keypress不行。
onkeypress支持组合键，keydown不行。
onkeydown 捕获的 keyCode 不区分字母大小，而 onkeypress 区分。

第二十一章 AJAX和comet

ajax发起请求，在收到响应之前还可以调用abort()方法取消异步请求,停止触发事件，不再允许访问任何与响应有关的
对象属性。

xhr.abort()

跨域问题

cors背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，决定请求响应成功还是失败。

请求给它附加一个额外origin头部属性，其中包含请求页面的协议域名端口号，以便服务器根据这个头部来决定是否给与响应。如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息。如果没有这个头部，或源信息不匹配，浏览器就会驳回请求。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

具体看阮一峰大佬的文章 跨域资源共享 CORS 详解

Object.entries

let meals = {
 mealA: 'Breakfast',
 mealB: 'Lunch',
 mealC: 'Dinner'
};

for (let [key, value] of Object.entries(meals)) {
 console.log(key + ':' + value);
}
// 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'

nodetype检验子节点类型
元素节点 1
属性节点 2
文本节点 3