JS执行机制,bind的模拟实现,纯函数,柯里化

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');



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值