文档章节

柯里化思想--JS中的预处理机制

boogoogle
 boogoogle
发布于 2016/05/15 12:41
字数 709
阅读 60
收藏 2

柯里化思想:就是预处理机制

利用函数执行,可以形成一个"不销毁的私有作用域的原理",
把需要预先处理的内容都存储在这个不销毁的私有作用域中
并且返回一个小函数,以后我们执行的时候,执行的都是小函数
在小函数中,把之前预先存储的值进行相关的操作即可
  • bind()
  • var预处理
  • 给元素绑定某个方法的时候,当该方法执行的时候,浏览器会自动给当前的方法传递一个参数值--事件对象.同时,该方法中的this是元素本身
var obj = {name:'我对象呢'}
function fn(num1,num2) {
	console.log(this,num1+num2);
}
window.setTimeout(fn.call(obj),0);

此处 fn.call(obj)没有返回值,所以相当于

window.setTimeout(undefined,0)//并不会有输出

可以做如下修改

window.setTimeout(fn.bind(obj),0);// 输出obj

此处的bind就是利用了柯里化思想,将fn中的this"预处理"成了window

关于call 和 bind的区别,此处略去.bind在ie678下不兼容 Function.prototype.bind的原理:就是执行这个方法的时候,返回一个匿名函数 然后在匿名函数中把需要处理的函数以及this进行初始化

function myBind(callback,context){
	// 我们模拟bind方法,让callback中的上下文变成我们传入的context
	context = context || window;

	// 获取给小函数传入的参数值 -> 这些参数值是除去callback和context之外的传参
	var outAry = Array.prototype.slice.call(arguments,1);

	// 返回一个待执行的匿名函数
	return function(){
	// 我们的目的是通过bind返回一个函数
	// 这个函数中的this已经被修改
	// 函数不会被立即执行
		//callback.call(context);
		callback.apply(context,outAry);//因为传入参数是一个类数组,所以从call改为apply
	}
}

对于元素的事件绑定:如果使用了bind方法,预先处理了this,那么bind方法会把浏览器传递的事件对象放在当前函数的最后一个参数中

div1.onclick = fn.bind(obj,100,200);// -> 输出:obj, MouseEvent undefined

相当于 ->

//这是js中bind的原理,它默认把事件e传递给了fn的最后一个参数
div1.onclick = function(e){
	fn.call(obj,100,200,e);
}

我们重写一下,把myBind方法写在Function的原型上

Function.prototype.myBind = function(context){
	var _this = this;
	var outerAry = Array.prototype.slice.call(arguments,1);
	return function(){
		var innerAry = Array.prototype.slice.call(arguments,0);
		_this.apply(context,outAry.concat(innerAry));
	}
}

© 著作权归作者所有

boogoogle
粉丝 11
博文 105
码字总数 26870
作品 0
昌平
前端工程师
私信 提问
JavaScript 中的反柯里化

作为函数式编程语言,JS带来了很多语言上的有趣特性,比如柯里化和反柯里化。 可以对照另外一篇介绍 JS 柯里化 的文章一起看~ 1. 简介 柯里化,是固定部分参数,返回一个接受剩余参数的函数,...

SHERlocked93
05/19
0
0
JavaScript进阶之函数柯里化

前言 函数柯里化(currying)就是将使用多个参数的函数转换成一系列使用一个参数的函数的技术。 柯里化让我们把注意力集中到函数本身,而不是冗长的数据参数之中,使代码更简洁,帮助我们写出P...

EdwardXuan
04/17
0
0
JavaScript 中的柯里化

作为函数式编程语言,JS带来了很多语言上的有趣特性,比如柯里化和反柯里化。 这里可以对照另外一篇介绍 JS 反柯里化 的文章一起看~ 1. 简介 柯里化(Currying),又称部分求值(Partial Eva...

SHERlocked93
05/19
0
0
什么是JavaScript 函数式编程?

前言 函数式编程在前端已经成为了一个非常热门的话题。在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想。 本文将略去那些晦涩难懂的概念介绍,重点展示在 JavaScri...

浪里行舟
08/08
0
0
一文带你了解JavaScript函数式编程

摘要: 函数式编程入门。 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有。 前言 函数式编程在前端已经成为了一个非常热门的话题。在最近几年里,我们看到非常多的应用程序代码库里大...

Fundebug
08/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
176
8
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部