JavaScript基础-前端开发
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础-前端开发相关的知识，希望对你有一定的参考价值。
理解作用域
理解作用域链是Js编程中一个必须要具备的，作用域决定了变量和函数有权力访问哪些数据。在Web浏览器中，全局执行环境是window对象，这也意味着所有的全局变量或者方法都是window对象的属性或方法。当一个函数在被调用的时候都会创建自己的执行环境，而这个函数中所写的代码就开始进入这个函数的执行环境，于是由变量对象构建起了一个作用域链。
var wow = ‘魔兽世界‘;
var message = function(){
var _wow = ‘123‘;
}
在这个例子中全局环境中包含了两个对象（全局环境的变量对象不算），window.wow和window.message，而这个message函数中又包含了两个对象，它自己的变量对象（其中定义了arguments对象）和全局环境的变量对象。当这个函数开始执行时，message自己的变量对象中定义了_wow，而它的全局环境的变量对象有wow，假设在message中alert一下wow，实际上是message中包含的全局环境的变量对象.wow，于是可以访问。
var wow = ‘123‘;
var message = function(){
var wow = ‘456‘;
}
如果执行message函数alert一下wow，它的作用域是这样开始搜索的，先搜索message自己的变量对象中是否存在wow，如果有就访问并且立马停止搜索，如果没有则继续往上访问它，有wow，则访问并且立马停止搜索，以此类推一直搜索到全局环境上的变量对象，如果这里都没，恭喜你，这里要抛错了。
var c = ‘123‘;
var message = function(){
var g = ‘123‘;
var a = function(){
var d = ‘123‘;
}
}
在这个例子中包含有三个执行环境，全局环境，message的环境，a的环境。从这里可以看出message自身包含两个对象，自己的变量对象和全局环境中的变量对象，而函数a则包含了三个，自身的变量对象，message的变量对象和全局变量对象。
当开始执行这个函数时，在函数a中可以访问到变量g，那是因为函数a包含了message的变量对象，于是在自身没有开始搜索上一级的变量对象时发现了，于是可以访问。那么访问c的原理也是如此，当自身和上一级的message的变量对象都没有，但是全局变量对象中存在，于是访问成功。
了解这个作用域，对于Js编程是至关重要的，不然可能会出现，明明想要的预期结果是123，但是变成了456，为什么？那就是因为一级一级的搜索，可能会存在覆盖，或者搜索到别的地方就立即停止搜索了。
理解引用类型
引用类型虽然看起来和类很相似，但是它们却是不同的概念，引用类型的值，也就是对象是引用类型的一个实例。在Js中引用类型主要有Object，Array，Date，正则，Function等。
Object和Function在后面详细复述。
Array
在Js中数组可以存储任意的数据，而且它的大小是可以动态调整的类似于OC中的NSMutableArray。创建数组可以使用构造函数的方式也可以使用字面量的形式，另外可以使用concat从一个数组中复制一个副本出来。数组本身提供了很多方法让开发者使用来操作数组。
- length 数组的长度
- toString 可以返回一个以，拼接的字符串，相当于是调用了下join(‘,‘)
- join 可以用一个分割符来拼接成一个字符串
- push 添加一个数据到数组的末端
- pop 删除数组中的最后一项，有返回值
- shift 删除数组的第一项，有返回值
- unshift 添加一个数据到数组的首端
- reverse 倒序
- sort 可以传入一个排序的函数
- slice 可以基于当前数组返回一个新的数组，接收两个参数，返回项的起始位置和结束位置
- splice 可以传入N个参数，第一个参数表示要删除，插入或则替换的位置，第二个参数表示要删除的项数，第三个到第N个表示要插入或则替换的数据
Date
时间对象也是使用非常多的玩意，它是使用GMT时间来描述，而且时间对象是可以直接比对大小的。
var date1 = new Date(2015,1,2);
var date2 = new Date(2015,1,10);
date1 < date2
常用的方法
- getTime 获取时间对象的毫秒数
- setTime 设置时间对象的毫秒数，会改变日期
- getFullYear 获取时间对象的年（2015）
- getMonth 获取时间对象的月（需要加1）
- getDay 获取日期的星期几（0-6）星期天到星期六
- getDate 获取日期的天数
- getHours 获取当前日期的小时
- getMinutes 获取当前日期的分钟数
- getSeconds 获取当然日期的秒数
上面看起来都是获取，当然也有设置，只是相应的get置换成set即可。
正则表达式
在Js里正则表达式是用RegExp类型来支持的，关于正则可以看看之前写的一篇文章，用python来描述的如何读懂正则。
Js也支持三种模式，gim，表示全局，不区分大小写，多行。
一般来说很少有人这么使用var xxx = new RegExp()，而是用字面量的方式，比如var xx = /[bc]/gi;像用的比较多的方法有exec用于捕获包含第一个匹配项的数组，没有则返回null。test，用于判断，如果匹配返回true，不匹配返回false。
处理字符串
在Js中还有一种叫做包装类型的玩意，正因为此所以处理一些基本数据类型，比如字符串时，有很多方法可以使用。
- concat 可以将一个或者多个字符串拼接起来，返回一个新的字符串
- slice 接收两个参数，起始位置和结束位置，返回一个新的字符串
- substr和substring和slice一样，唯一的不同是substr第二个参数是返回字符串的个数
- indexOf 从头开始查询字符串，存在会返回它所在的位置，没有返回－1
- lastIndexOf 从最后开始查询字符串
- toUpperCase 转大写
- toLowerCase 转小写
- match 正则表达式使用跟exec一样
- search 正则表达式使用，查询到返回一个位置，没有返回－1
- replace 替换，第一个参数可以是正则表达式也可以是字符串，第二个参数是要替换的字符串
- localeCompare比较字符串，如果字符串相等返回0，如果字符串的字母排在参数字符串之前，返回负数，如果是之后，返回正数。
函数
说起来Js的核心是什么？那就是函数了。对于函数主要是理解它的几个概念。
- 它可以当值来传递，没有重栽。
- 声明的时候，比如function a(){} var a = function(){} 执行时会有区别
- 函数内部的参数arguments包含了传入的所有参数
- this，表示在这个函数内的作用域，以及prototype
理解匿名函数和闭包
匿名函数又叫拉姆达函数，主要是在把函数当值传递的时候用，或者是把函数当返回值，比如：
function d(callback){
callback();
}
d(function(){
alert(‘123‘)
});
//或者
function b(){
return function(){
alert(‘123‘);
}
}
var g = b();
g();
其实第二种方式跟闭包的意义一样了，所谓的闭包书面的解释是可以访问另一个函数作用域内变量的函数，稍微改写一下可能会更明显。
function b(){
var name = ‘123‘;
return function(){
alert(name);
}
}
var g = b();
g();
从这里可以看出来return的函数可以访问到name，而外部却不行，这个返回值的函数就可以理解为闭包。理解闭包还可以看一个经典的求值的例子。
function save_i(){
var a = [];
for(var i = 0;i<10;i++){
a[i] = function(){
return i;
}
}
return a;
}
var c = save_i();
for(var i = 0;i<10;i++){
alert(c[i]());
}
从这个例子上来看，我们想得到的结果是10次循环a[i]保存着一个闭包，然后alert出从0到10，但是结果很出人意料，全部是10，为什么？哪里理解的不对呢？a[i]明明是内部函数，然后让它访问另外一个函数作用域内的变量i。
个人觉得可以这样去分析问题，在客户端执行Js时有一个全局执行环境，指向的是window对象。而所谓的对象也就是引用类型，实际上在后台执行环境中，它就是一个指针。
回到Js当代码在执行的时候，会创建变量对象并且构建一个作用域链，而这个对象保存着当前函数可以访问的对象。
window
->save_i
->this|argument
->a
->i
->看不见的a[0]-a[10]
->a[0]function(){}
->i
->c
上述的i和a[0]里的i是同一个i，那么结果就是10。
进一步处理
function save_i(){
var a = [];
for(var i = 0;i<10;i++){
a[i] = function(k){
return function(){
return k;
};
}(i)
}
return a;
}
var c = save_i();
for(var i = 0;i<10;i++){
console.log(c[i]());
}
接着按上面的节奏来分析
window
->save_i
->this|argument
->a
->i
->看不见的a[0]-a[10]
->a[0]function(){}
->k
->function(){}
->k
->c
什么是传参？按值传递，相当于是在那个立即执行的函数中创建了一个新的地址和空间，虽然值是一样的，但是每一个k又是不同的，所以得到的结果正好满足了我们的预期。
本来正常情况下save_i执行完毕后就要销毁，但是内部的闭包被包含在这个作用域内了，所以save_i没法销毁，从这里可以看的出来闭包会带来内存的问题，因为用完之后没法销毁，如果不注意的话。
那么用完之后只能设置为null来解除引用，等着自动销毁把内存回收。
Object
javascript的所有对象都衍生于Object对象，所有对象都继承了Object.prototype上的方法和属性，虽然它们可能会被覆盖，熟悉它对于编程能起到很大的作用，也能比较深刻的了解JavaScript这门语言。
创建一个对象可以使用new，也可以使用快速创建的方式：
var _object = {};
_object对象中就可以使用Object.prototype中所有的方法和属性，虽然看起来它是空的。说到这里在编程中常常有一个非常有用的需求，如何判断一个对象是空对象。
这是zepto中的判断一个对象是否是空对象，常常使用：
$.isEmptyObject = function(obj) {
var name
for (name in obj) return false
return true
}
也顺便看了下jQuery原理是一模一样的：
isEmptyObject: function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
}
使用in操作符来实现，它不会遍历到父原型链。
constructor返回一个指向创建了该对象的函数引用，这个东西主要是可以用来识别（类）到底是指向哪里的。
defineProperty直接在一个对象上定义一个新属性，非常适合用于动态构建，传入三个参数［动态添加对象的目标对象，需要定义或被修改的属性名，需要定义的对象］，在第三个参数中可以有些属性来表示是否继承（proto），要不要定义get，set方法，enumerable是否可枚举。
defineProperties跟上述defineProperty一样，但是它可以添加多个。
getOwnPropertyNames返回一个由指定对象的所有属性组成的数组
keys返回一个数组包括对象所有的属性（可枚举）
keys是经常会用到的一个属性，它只能包可枚举的，如果想获取一个对象的所有属性包括不枚举的，那么使用getOwnPropertyNames。
hasOwnProperty用于判断某个对象是否包含有自身的属性，这个方法常常用于检测对象中的属性是否存在，它只检测自身，对于继承过来的都是false，这一点是非常重要的理解。
isPrototypeOf 用于检测一个对象是否在另一个对象的原型链上，比如有两个对象是互相交互的，常常会使用它来进行检测。
propertyIsEnumerable这个方法也比较重要，返回一个布尔值，检测一个对象的自身属性是否可以枚举
可枚举的理解，也就是对象的属性可枚举，它的属性值不可以修改，但是在Js中它有自己的定义，引擎内部看不见的该属性的[[Enumerable]]特性为true，那么就是可枚举的。基本上把一个普通对象可以看做是一个枚举类型，比如var color = {‘red‘:1}，red是可以修改的，但是red是可枚举的，但是如果是继承过来的属性，propertyIsEnumerable是返回false的，它还有一个特点，就是自身。
如果要定义不可枚举的属性，那就要使用defineProperty方法了，目前不能用对象直接量或者构造函数定义出来。
var obj = {name: ‘jack‘, age:23}
Object.defineProperty(obj, ‘id‘, {value : ‘123‘, enumerable : false });
深拷贝与浅拷贝
关于拷贝的问题，主要分为深拷贝和浅拷贝，但是如果从空间分配上来说JavaScript的拷贝不应该算是深拷贝，比如：
var d = {};
for(k in a){
d[k] = a[k];
}
return d;
今天突然想到了这么一个问题，在C语言中，所谓的拷贝，就是分两种情况，一种是把指针地址拷贝给另外一个变量，虽然也开辟的了一个内存空间，在栈上也存在着一个地址，我对这个变量进行修改，同一个指针是会改变其值的，这种拷贝叫浅拷贝。另外一种情况，直接开辟一个新空间，把需要复制的值都复制在这个新的空间中，这种拷贝叫中深拷贝。
如果看到上述的一段Js代码，很多人说它是浅拷贝，假设传入一个a对象，拷贝完成之后返回一个d，当我修改返回对象的值时并不能同时修改a对象，于是，在这里我有一个很大的疑问，在Js中到底什么是浅拷贝，什么是深拷贝的问题？
这一点上感觉Js真的很奇葩，如果在开发ios中，不可变对象copy一下，依然是不可变，所以是浅拷贝，拷贝了指针变量中存储的地址值。如果是可变对象copy一下，到不可变，空间变化了，包括不可变mutableCopy到不可变，空间依然变化了，所以是深拷贝。但是JavaScript中对于这一点要考虑一种情况，值类型，和引用类型，这个基础知识，我相信大家都非常清楚。数字，字符串等都是值类型，object，array等都是引用类型。
var a = [1,2,3];
var b = a;
b.push(4);
console.log(a); //[1,2,3,4]
var numb = 123;
var _numb = numb;
_numb = 567;
console.log(numb); //123
从这个例子中可以看的出来，它们使用的都是＝符号，而数组a发生了变化，numb数字却没有发生变化。那么从这里，可以有一个总结，所谓了深拷贝，浅拷贝的问题，应该针对的是有多个嵌套发生的情况。不然假设是这样的情况，还能叫浅拷贝么？
var object = {"de":123};
var o = copy(object);
o.de = 456;
console.log(object) //{"de":123}
明显对象o中的de属性修改并没有影响到原始对象，一个对象中的属性是一个字符串，如果从内存空间的角度上来说，这里明显是开辟了新的空间，还能说是浅拷贝么？那么针对另外一种情况。
var object = {
"de":{
"d":123
}
}
var o = deepCopy(object);
o.de.d = "asd";
如果一个对象中的第一层属性，不是值类型，只单层循环，这样来看的话确实是一个浅拷贝，因为在Js中引用类型用＝赋值，实际上是引用，这样说的通。所以，深拷贝，还需要做一些处理，把object，array等引用类型识别出来，深层递归到最后一层，一个一个的拷贝。
var deepCopy = function(o){
var target = {};
if(typeof o !== ‘object‘ && !Array.isArray(o)){
return o;
}
for(var k in o){
target[k] = deepCopy(o[k]);
}
return target;
}
思路是如此，这个例子只考虑了两种情况，对象和数组，为了验证这样的思路，最后的结果与预期是一样的。
var _copy = {
‘object‘:{
‘name‘:‘wen‘
},
‘array‘:[1,2]
}
var h = deepCopy(_copy);
h.object.name = ‘lcepy‘;
h.array[1] = 8;
console.log(h);
console.log(_copy);
面向对象
面向对象的语言有一个非常明显的标志：类，通过类来创建任意多个具有相同属性和方法的对象，可惜的是Js里没有这样的概念。
但是Js有一个特性：一切皆是对象。
聪明的开发者通过这些特性进行摸索，于是迂回发明了一些程序设计，以便更好的组织代码结构。
工厂模式
主要是用来解决有多个相同属性和方法的对象的问题，可以用函数来封装特定的接口来实现
var computer = function(name,version){
return {
‘name‘:name,
‘version‘:version,
‘showMessage‘:function(){
alert(this.name);
}
}
}
var test = computer(‘apple‘,‘11.1‘);
test.showMessage();
构造函数模式
我们知道像原生的构造函数，比如Object，Array等，它们是在运行时自动出现在执行环境中的。因此，为了模仿它，这里也可以通过一个普通的函数，并且new出一个对象，这样就成为了自定义的构造函数，也可以为他们添加自定义的属性和方法。
但是这样的构造函数有一个缺陷，就是每个方法都会在每个实例上创建一次，因为每次创建都需要分配内存空间，但是有时候这样的特性还是有用的，主要是要控制它们，在不使用的时候释放内存。
var Computer = function(name,version){
this.name = name;
this.version = version;
this.showMessage = function(){
alert(this.name);
}
}
var apple = new Computer(‘apple‘,2014);
var dell = new Computer(‘dell‘,2010);
apple.showMessage();
dell.showMessage();
像apple，dell是通过Computer实例化出来的不同的对象，但是它们的constructor都是指向Computer的。这里也可以使用instanceof来对（对象）进行检测。
在书写上构造函数跟其他函数是没有什么区别的，主要的区别还是在使用上，构造函数需要使用new操作符。
其实这样的书写，已经跟类没有什么区别了，表面上来看，而构造函数我个人更倾向于一个类的某个静态方法。
原型模式
说到原型模式就不得不提一提关于指针的问题，因为每一个函数都有一个prototype属性，而这个属性是一个指针，指向一个对象。
C语言描述指针，这个在iOS开发中非常重要
比如我先定义一个int类型的指针变量和一个普通的int类型数据，然后给指针变量赋值。
int *p;
int pp = 123;
p = &pp;
*p = 999;
printf(‘%d‘,pp);
*是一个特殊符号用于标明它是一个指针变量。
&是地址符
分析这个就要说到栈内存和堆内存了，比如*p在栈内存中分配了一个地址假设是ff22x0，它还没有空间。而pp存在一个地址ff23x0，并且分配了一个空间存储着123，这个地址是指向这个空间的。
p = &pp 这样的赋值操作，也就是把ff23x0取出来，并且给p分配一个空间把ff23x0存储进去，并且ff22x0指向这个空间。
*p = 999 从这里就可以看出来p操作的是地址，而这个地址不就是ff23x0么，于是pp成了999。
所谓的指针也就是存储着地址的变量。
回到原型上，如果每一个函数中的 prototype属性都是一个指针，实际上它只是一个地址引用着一个空间，而这个空间正是我们写的xxx.prototype.xxx = function(){}这样的代码在运行时分配的空间。那么可见，使用原型的好处是空间只分配一次，大家都是共享的，因为它是指针。
先看一个例子
var Computer = function(name){
this.name = name;
}
Computer.prototype.showMessage = function(name){
alert(name);
}
var apple = new Computer(‘apple‘);
var dell = new Computer(‘dell‘);
Computer.prototype.isPrototypeOf(apple);
在解释这个原型链之前，还要明白Js的一个特性，就是如果自身不存在，它会沿着原型往上查找。它的原理稍微有些绕，Computer自身的prototype是指向它自身的原型对象的，而每一个函数又有一个constructor指向它自身，prototype.constructor又指向它自身。于是Computer的两个实例apple，dell内部有一个proto属性是指向Computer.prototype的，最后的结果是它们可以使用showMessage方法。
当然它们还有一个搜索原则，比如在调用showMessage的时候，引擎先问apple自身有showMessage吗？“没有”，继续搜索，apple的原型有吗，“有”，调用。所以从这里可以看出，this.showMessage是会覆盖prototype.showMessage的。
另外还可以使用isPrototypeOf来检测一个对象是否在另一个对象的原型链上，上述的代码返回的是true。
apple.hasOwnProperty(‘name‘)
apple.hasOwnProperty(‘showMessage‘)
使用hasOwnProperty来检测到底是对象属性还是原型属性，使用this创建的属性是一个对象属性。
从上面可以看出来原型链的好处，但是它也不是万能的，正因为指针的存在，对于某些引用类型来说这个就非常不好了，我需要保持原对象属性值是每一个对象特有的，而不是共享的，于是把之前的构造函数与原型组合起来，也就解决了这样的问题。
var Computer = function(name){
this.name = name;
}
Computer.prototype.showMessage = function(){
alert(this.name);
}
var apple = new Computer(‘apple‘);
apple.showMessage();
这样的结果是在对象中都会创建一份属于自己的属性，而方法则是共享的。
动态原型模式
有时候遇到某些问题需要动态添加原型，但是实例中是不能添加的，所以绕来一下，在初始化构造函数中添加。
var Computer = function(){
if(typeof this.showMessage !== ‘function‘){
Computer.prototype.showMessage = function(){
}
}
}
只要初始化了一次，以后就不用修改了。
寄生构造函数模式
这种模式的原理就是在一个函数中封装需要创建对象的代码，然后返回它。
var test = function(name){
return {
‘name‘:name
}
}
var g = new test(‘apple‘);
var f = de(‘dell‘);
看起来它跟工厂模式还是很像的，
稳妥模式
这种模式主要是在解决需要安全的环境中使用，一般来说一个类如果不提供getter，setter方法，是不允许直接访问和修改的。
var computer = function(name){
var _name = name;
return {
‘getter‘:function(){
return _name;
},
‘setter‘:function(name){
_name = name;
}
}
}
这样的方式可以保证属性或者说是数据的安全性，不允许直接随便修改，如果不提供setter方法的话，压根就不允许。
继承
谈到面向对象，那么就不能不谈谈继承的问题了，而在Js中主要是将原型作为实现继承的主要思路。
var Computer = function(name){
//this.name = name;
}
Computer.prototype.show = function(){
alert(‘computer‘)
}
var Apple = function(){
}
Apple.prototype = new Computer();
Apple.prototype.hide = function(){}
Apple.prototype.show = function(){
alert(‘apple‘)
}
var apple = new Apple();
apple.show();
alert(apple instanceof Computer);
使用这样的方式，实际上是从Computer的实例中先借它的prototype中所有的方法，但是这里会存在几个问题。
- 如果Computer中需要传入参数，比如name，借的时候我根本不知道要传入什么参数。
- 在Apple中如果要继续给原型添加方法，那么就不能使用字面量的形式了，它会覆盖掉
- 如果要重写父类中的方法必须要在借prototype之后
- 那么如何确定原型和实例的关系？貌似用instanceof和isPrototypeOf都会返回true
解决问题一如何传入参数
我们知道Js中有两个方法可以改变函数的上下文，apply和call，实际上类就是函数，这里既借属性也借prototype，不就可以解决这样的问题了么。
var Computer = function(name){
//this.name = name;
}
Computer.prototype.show = function(){
alert(‘computer‘)
}
var Apple = function(name){
Computer.call(this,name);
}
Apple.prototype = new Computer();
var apple = new Apple(‘apple‘);
alert(apple instanceof Apple);
alert(apple instanceof Computer);
在运行时先借prototype，然后再借子类的this，但是这个也有个问题，那就是会调用两次父类。
继承的技巧
还有一种继承是生成一个临时对象，然后临时对象借需要继承的父类的prototype。
var extend = function(o){
var F = function(){}
F.prototype = o;
return new F();
}
var parent = {
‘name‘:[‘lcepy‘]
}
var game = extend(parent);
game.name.push(‘wow‘);
var _game = extend(parent);
_game.name.push(‘view‘);
使用这样的方式有个很大的缺陷，那就是不要借属性之类的数据，因为它们是共享的，这是一个浅拷贝，还是因为指针的原因。不过要是继承方法，这种方式很方便。
还有一种方式跟上述类似，主要是封装了一层函数，用来返回对象。
寄生组合继承
这样的方式主要解决的问题是调用两次父类的问题，避免额外的借来的属性或方法。想想看第一次Computer.call(this)，借来了this上的属性或方法，第二次Apple.prototype = new Computer()，又借来了this上的属性或方法，这里的初衷是想借原型，没办法这个是实例，所以该借的不该借的都借来了。那么要避免这样的问题，就要解决继承属性的继承属性，继承原型的继承原型，也不乱借。
var extendPrototype = function(sub,supers){
var F = function(){}
F.prototype = supers.prototype;
var _f = new F();
_f.constructor = sub;
sub.prototype = _f;
}
var Computer = function(name){
this.name = name;
}
Computer.prototype.show = function(){
alert(this.name);
}
var Apple = function(name){
Computer.call(this,name);
}
extendPrototype(Apple,Computer);
var apple = new Apple(‘apple‘);
apple.show();
第一步把supers的原型赋值给F，第二步创建F的实例，第三步把_f实例的constructor属性修改成子类，第四步把_f实例赋值给子类的prototype。
这样的话就是不该借的也不会继承了
理解内存管理
一般来说内存管理主要有这么几种方式，引用计数和标记，而JavaScript采用的就是标记管理的方式。Js的内存管理是自动的，但是并不是说执行完后立马销毁，而是有时间周期性，相隔一段时间执行一下垃圾回收，把没有引用的内存全部销毁。
OC中采用的是引用计数来手动管理内存，这样的方式比较好，可以让开发者自己来管理。当然也有不好的地方，如果遗忘了释放，很可能引起应用的崩溃。
总体来看在IE中因为COM组件的原因，可能会发生循环引用的问题，这个问题在引用计数的内存管理都会遇见。所谓的循环引用是指在对象A中包含了一个指向B的指针，然后再对象B中包含一个指向A的指针，于是悲剧了。
var element = document.getElementById(‘doc‘);
var my = {};
my.element = element;
element.my = my;
大家都引用，于是，可想而知。要避免这种问题，一定要在不使用的时候my.element = null，把它断开。
那么，其他浏览器呢？还是标记清理的机制，比如一个函数的变量，在进入环境时标记上“进入环境”，执行完之后标记上“离开环境”，然后等待系统来释放。
IE有一个手动释放的方法，window.CollectGarbage，调用它就立马释放已经标记离开环境的变量，不过很多文章都不建议这样做。
那么一般都这样做，引用类型的释放
var my = {};
//使用完毕之后
my = null;
让my脱离执行环境，标记上已经离开环境，然后等待系统执行垃圾回收，释放内存。
XMLHttpRequest
注明： IE8已上，支持现代XMLHttpRequest
客户端Js与服务器进行网络交互必备的一个玩意，它不支持跨域，若要跨域还需要进行一些额外的处理。
var xhr = new XMLHttpRequest();
在使用xhr对象时，要调用的第一个方法是open()，它接受三个参数［发送请求的类型，请求的URL，描述是否同步还是异步的布尔值］false同步，true异步。
关于Ajax同步异步的个人理解：
- 同步，是用数据块的方式来传输的，在Js执行的表现上，当执行到这个Ajax请求时会等待它与服务器交互成功之后才能执行下面一行的代码，也就是阻塞。
- 异步，是用字节来传输的，它不等待是否成功，会执行之后的代码
结束时需要调用xhr.send()，如果没有发送数据的主体，必须要null，做为发送参数。另外在接收到响应之前还可以调用abort()来取消异步请求（不建议调用它）
HTTP状态验证
当收到响应后会自动填充xhr对象，它有几个比较重要的状态，我们必须要了解清楚与处理。
- responseText:作为响应主体返回的文本
- responseXML:如果响应内容的类型是"text/xml"或者"application/xml"，这个属性中保存的就是XML的DOM文档
- status：响应的HTTP状态
- statusText：HTTP状态的说明
- readyState：用于描述请求发送到完成的过程
正常情况下需要检测status === 200 readyState === 4 这就表示responseText或者responseXML中已经填充了全部的数据可以提供给客户端使用了。
1 开头的用于描述请求已经发送，需要请求者继续操作才能继续的状态
2 开头的用于描述请求已经成功
3 开头的用于描述成功，但是还需要继续操作
4 开头的用于描述客户端发送了什么数据导致服务器错误
5 开头的用于描述服务器错误（常见的如，服务端代码抛错了）
readyState状态
0 未初始化，还没有调用open方法
1 已经调用open方法，还没有调用send方法
2 已经调用send方法，但是还没有接收到响应
3 已经接收了部分数据
4 已经接收了全部的数据
xhr对象其他方法或事件
每一个请求和响应都会带有相应的HTTP头信息，其中对开发者是很有用的，而xhr对象提供了一个setRequestHeader方法来设置头信息，它必须在调用open方法之后并且在send方法之前。
既然有设置，那么必须得有获取，xhr对象也提供了两个方法分别来获取，getResponseHeader传入一个头部字段名来获取，getAllResponseHeaders来获取全部的头信息。
而接收数据则需要处理onreadystatechange事件，每次刷新状态时，系统都会重新调用此事件。
跨域
客户端Js出于安全的考虑，不允许跨域调用其他页面的对象，正是因为这样才给Ajax带来了很多不方便的地方。跨域最简单的理解就是因为Js同源策略的存在，比如a.com域名下的Js不能访问b.com下的Js对象。
- 协议端口没法跨，客户端
- 在跨域上，域仅仅是通过首部来识别，window.location.protocol +window.location.host
利用document.domain和iframe来设置
对于主域相同而子域名不同的情况，可以通过document.domain来处理，比如www.163.com/index.html和wow.163.com/wower.html，在这两个文件中分别加入document.domain = "163.com"，然后在index.html页面中创建一个iframe引入wower.html，获取iframe的contentDocument，这样这两个js就可以交互了。
index.html
document.domain = ‘163.com‘;
var iframe = document.createElement(‘iframe‘);
iframe.src = ‘http://wow.163.com/wower.html‘;
iframe.style.display = ‘none‘;
document.body.appendChild(iframe);
iframe.onload = function(){
var doc = iframe.contentDocument || iframe.contentWindow.document;
//现在可以通过doc来操作wower.html中的js对象了
}
wower.html
document.domain = ‘163.com‘;
使用这样的方式来实现的跨域是有限制的
- 主域名必须是同一个
- 安全性引发的问题，比如第一个页面出现了安全问题，在后面的页面也会出现
- iframe引用过多的话，每一个iframe都必须设置document.domain，比较琐碎
偶尔可以使用一下
利用window.name
稍微有些绕，但是数据量比较大，也比较安全
- wow.163.com/app.html 应用所在的页面
- wow.163.com/empty.html 中间代理页面，搞个空的即可，但是必须在主域名下
- www.qq.com/data.html 需要交互的数据页面
在data.html页面中
window.name = 123;
app.html页面中创建一个隐藏的iframe，它的scr指向data.html，在onload事件中，把当前iframe的contentWindow.loaction修改成empty.html，当再次onload时就可以通过contentWindow.name来获取到123了。
偶尔使用
利用iframe和location.hash
利用这种方式，说实话（不建议），比较绕，而且数据量小，直接暴露在URL上。它的原理主要是这样的，假设wow.163.com/index.html页面，wow.163.com/empty.html（空的，什么内容都没有），需要交换数据的页面在www.qq.com/a.html上。
在wow.163.com/index.html#（＃号就是我们要传递的数据），创建一个隐藏的iframe，hash值可以当参数传递给www.qq.com/a.html#()，在www.qq.com/a.html中可以获取到hash值，根据它进行处理，然后在www.qq.com/a.html页面中创建一个隐藏iframe，把处理的结果当hash值进行传递，给wow.163.com/empty.html#()这样，在同一个域名下，wow.163.com/empty.html中的js可以通过parent.parent.location.hash = self.location.hash来改变hash值，这样就达到了跨域的目的。
不建议使用，坑爹的思路
JSONP
这种方式是目前开发时最常用的一种方式，利用动态创建script标签来实现跨域的目的，虽然浏览器有显示Js对象的访问，但是它没有限制Js文件的加载，任何域名下的Js文件都可以加载。
对客户端而言，文件的加载其实就是发送一次GET请求，在服务端实现时，也就是处理这次的GET请求，并且响应，参数可以通过?来带走，俗称一波流。
在客户端上对于script文件加载是否已经完毕的判断，IE是判断script标签的readystatechange属性，而其他浏览器是onload事件。
突然感觉做移动端不考虑IE的兼容，果然是杠杠的，建议使用
HTML5 postMessage
主要是利用window.postMessage来发送消息，监听window.message来获取消息，判断origin可以判断消息来源，data获取消息内容，soucre来引用发送方的window对象引用。
www.b.com/b.html发送消息给www.a.com/a.html
window.postMessage(‘hello‘,‘www.a.com/a.html‘)
window.addEventLister(‘message‘,function(event){
if(event.origin === ‘http://b.com‘){
//处理
}
})
iframe的发送方式
contentWindow.postMessage(‘data‘,‘b.com‘)
话不多说，移动端这种跨域方式也很常用（建议推荐使用）
HTML5 跨域头 XMLHttpRequest2
如果是自己产品，又是做移动端可以使用，比上述任何方式都要方便，需要服务端支持响应时也要设置跨域头。
如果服务器响应此头，浏览器会检查此头，它的值表示请求内容所允许的域名，也就是如果是*号，表示所有域都可以访问，如果这里是a.com，表示除了同源外，只允许来自a.com域的访问。
Access-Control-Allow-Origin：＊
如果需要读取cookie则需要设置它
Access-Control-Allow-Credentials:true
设置允许跨域的请求类型
Access-Control-Allow-Methods:POST
兼容性问题，某些版本的浏览器需要在open之后，设置xhr.withCredentials ＝ true;话不多说，建议推荐使用
浏览器对象模型
BOM提供了很多对象，它的核心是window，表示它是浏览器的一个实例，在ECMAScript中又是Global对象。它提供了很多访问浏览器的功能，这些功能与网页无关，所以缺少事实标准的BOM既有意思又有些坑。复习它，主要是复习几个比较有用的对象，其他可以了解一二。
location
算起来它是我用的最多的一个对象
它提供了当前窗口加载的页面有关的信息，也对URL进行了片段分解，既是window的属性，也是document的属性。
- hash 返回URL的散列（#号后面跟着的零个或多个值）
- host 返回服务器名称和端口号
- hostname 返回不带端口号的服务器名称
- href 返回当前加载页面的完整URL
- pathname 返回URL中的目录或文件名
- port 返回URL中指定的端口号
- protocol 返回页面使用的协议
- search 返回URL中的查询字符串，它以问好（?）开头
上述的属性基本上都可以直接使用，search除外，它返回的是一个完整的查询字符串，没有办法访问其中的每个查询字符串参数，还需要额外的进行处理。
一般来说根据它的特点，?开头&拼接，key=value的形式来展现，最好是key和value都要decodeURIComponent一下。
在location中除了上述的属性外，还有一些比较有用的方法和技巧，主要是用来控制页面跳转的问题。
- assign方法接收一个参数，表示立即打开一个新的页面并在历史纪录中生成一条记录，它的效果等同于window.location.href = ‘‘或者location.href = ‘‘
- 修改location对象的属性比如href，hash，search等也可以来改变URL
- replace方法接收一个参数，既跳转到新的URL上，并且不会在历史纪录中增加一条新的纪录
- reload表示重新加载当前页面
处理框架，设置时间，open，窗口位置，窗口大小
open现在估计没人会用了
如果页面中包含框架，则每个框架都有自己的window对象，可以使用frames来获取，比如frames[0]或者frames[‘name‘]。这里还要了解的是top，parent，对于这些只要理解的层级关系，每一个指向都是会非常清楚的。
在做某些动画效果的时候，主要是针对PC端，可能会使用到窗口位置，窗口大小的属性来进行计算，比如innerWidth，innerHeight，outerWidth，outerHeight，获取到这些尺寸，一般会与当前div的高宽进行减法来获取精准的位置。
setTimeout和setInterval是进行时间调度的函数，我们知道Js是单线程的，但是可以使用这个在特定的时间范围内执行代码，前面一个setTimeout是在指定的时间内执行（只执行一次），后面的setInterval则是以指定的时间重复执行（N次）
navigator
用这个一般是在统计用户浏览器版本，操作系统等场景下才用的上，偶尔有几个会比较实用。
- cookieEnabled 判断cookie是否开启
- userAgent 浏览器用户代理字符串
- plugins数组 主要是用来检测浏览器安装的插件
screen
在Js中有几个对象在编程里真用不上，这个就是其中之一。它主要是用来表明客户端的能力，比如显示器的信息，像素，高，宽等。
history
history对象保存着用户上网的历史纪录，但是这个也是非常不常用。主要是用go方法，back方法，forward方法。
说实话，后面三个navigator,screen,history基本上很废材，HTML5中的history对象pushState非常有用外。
文档对象模型
DOM是针对HTML和XML文档的一个API，主要是使用JavaScript来进行编程操作HTML和XML文档。其他语言如果实现了DOM标准，理论上也是可以使用这个API的，这里仅仅讨论JavaScript的应用。
理解层级结构与关系
在浏览器中比如HTML页面是由很多有层次结构的标签组成的，而为这些标签提供查询，添加，删除等等方法主要就是DOM在提供支持。
（页面又称为文档）文档中所有的节点之间都存在这样或那样的关系，比如下面一个经典的HTML：
<html>
<head></head>
<body></body>
</html>
一个标签又可以称为一个元素，head和body那就是兄弟关系，它们都来自一个父系html，又可以说html的子元素是head和body，可能这样描述还不太明显，这样就用原生Js操作DOM来的方式来看看层级结构。
var html = document.getElementsByTagName(‘html‘)[0];
先通过getElementsByTagName获取html根元素的节点，每一个元素都有一个childNodes集合和一个parentNode分别代表子节点集合和父节点，如果不存在，则都是null，如果是集合不存在，则是一个[]。
html的childNodes //[head,body] html的parentNode // document
每一个元素也都有一个firstChild和lastChild来分别代表第一个子元素和最后一个子元素
每一个元素也都有一个nextSibling和previousSibling分别代表前面一个元素和后面一个元素，以当前自己为参照物。
从这样可以看出来，它就像族谱一样对元素的关系进行了定义，通过理解这些层级关系，利用DOM提供的API可以很顺利的进行操作。
操作DOM
常见的获取方式
- document.getElementById （通过ID来获取到节点）
- document.getElementsByTagName （通过节点标签来获取）
- document.querySelector
- document.querySelectorAll
后面两个属于HTML5提供的新API，在移动端会用的比较多，前者是获取单个，后者获取集合。
常见添加，删除
- appendChild
- insterBefore
- replaceChild
- removeChild
appendChild主要是向childNodes集合的末尾添加一条元素，insterBefore可以用来插入特定位置，两个参数，要插入的节点和作为参照的节点，更新成功后插入的节点会在参照节点之前，也就是参照节点的previousSibling。replaceChild和insterBefore有些类似，两个参数，要插入的节点和参照节点，更新成功后，要插入的节点会替换参照节点，removeChild就比较好理解了，删除一个节点，这四个方法都有返回值。
常见元素属性
一般来说，如果var doc = document.getElementById(‘doc‘);doc.id = ‘xx‘;这样的方式也是可以更新或者获取到元素的属性的，不过不推荐这么使用，要获取元素的属性，DOM API也提供了三个方法来使用。
- getAttribute
- setAttribute
- removeAttribute
getAttribute可以获取元素的属性，setAttribute可以对元素的属性进行设置，如果属性名不存在，则创建该属性。removeAttribute则是完全删除此属性。
还有一个属性attributes，主要是获取元素属性集合，这个不是很常用，主要是在遍历元素属性时会使用到，它是一个集合。
常见创建元素或文本
一般情况下创建元素都会使用字符串的形式，innerHTML进去。不过，某些情况下，会用到createElement来创建一个元素，如果用到它，那么创建的文本也必须使用createTextNode了。
对于文本节点，注释节点等开发真的很少用，可以当一个子类大概了解即可。
关于模式的讨论，主要可以用document.compatMode来判断，如果是CSS1Compat就是标准模式，移动端不会出现这样的情况，IE上可能有别的模式，模式主要是影响到CSS布局上，Js影响非常少。
在移动端上滚动是一个比较要处理的问题，一般来说会使用scrollIntoView，scrollIntoViewIfNeeded，scrollByLines，scrollByPages，这四个方法safari chrome都有实现，意味着在iOS和安卓平台都是良好的。
- scrollByPages 将元素的内容滚动到指定的页面高度，具体的高度是由元素的高度来决定的。
- scrollByLines 将元素的内容滚动到知道的行数高度，参数可正可负。
- scrollIntoViewIfNeeded，当元素在视窗（viewport）不可见，会滚动容器元素或者浏览器窗口让其可见。如果是可见的，这个方法不起任何作用。如果参数为true，可能是垂直居中的可见。
- scrollIntoView 滚动容器元素或者浏览器窗口，让元素可见。
一些小技巧
每一个元素都存在一个contains方法，用来检测传入的节点是不是当前节点的子节点，火狐对于的方法名叫compareDocumentPosition。
如果要获取一个文本节点可以使用innerText（纯文本）来获取字符串，如果要获取所有的包括标签的字符串可以使用innerHTML。它们还有一种outer系列对应的方法，主要的区别是前者（outerText）会替换节点，后者(outerHTML)会修改调用它的元素，一般基本没人使用。它们可以获取，也可以通过赋值来设置新的节点。
DOM2和DOM3
对于这两级在DOM中基本上IE没啥支持，或者说支持的非常少，像style对象，CSS的一些对象外。
这里最大的变化是增加了对XML命名空间的支持，元素样式的访问，节点的遍历以及range。当然目前来看，节点的遍历，range，XML命名空间在开发中使用的非常少，可以当资料来阅读，了解有这么回事，用到的时候再查询。而元素样式的访问，这个在开发中普遍使用的较多，因为在没法使用css3动画的浏览器中，可以通过改变样式来到达动画的目的。
var doc = document.getElementById(‘doc‘);
doc.style.width = ‘100px‘;
对于iframe的访问这里增加了一个contentDocument对象来进行引用，还有节点的比较，isSameNode和isEqualNode，这两个的区别在于，前者是否引用的同一个节点对象，后者是指两个节点是否是相同的类型。不过，它们使用的也不多，了解就好。
元素的大小
这个部分需要理解，因为关乎到元素在浏览器上的位置显示，跟动画有关系，四个属性。
- offsetWidth 元素在水平方向占用的空间大小
- offsetHeight 元素在垂直方向占用的空间大小
- offsetLeft 元素的左外边框到内边框的距离
- offsetTop 元素的上外边框到内边框的距离
滚动大小
这个在视察滚动或者处理滚动条的时候用的上，也是四个属性
- scrollHeight 在没有滚动的情况下，元素的总高度
- scrollWidth 在没有滚动的情况下，元素的总宽度
- scrollLeft 被隐藏在内容区域左侧的像素度
- scrollTop 被隐藏在内容区域上侧的像素度
下面这些IE全部不支持，range支持一种叫做文本范围的东西
元素遍历
关于遍历其实有两个方法可用createNodeIterator和createTreeWalker，不过这些在开发中几乎不会使用到，谁没事去遍历节点完呢。
关于range
这个也是非常少会使用到，除非是做那种编辑器应用或者在线编辑器等等，不过使用它可以更精准的控制的DOM，主要是使用createRange方法。
事件
IE浏览器的事件不是重点
事件是JavaScript与HTML进行交互的一个纽带，理解事件可以更好的处理Web应用程序，现在的浏览器中主要支持两种事件流：
- 事件冒泡
- 事件捕获
- DOM事件流
事件冒泡则是指事件开始时由具体的元素接收，然后逐级向上传播。比如：
<html>
<head></head>
<body>
<div>
<p></p>
</div>
</body>
</html>
给p标签监听一个事件，它的流向是p,div,body,html,document，其实细心看来这种流的走向会存在一个问题，给div也监听一个事件，当用户点击P的时候是会触发两次的，好在event对象中有可以阻止事件冒泡的方法。
事件捕获则是指事件由最上级接收，逐级向下传播到具体的元素上，了解了冒泡之后这个就非常好理解了，正是一个相反的步骤。
而DOM事件流又正好是冒泡与捕获的结合体，它分为三个阶段：事件捕获，目标事件，事件冒泡，如果在纸上画出来，它的走向就是一个圆形。
对于事件处理程序，写在HTML标签中的，另外一种是直接写一个function的，比如doc.onclick = function(){}，一般来说这些浏览器支持，但是基本上不会使用了。因为前者是跟HTML耦合的，不利代码维护，而且虽然HTML加载了但是Js文件还未加载，用户点击后，是直接报错的。后者虽然也可以删除，比如doc.onclick = null，对于对代码有强迫症的同学，基本上不会使用到它。
那么，我们该怎么给一个元素添加上事件处理程序呢？
DOM2级事件处理程序
- addEventLister
- removeEventLister
所有的DOM节点都具备这两个方法，它接收三个参数：
- 要处理的事件名称，比如click（这里跟上述两个以及IE注册事件都不同，不需要on）
- 需要事件进行处理的函数
- 一个布尔值，表示（true，在捕获阶段调用事件处理函数）（false，在冒泡阶段调用事件处理函数）
一般情况下第三个参数都填false
IE浏览器对应的两个方法，attachEvent，detachEvent，它们只有冒泡，事件名要加上on。
事件对象
在注册完事件处理程序后，事件的一个比较重要的对象必须要理解，event事件对象。
一般来说，这个对象中包含着所有与当前元素所监听的事件有关的信息，比如元素监听的事件类型，元素本身等等。
比较重要的属性和方法（只读）
- currentTarget 真正监听事件的那个元素
- target 事件的目标元素
- type 事件的类型
- perventDefault() 取消事件的默认行为
- stopPropagation() 取消事件的捕获或者冒泡
- bubbles 事件是否冒泡
- eventPhase 事件处理程序的三个阶段，1捕获2处于目标3冒泡
比较重要的属性和方法（读写）
- clientX 鼠标在窗口中的水平位置
- clientY 鼠标在窗口中的垂直位置
事件类型
PC端主要是针对鼠标，移动端则是触摸，手势相关的处理
如果在PC端上发生一次click事件，实际上它是发生了三次事件，mousedown当鼠标按下的时候，mouseup当用户放开的时候，click两个加起来就发生了一次click事件。相对于移动，PC上的鼠标事件非常的丰富，例如mouseover当鼠标首次移入一个元素边界时触发，mouseout当鼠标移出元素时触发，这个移出，到子元素上也会触发这个事件，mousemove当鼠标在元素内移动时重复触发。
总体来说对于文档加载，表单控件，窗口大小改变等事件，比如获取焦点，在失去或者获取焦点是值改变等移动上都是一样的，focus（获得焦点）blur（失去焦点）。
在做一些视差滚动的效果时scroll事件是非常好用，移动上在css中提供了一个类似的属性。
唯一的区别是移动端上没有键盘事件。
移动事件
- touchstart 当手指触摸到屏幕时触发
- touchmove 当手指在屏幕上连续滑动时触发
- touchend 当手指从屏幕上移开时触发
- touchcancel 当系统停止跟踪触摸时触发（这个事件没有确定的触发时间）
它们都是冒泡的，也可以取消
三个跟踪触摸事件的属性
- touches 当前跟踪触摸操作的touch数组，在touchend事件中为空
- targetTouchs 特定事件目标的touch数组
- ChangedTouches 上次触摸时发生了什么改变的touch数组
移动event事件对象
PC上存在的，在移动上也存在，描述上有差异，比如
- target 触摸的DOM节点目标
- pageX 触摸目标在页面中的X坐标
- pageY 触摸目标在页面中的Y坐标
一些手势
- gesturestart 当一个手指按在屏幕上另外一个手指又触摸屏幕时触发
- gesturechange 依赖前者当其中的一个手指发生改变时触发
- gestureend 当任何一个手指离开时触发
移动手势干货三部曲
以上是关于JavaScript基础-前端开发的主要内容，如果未能解决你的问题，请参考以下文章
markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发