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() // document
- this,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 //true
Date.prototype.name = 'aili'
date.name // aili
function 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) //true
console.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写的充实一点 干货多一点 也方便自己日后查看
大家加油
