JavaScript中：箭头函数/高阶函数/函数柯里化

1高阶函数:

如果一个函数的参数是函数，或者函数的返回值是函数则这个函数我们就称其为高阶函数

- 将函数作为参数的情况：

- 将函数作为参数，主要目的是动态的向函数内部传递代码

- 作为参数的函数，它是由我们定义的，但不由我们调用

这种函数被称为回调函数（callback）

- ocp原则（开闭原则）

- 一段程序（代码）应该对修改关闭

对扩展开放

2高阶函数示例：

//创建一个函数，可以用来对数组进行筛选过滤

function filter(arr, callback) {

// 创建一个新的数组，用来存储结果

var newArr = [];

//遍历arr

for(var i=0; i<arr.length; i++){

//判断 arr[i] 是否满足条件

// 如果能够将代码，以参数的形式传递进行函数那就好了！

if( callback(arr[i]) ){

newArr[newArr.length] = arr[i];

}

}

//返回新数组

return newArr;

}

function test(n) {

return n % 2 !== 0;

}

var arr = [1,2,3,4,5,6,7,8,9,10];

// var result = filter(arr, test);

//

// console.log(result+'');

// 定义一个类

function Person(name, age) {

this.name = name;

this.age = age;

}

// 重写类的toString

Person.prototype.toString = function () {

return 'Person [name:'+this.name+', age:'+this.age+']';

};

//创建一个对象

var p1 = new Person('孙悟空', 18);

var p2 = new Person('猪八戒', 28);

var p3 = new Person('牛魔王', 68);

var p4 = new Person('红孩儿', 8);

var p5 = new Person('蜘蛛精', 16);

var p6 = new Person('玉兔精', 14);

var p7 = new Person('唐僧', 16);

var p8 = new Person('沙和尚', 38);

// 将对象放入到一个数组zh中

var personArr = [p1, p2, p3, p4, p5, p6, p7, p8];

function test2(per) {

return per.age >= 18;

}

var result = filter(personArr, test2);

// console.log(result+'');

arr = [1,2,3,4,5,6,7,8,9,10];

result = filter(arr, function (n) {return n > 3;});

result = filter(arr, function (n) {return n < 4;});

result = filter(arr, (n) => n % 2 !== 0);

// 箭头函数，箭头函数专门用来定义这种作为参数的函数

// ([形参...])=>返回值

// console.log(result+'');

var sum = (a, b) => a + b;

console.log(sum(123,456));

3函数柯里化:

函数柯里化：通过函数调用继续返回函数，达到多次传参，最后统一处理的编码方式

柯里化必然是一个高阶函数

// Currying后

function curryingAdd(x) {

  return function (y) {

    return x + y

  }

}

curryingAdd(1)(2) // 3

4箭头函数:

var fn = (a, b)=> a + b;

var fn2 = a => a + 10; // 如果函数只有一个参数，可以省略()

var fn3 = () => 30 + 10; // 如果函数没有参数，必须写()

var fn4 = () => {

var a = 10;

var b = 20;

return a + b;

};

var fn5 = () => ({a:10, b:33}); // 如果返回值是一个对象字面量，则必须在对象字面量外添加()

// console.log(fn5());

// 箭头函数的this，不由自己的调用方式决定，而是由外部函数作用域决定

// var fn6 = ()=>console.log(this);

// fn6();

var obj = {

// 为test属性赋值一个箭头函数

// test:()=>console.log(this)

t:function () {

var inner = ()=>console.log(this);

inner();

}

}

// obj.t();

// 将obj的t方法，赋值给一个变量tt

var tt = obj.t;

// tt();

5 箭头函数和普通函数的区别:

ES6中的箭头函数和普通函数有什么区别？

1、普通函数中的this总是指向调用它的那个对象，

箭头函数没有自己的this，他的this永远指向其定义环境，任何方法都改变不了其指向，

如call（）、bind（）、apply（）。（正是因为它没有this，所以也就不能用作构造函数，也没有原型对象）

2、箭头函数不能当作构造函数，也就是说，不能使用new命令，否则会报错。

3、箭头函数不能使用yield命令，因此箭头函数不能用作genertor函数。

4、箭头函数没有原型属性。

5、箭头函数不能使用argumen对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。

6、变量提升：由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，需要var(let、const）关键字，

而var所定义的变量不能得到变量提升。故箭头函数一定要定义于调用之前。

this的指向问题？

1、普通函数中，this指向其函数的直接调用者；

2、箭头函数中，this指向其定义环境，任何方法都改变不了其指向，如call（）、bind（）等；

3、构造函数中，如果不使用new,则this指向window，如果使用new创建了一个实例，则this指向该实例

4、window内置函数中，如setInterval,setTimeout等，其内部的this指向Window。

5、匿名函数的this指向Window。

6、apply()、call()、bind()可以改变this的指向

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！