前端开发基础-JavaScript(三)（前端开发教程）

继承

谈到面向对象，那么就不能不谈谈继承的问题了，而在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

• JavaScript 的同源策略

注明： 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事件，每次刷新状态时，系统都会重新调用此事件。

跨域

• HTTP访问控制(CORS)

客户端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')

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;话不多说，建议推荐使用

早读课提醒

言归正传我们在微信群中推出了《早读课》，每日分享一篇我们认真精选的文章（不限于前端开发类），其目的是帮助开发者来学习有价值的东西。想加微信群的朋友，直接添加我的微信号：icepy_1988，审核之后会邀请你入群。想加QQ群的朋友，可以直接添加：418898836，答对问题即可入群。

关注我们

更多精彩内容可关注微信公众号：搜索 fed-talk ，来关注我们吧，也欢迎你将它分享给自己的朋友。