阳光培养计划（1）

但是工作两年是需要总结下，列阳光培养计划如下

原生js, 原生的继承，解释事件代理，闭包，作用域，原型；

浏览器解析dom过程；

http流程的重点解析：图解http，content-type,跨域；

性能和兼容性的案例；

设计模式，算法；

原型

目的是使同类的不同实例共有某些属性，这些属性在构造函数的prototype属性上

isPrototypeOf() 判断实例是和构造函数的原型之间的关系构造函数.prototype.isPrototypeOf(实例)

hasOwnProperty() 判断属性是本地属性，还是来自原型

in运算符遍历所有属性

解释 `Object instanceof Function` 和`Function instanceof Object`

instanceof 计算规则，首先，对比实例和左侧是不是构造函数和实例关系，如果不是沿着实例原型链往上找，找到构造函数和和左侧名称一致返回true；
1
2
3
4
5
6
7
function Foo(){}
var foo =new Foo();
     __proto__                   __proto__                     __proto__
foo -----------> Foo.prototype -----------> Object.prototype -----------> null
      __proto__                        __proto__                      __proto__
Foo -----------> Function.prototype -----------> Object.prototype -----------> null

  function Object(){}
  Object函数 是Function的实例化

  function Function(){}
Function.proptotype.__proto__ =Object.prototype
Object.prototype.constructor = Object
Function函数 是Function的实例化

`任何函数都是Function函数的实例；任何实例都是函数的new出来的；`

原生的对象继承；

非构造对象

循环属性继承

构造函数对象

两种，（1）in操作符循环属性继承 （2）原型链继承

原型链继承

//原型继承（普遍，多实例，消耗内存）
	function sup(){}
	function sub(){
		sup.call(this,arguments)
	}
	sub.prototype = new sup();
	sub.prototype.constrctor = sub;
//原型继承（空对象辅助，只继承原型上的属性）
	function extend(Child, Parent) {
　　   var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

##闭包
只是为了跨越作用域访问变量；

场景：
    1.使用闭包代替全局变量
    2.fun.bind(this);
    3.包装相关功能  debounce ,once...underscore Function 
    4.暂停执行 setTimeout当中使用self

Function.prototype.bind=function(thisArg){
    var fn=this,
        slice=Array.prototype.slice,
        args=slice.call(arguments,1);
    return function(){
        return fn.apply(thisArg,args.concat(slice.call(arguments)));
    }
};

Promise $.Deferred()

function a(){
	var def = new $.Deferred();
	$.ajax({
		success:function(){
			def.reslove();
		},
		error :function(){
			def.reject();
		}
	})
	return def.promise();
}
a().then(cbk1).fail(cbk2);

a,then,fail执行返回同一个def对象；
当reslove方法执行的时候，调用cbk1,fail道理相通

事件

事件阶段

事件捕获 addEventListener(“”,cbk,boolean) 第三个参数设置成true来为事件的捕获阶段添加监听回调函数
目标阶段
冒泡阶段 event.stopPropagation()组织冒泡 e.preventDefault()组织默认行为

event 对象

type (String) — 事件的名称
target (node) — 事件起源的DOM节点
currentTarget?(node) — 当前回调函数被触发的DOM节点（后面会做比较详细的介绍）
bubbles (boolean) — 指明这个事件是否是一个冒泡事件（接下来会做解释）
preventDefault(function) — 这个方法将阻止浏览器中用户代理对当前事件的相关默认行为被触发。比如阻止元素的click事件加载一个新的页面
stopPropagation (function) — 这个方法将阻止当前事件链上后面的元素的回调函数被触发，当前节点上针对此事件的其他回调函数依然会被触发。（我们稍后会详细介绍。）
stopImmediatePropagation (function) — 这个方法将阻止当前事件链上所有的回调函数被触发，也包括当前节点上针对此事件已绑定的其他回调函数。
cancelable (boolean) — 这个变量指明这个事件的默认行为是否可以通过调用event.preventDefault来阻止。也就是说，只有cancelable为true的时候，调用event.preventDefault才能生效。
defaultPrevented (boolean) — 这个状态变量表明当前事件对象的preventDefault方法是否被调用过
isTrusted (boolean) — 如果一个事件是由设备本身（如浏览器）触发的，而不是通过JavaScript模拟合成的，那个这个事件被称为可信任的(trusted)
eventPhase (number) — 这个数字变量表示当前这个事件所处的阶段(phase):none(0), capture(1),target(2),bubbling(3)。我们会在下一个部分介绍事件的各个阶段
timestamp (number) — 事件发生的时间

事件代理

节省内存，方便页面动态变化
jquery on delegate 方法

IE 与标准的对比

1.事件流的区别
冒泡型事件模型： button->div->body (IE事件流)

捕获型事件模型： body->div->button (Netscape事件流)

DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)
2.事件侦听函数的区别

IE使用:
[Object].attachEvent(“name_of_event_handler”, fnHandler); //绑定函数
[Object].detachEvent(“name_of_event_handler”, fnHandler); //移除绑定

DOM使用：
[Object].addEventListener(“name_of_event”, fnHandler, bCapture); //绑定函数
[Object].removeEventListener(“name_of_event”, fnHandler, bCapture); //移除绑定

3.事件对象定位(获取)

IE：事件对象是window对象的一个属性event，event只能在事件发生时访问，事件处理函数执行完毕，事件对象被销毁。
DOM：event对象必须作为唯一的参数传递给事件处理函数，且必须为第一个参数

4.获取目标(target)
IE：var oTarget=oEvent.srcElement;
DOM：var oTarget=oEvent.target;

5.阻止事件默认行为

IE：oEvent.returnValue=false;
DOM：oEvent.preventDefault();

6.停止事件复制（冒泡）
IE：oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();

原型

解释 Object instanceof Function 和Function instanceof Object