js函数式编程
2019-04-28 08:21:41来源:博客园 阅读 ()
js 函数式编程
定义把函数作为第一类对象是函数式编程的第一步,函数式编程是一种编码风格,他通过书写函数式代码来解决问题(而不是一系列执行步骤,就像
就像那种更主流的命令式编程),函数式编程可以让代码更容易测试、扩展、及模块化
1.函数是javascript中的一等公民,(主要是的某个变量可以等于一个函数,然后是用变量名加()去调用这个函数)
1.1构造函数
1.2普通函数
1.1函数作为构造函数使用,一般构造函数的首字母大写,做为构造函数使用,我们就可以使用new去创建那个实力
function Person() { this.name = 'cz'; this.age = 19; this.sex = '男'; this.fn = function (val) { console.log(val) } } let p1 = new Person(); console.log(p1.name,p1.age,p1.sex) p1.fn('a')
1.2 作为普通函数调用,这个就是最简单的使用
function speak(val) { console.log(val+'wawawahahha'); } speak('duide')
2几种常见的函数使用
2.1 函数作为变量的使用(回调函数,)
function goback(a,b,callback) { let c = a + b; callback(c) } function cc(last) { console.log(last) } goback(1,2,cc);
/* 手动实现数组的排序功能 */
Array.prototype.zdysort = function (fn) { let len = this.length; for(let i = 0;i < len; i++) { for(let j = i+1;j < len; j++) { let temp = this[i] if(fn(this[i],this[j])) { this[i] = this [j] this[j] = temp } } } } /* 升序 */ function sort(a,b) { return a>b } let arrys = [1,25,3,6,7,9,45,21,35,62,54,21] arrys.zdysort(sort) console.log(arrys) function usort(a,b) { return a<b } arrys.zdysort(usort) console.log(arrys) // (12) [1, 3, 6, 7, 9, 21, 21, 25, 35, 45, 54, 62] // (12) [62, 54, 45, 35, 25, 21, 21, 9, 7, 6, 3, 1]
2.2函数柯里化
维基百科上说道:柯里化,英语:Currying(果然是满满的英译中的既视感),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术
/* 函数科里化 */ /* 一个简单的函数柯里化 */ function add (a,b) { return a+b; } function kadd(a) { return function (b) { return a+b } } console.log(add(1,2)) // 3 console.log(kadd(1)(2)) // 3 /* 柯里化 实现函数参数的复用 */ function Istype (type) { return function (obj) { return typeof(obj) === type } } let Isnumber = Istype('number') console.log(Isnumber(1)) console.log(Isnumber('a')) console.log(Isnumber(4)) let isobject = Istype('object') console.log(isobject({})) console.log(isobject('a')) console.log(isobject(4))
/* 使用函数柯里化实现 函数的bind */ Function.prototype.zdybind = function (content) { let self = this return function () { return self.call(content,arguments) } } function Animal(){ this.name = "Animal"; this.showName = function(){ console.log(this.name); } } // Animal.showName();// 报错 animal is not a function let a1 = new Animal(); a1.showName() // "Animal" a1.showName.call({name:'czcz'}) //czcz /* 使用自定义的bing函数 */ a1.showName.zdybind({name:'czcz'}) // 输出无 /* bind 相对于 call和apply 需要自己手动调用 */ a1.showName.zdybind({name:'czcz'})() //'czcz' 自定义的zdybind函数就实现了
函数,不得不提的就是函数上原生就有的三个方法,bind,call,apply,他们都能改变函数的执行作用域(运行时的函数this指向)
call 和 apply 基本上一样,就是传入的第二参数不一样,一个传入的参数用,call(self,a,b,c,d) bind(self,[a,b,c,d]) ,而bind和他们的区别就是bind创建后不会立即执行,上面已经实现
函数式编程远远都不止这么一点,上面只是一些平常会经常遇见的问题,函数运行时的执行环境也是非常重要的。直接调用,作为构造函数调用,箭头函数,apply bing,call,之后的函数作用域
,es6 还对函数新增的一些扩展
3.es6函数的扩展
3.1 函数的默认参数问题
function speak(name = 'cz') { console.log(`${name} i love you`) } speak() speak('czkjjj')
3.2参数的解构赋值
3.3 rest 参数,直接将argument直接转化成数组
3.4name 和length属性, name 代表函数名字, length 代表函数的参数 length 长度不包括rest 参数
3.5 es6函数最重要的扩展,箭头函数,(没有自身this的函数,只想上一级不为箭头函数的函数)
/* es6箭头函数 */ /* 数组排序是箭头函数的使用 */ let arrys = [25,1,34,5,64,15,3,1,7,84,65] let newarrys = arrys.sort(function(a,b){ return a - b }) console.log(newarrys)
/* setTimeout 中的this指向 函数体内的this对象,就是定义时所在的对象 ,而不是运行时的this*/ let obj = { a: 'czcz', b: 'dddd', c: function () { setTimeout (function () { console.log(this.a) },0) } } obj.c(); // 输出undefined 这里内部的函数最终的执行环境 window /* 改造一下函数 */ obj.d = function () { setTimeout(()=> { console.log(this.a) },0) } obj.d() // 输出'czcz' 这里内部的函数最终的执行环境 obj
原文链接:https://www.cnblogs.com/czkolve/p/10779554.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:vue slot+传参
- 如何用算法删除重复数据 2020-03-18
- 脚本调用样式的方法 2019-10-25
- JavaScript编程开发中的五个实用小技巧 2019-08-26
- 简述JavaScript模块化编程(二) 2019-08-14
- 简述JavaScript模块化编程(一) 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash