Javascript高级程序设计
3.基本概念
- === 全等符号,要求类型和值均想等
- switch判断时使用的是全等符号
- 参数
- arguments
- arguments.callee(严格模式禁用)
- arguments.caller(严格模式禁用)
- arguments为类数组对象(Array-like object),结构类似于 {0:’Z’, 1:’a’, 2:’b’, 3:’c’}
- 类数组对象拥有类似数组的结构,所以它可以使用大多数数组的方法
- 对类数组对象使用Array.isArray()返回false
- 通过Array.prototype.slice.call(arguments)来将其转化为真正的数组
- 声明提前
- 注意
- 如果是多次使用function funcName(){}的语法声明函数则以最后为准
- 但是如果是使用var funcName = function(){}语法则funcName在随时改变
- 注意体会这两种方法的区别
4.变量、作用域和内存问题
- ECMAScript中所有函数的参数都是按值传递的
- 对于基本类型,修改参数并不会对参数本身造成影响
- 对于Object类型,传参过程中传递的实际上是引用值(可想象为传递的是地址),这个地址就是这个参数的值,所以对对的属性进行操作会作用到源对象;但是如果为参数赋予新对象,则不会对源对象产生任何影响,因为对参数赋值为新对象只是更新参数的地址,而并未更新源对象的地址
- var声明的变量是函数级的,let声明的变量是块级的,不使用保留字声明的变量是全局的(一般是附属到window对象)
- javascript中的GC
5.引用类型
- 数组
- 数组的length是可写的,所以可以通过直接设置length的值来移除数组末尾的项或者添加项(直接添加到指定位置)
- join()方法 使用指定分隔符连接字符串
- sort()方法 接受比较函数对数组元素排序,若无比较函数则按从小到大排序
- splice()方法 splice(起始位置,要删除的项数,插入元素1,插入元素2,…)
- RegExp 正则表达式
- function
- 函数是对象,函数名是指针
- call(object, arguments[0], arguments[1], …)
- apply(object, arguments)
6.面向对象的程序设计
- 对象属性
- 数据属性
- 特性
- [[Configurable]] 表示能否通过delete删除属性 默认为true
- [[Enumerable]] 表示能否通过for-in循环返回属性 默认为true
- [[Writable]] 表示能否修改属性的值 默认为true
- [[Value]] 包含这个属性的数据值,即数据的写入位置 默认为undefined
- 可以直接定义也可以使用Object.defineProperty()定义,defineProperty的使用见下面访问器属性的实例,只要替换相关特性即可
- 访问器属性
- 包含getter/setter
- 再读取访问器属性时调用getter,在写入访问器属性时调用setter
- 特性
- [[Configurable]] 表示能否通过delete删除属性 默认为true
- [[Enumerable]] 表示能否通过for-in循环返回属性 默认为true
- [[Get]] 在读取属性时调用的函数,默认值为undefined
- [[Set]] 在写入属性时调用的函数,默认值为undefined
- Vue.js通过访问器属性实现了双向数据绑定,所以IE8及以下浏览器均不支持
- 访问器属性不能直接定义,必须使用Object.defineProperty()来定义,示例如下
function Person() {
var name = 'default';
this.age = 23;
Object.defineProperty(this, "name", {
get: function() {
return name;
},
set: function(newName) {
console.log(y);
name = newName;
},
enumerable: true,
configurable: true,
});
}
var p = new Person();
console.log(p.name);
function subType(){
superType.call(this);
}
subType.prototype = new superType();
subType.prototype.*** = function(){
}
7.函数表达式
8.BOM(浏览器对象模型)
- 队列只保证在指定时间将任务添加到队列中而不能保证运行,如果当前队列中有任务在运行,则新添加的任务需要等之前任务全部运行完再开始运行
9.客户端检测
10.DOM
- DOM1级定义了一个Node接口,该接口由DOM中的所有节点类型实现。这个Node接口在Javascript中是作为Node类型实现的;除了IE之外,在其他所有浏览器中都可以访问到这个类型
- 每个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。这个对象是根据DOM结构动态执行查询的结果
- 每个节点都有parentNode属性,只想文档树中的父节点
- 访问邻居节点使用previousSibling和nextSibling属性
- 如下五个方法不会返回元素间空格导致的文本节点(例如
之间的空格会被当做一个文本节点)
- childElementCount
- firstElementChild
- lastElementChild
- previousElementChild
- nextElementChild
13.事件
- 事件捕获阶段->目标截断->事件冒泡阶段 DOM2级(IE8及以前不支持)
- DOM0级事件处理 btn.onclick = function(){};
- DOM2级事件处理 btn.addEventListener(‘click’, function(){}, false);
- 最后一个false代表是否在捕获阶段执行。此处为false,代表在冒泡阶段执行,否则为捕获阶段
- 此方法在IE/Opera中为attachEvent和detachEvent,默认在冒泡阶段执行,因为IE8以及之前的浏览器不支持事件捕获
- event.stopPropagation()用于取消事件进一步冒泡
- document.implementation.hasFeature(‘MouseEvent’, ‘2.0’)用于检测是否有相应的事件存在
- 事件委托
21.Ajax
- XHR
- 新建对象方法
- IE - ActiveXObject
- Others - XMLHttpRequest
- 接收到响应之前可以使用xhr.abort()来取消异步请求
- 不建议重用xhr对象,有内存泄漏风险
- XHR用法
xhr = new XMLHttpRequest();
xhr.onreadystatechane = function(){
};
xhr.open('get', url, false);
xhr.send(null);
- HTTP
- Request头部信息
- Accept 浏览器能够处理的内容类型
- Accept-Charset 字符集
- Accept-Encoding 压缩编码
- Accept-Language 浏览器当前设置的语言
- Cache-control
- Connection 浏览器与服务器之间的连接类型 (keep-alive)
- Cookie
- Host 发出请求的页面所在的域
- Referer 发出请求的页面的URI
- User-Agent
- Response头部信息
- Cache-control
- Content-length
- Content-type
- Date
- Last-modified
- CORS(Corss-Origin Resource Sharing, 跨域资源共享)
- 微软IE8引入XDomainRequest,其他浏览器的XHR已经对CORS原生支持
- 不能发送接受cookie
- 不能使用setRequestHeader()设置自定义头部
- 以此保证跨域安全
- Preflighted Request
- JSONP
- 本地自定义函数,服务器根据指定的函数名返回相应的函数调用,示例如下
function handleCallback(res) {
console.log(res);
}
var script = document.createElement('script');
script.src = 'http://freegeoip.net/json/?callback=handleCallback';
document.body.insertBefore(script, document.body.firstChild);
其中JSONP接口返回的内容如下,即作为插入到代码中执行的部分,API接口内容作为参数传入
handleCallback({
ip: "219.239.227.229",
country_code: "CN",
country_name: "China",
region_code: "11",
region_name: "Beijing",
city: "Beijing",
zip_code: "",
time_zone: "Asia/Shanghai",
latitude: 39.9289,
longitude: 116.3883,
metro_code: 0
})
- Comet
- 基于长轮询的服务器’推’技术
- 客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求
- HTML5 - Web Socket
- WebSocket不支持DOM2级事件监听器,因此必须使用DOM0级语法
- 使用方法
var socket = new WebSocket('ws://api.com/api/get/id')
socket.onmessage = function(event){var data = event.data};
socket.onopen = function(){};
socket.onerror = function(){};
socket.onclose = function(){};
22.高级技巧
- 函数的惰性载入
- curry化函数
- 防篡改对象
- Object.preventExtensions(o) 不能再为对象添加新属性和新方法
- Object.seal(o) 不能添加和删除属性/方法,但是属性值是可以修改的
- Object.freeze(o) 冻结对象的数据属性[[Writable]]特性会被设置为false;如果定义了访问器属性[[Set]],访问器属性则仍是可写的
- 以上三个防篡改级别的强度依次递增
- Javascript中没有任何代码是立刻执行的,但一旦进程空闲则尽快执行
- 大量数据采用数组分块处理-防止循环占用大量时间导致浏览器无响应
setTimeout(function(){
process(item);
if (array.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
var processor = {
timeoutId: null,
performProcessing: function(){
//实际执行代码
},
process: function(){
clearTimeout(timeoutId);
this.timeoutId = setTimeout(() => {
this.performProcessing()
}, 100);
}
}
processor.process();
- 使用concat克隆数组
- 不传入参数即可
var cloneArr = arr.concat()
- 自定义事件