JS单线程:一个时间只能进行一件事情,JS就是为了与用户交互,处理DOM,假如是多线程,同一时间修改多个DOM,另一个线程想要删除DOM,问题就会变的复杂,浏览器不知道听谁的。
遇到大量数据:vue与nodejs配合,SSR技术
JS引擎线程的执行机制:
单线程异步执行,基于事件驱动。
同步和异步任务分别会进入到两种不同的场所,同步的进入主线程,异步的进入Event Table并注册函数
当指定的事情完成时,Event Table会将这个函数移入Event Queue
主线程内的任务执行完毕,回去Event Queue读取对应的函数,进入主线程执行,上述步骤不断重复形成事件循环。
bind
改变this指向,直接可以返回一个函数,等待某个状态触发时,执行。
call和apply是调用的时候执行
function A(){
}
var o = {}
var x = 1;
var y = 2;
var z = 4;
var B = A.bind(o,x,y);
B('c')
1.函数A调用bind方法时需要传递o,x,y,z…
2.返回新的函数B
3.B在执行的时候具体的功能还是使用的A,只不过this指向变成了o,
4.函数B在执行时会拼接成1,2,4
5.new B(),构造函数依旧是A,而且A不会起到任何作用
原码:
Function.prototype.newBind = function(target){
// target改变返回函数的this指向
var self = this;
var args = [].slice.call(arguments,1)
var temp = function(){};
var f = function(){
var _arg = [].slice.call(arguments,0)
return self.apply(this instanceof temp ? this : target || window,args.concat(_args))
}
temp.prototype = self.prototype;
f.prototype = new temp();
return f;
}
function show(){
console.log(this)
}
var jingjing = {
x:18
}
var newShow = show.newBind(jingjing,1,2,3)
newShow(4);
// new newShow();
console.log(newShow().constructor)
纯函数
对于相同的输入永远会得到相同的输出,而且没有任何可观察的副作用,也不依赖外部环境的状态。
阳间解释:纯函数是指不依赖,修改其作用域之外变量的函数
到底啥用??
Bug守恒定律,我们并不能彻底清楚bug但是可以预防
纯函数非常容易进行单元测试,因为不需要考虑上下文环境,只需要考虑输入输出。
函数式编程-柯里化
函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数,并且返回接收余下参数且返回结果的新函数的技术。
函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。
简化代码结构,提高系统维护性,一个方法只有一个参数,强制功能单一性功能内聚降低耦合
期望函数传递足够参数,如果一次没传够期望你下次凑齐,期待固定数量参数
function add(a,b,c,d){
return a+b+c+d;
}
function FixedCurry(fn){
// 拿到后续参数
var _arg = [].slice.call(arguments,1)
return function(){
var newArg = _arg.concat([].slice.call(arguments,0))
return fn.apply(this,newArg);
}
}
// var newAdd = FixedCurry(add,1,2)
// console.log(newAdd(3,5))//11
function Curry(fn,length){
var length = length || fn.length
return function(){
if(arguments.length < length){
var combined = [fn].concat([].slice.call(arguments,0))
return Curry(FixedCurry(this,combined),length-arguments.length)
}else{
return fn.apply(this,arguments)
}
}
}
var newAdd = Curry(add);
newAdd(1,2,3,4);
newAdd(1,2)(3)(4);
function ajax(method,url,data){
}
var ajaxCurry = Curry(ajax);
var PostAjax = ajaxCurry('POST')
PostAjax('www.baidu.com','name = lxj&code=111');
var PostAjax2 = PostAjax('www.baidu.com');
PostAjax2('name = lxj&code=111');
PostAjax2('key = 11')
PostAjax('www.baidu2.com','name = lxj&code=111');