2018年8月15日18:11:22
Promise 异步同步 闭包 对象 This 回调 BulaBulaBula
一个一个一个一个搞这些个东西搞懂了 然后去搞Nodejs 别人图快 我就图慢 慢慢来
this本质就是个隐式参数
bind=>就是显式的确定this是什么
bind window 给foo
function foo(){console.log(this)}var obj = foo.bind(document)console.dir(obj)
obj() // documentthis,new实例化与this
function foo(){console.log(this)}new foo() //{}new foo()调用时js内部会创建临时空对象 temp = {}
然后把foo()的this 绑定到空对象上去 binded = foo.bind(temp) binded()foo的this 就是空对象
原型链
__proto__
对象有此属性 js一切皆对象
__proto__.__proto__.__proto__ 这就是原型链
var obj = {} ====> var obj = new Object()function foo(){} ====> var foo = new Function()实例化时 做的事情其实就是obj.__proto__指向 Object.prototype对象的原型 与 类的原型
var date = new Date()
date.__proto__ === Date.prototype //trueDate.prototype.name = 'aili'date.name // ailifunction AA(n,c){ this.name =n this.color=c this.log=()=> console.log("color:"+this.color+"name:"+this.name)
}var a = new AA("aili","blue")console.log(a.name)console.log(a.constructor === AA) //trueconsole.log(a.__proto__ === AA.prototype)所以看到这里就很明白了
date.prototype 是没有的 只有类才有prtotype属性 对象只有proto属性而没有prototype
函数式编程
1.first-class function 作为参数传入函数
2.higher-order-function 返回函数的函数
loadash.js underscorejs升级而来的 这个库很多很多很多人推荐看源码
closure - 域
很明显 返回的匿名函数 a1 与 a2 变量存储在了 Closure里 才能访问到这两个变量
IIFE 立即执行函数表达式 ------ 模块化
immediately invoked function expression
var foo = function(){}
function foo(){}
IIFE就是基于函数表达式而产生的
(function(){}()) 会返回本身 并立即执行
;()() ;是为了防止错误最常用的模块实现方式 ----- es6之前 没有模块的概念 es5实现模块的方式就是靠IIFE例子 购物车
var Cart = (function(){ var product_list =[] return { addProduct:function(p){
product_list.push(p)
}, getProducts:function(){ return product_list
}, getToltal:function(){ return product_list.reduce((total,p)=>{ return total+=parseInt(p.price)
},0)
}
}
}())这个例子我看的好舒服 代码要是这么写 那该多舒服啊
回调函数 管理方法
有异步执行 肯定要用到回调
提取是一个程序员的基本技能回调函数比较多的时候 做成模块
var handlerMoudle = (function(){
// do something
return { h1:function(){}, h2:function(){}
}
}())//主代码可以比较清晰的用回调函数document.addEventListener('click',handlerMoudle.h1)更高级的promise aysnc await 等等 有一定的代价 有一定的场景下才能用高级方法
实际开发的时候 多层回调 这里就牵扯到封装能力和提取能力 这不是一天两天能练成的 多看多写 就okay
document.addEventListener('click',()=>{ //
//
$.get(...,function(){ //二次回调
})
})现在有了export import 就更方便
promise 状态容器
function foo(){ return new Promise(function(fullfill,reject){
setTimeout(function(){
fullfill(1)
},1000)
})
}
foo()
.then(function(input){console.log(input); return ++input})
.then(function(input){ console.log(input)
})模块间的通信与解耦 PUB/SUB
var Cart = (function(pubsub){ var product_list =[] return { addProduct:function(p){
product_list.push(p)
pubsub.publish('new-product',this.getToltal)
pubsub.publish('promotion-check',p)
}, getProducts:function(){ return product_list
}, getToltal:function(){ return product_list.reduce((total,p)=>{ return total+=parseInt(p.price)
},0)
}
}
}(pubsub))var pubsub = (function(){ var events = {} return { subscribe:function(event,listner){
events[event] = events[event] || []
events[event].push(listner)-1
}, publish:function(event,info){
events[event].forEach(item => {
item(info !=undefined ? info : {})
});
}
}
})()var cartUI = (function(pubsub){
pubsub.subscribe('new-product',function(total){ console.log('total',total);
})
}(pubsub))这三个模块 只会和pubsub打交道 不会相互引用 说实话 这样的模块写多了 我就疯了 hold不住
同步异步
这里要用到一个工具LoupeLoupe 可以清晰的查看浏览器执行的栈和队列
一些例子我还写 测试了一下
核心就是把事件的优先级 排好 这是程序员最该做的事情 因为栈是先进后出
执行顺序大概就是同步先进站 异步写入内存 然后进队列先进先出 等待 然后进栈 执行
说的有点笼统 其实就是这么个道理 所以 要 搞清楚 "事件流"的概念2018年8月16日17:06:43
先写这么多 后来在补充吧
核心的东西其实还有很多很多
毕竟一口吃不下大胖子~ 慢慢来 我会一点点补充的
争取把这篇Blog写的充实一点 干货多一点 也方便自己日后查看
大家加油
作者：zz77zz
链接：https://www.jianshu.com/p/7579963faed0
随时随地看视频
