- JavaScript中的函数
- JavaScript中最好的特性就是它对函数的实现。它几乎无所不能。 但是,想必你也能预料到,函数在JavaScript里也并非万能药。
- 函数包含一组语句，它们是JavaScript 的基础模块单元， 用于代码复用、信息隐藏和组合调用。函数用于指定对象的行为。 一般来说，所谓编程就是将一组需求分解成一组函数与数据结构的技能。
1. 函数对象
函数的定义
- 函数是第一类对象（first-class object），被称为一等公民。函数与对象共存，我们也可以认为函数就是其他任意类的对象。由此可见，对象有的功能，函数也会拥有。
- 函数是程序执行过程中的主要模块单元，除了全局JavaScript是在页面构建阶段执行的，我们编写的所有脚本代码都将在一个函数内执行。
- 既然我们把函数看作是一类对象，那么我们在编写函数的时候就应该利用对象拥有的一些功能特性，并从中获益，编写出更高性能、更健壮的JavaScript代码。
函数是第一类对象
- 在JavaScript中，对象所拥有的功能，函数一样拥有。
- 函数也是对象，唯一不同的地方在于，函数是可以调用的（invokable），也就是说函数会被调用以便执行某项动作。
- 函数式编程更易测试、扩展和模块化。
- 函数可以通过字面量来创建
函数可以赋值给变量、数组项，或是其他对象的属性
函数可以作为参数传递给参数
函数可以作为函数的返回值
函数能够具有动态创建和分配的属性
2. 函数字面量
函数字面量由4部分组成。
var add = function (a, b) {
return a + b;
}
- 第一部分，关键词 function
- 第二部分，函数名，但是可有可无。
- 第三部分，包含在括号内的参数，当然参数也是可有可无的，括号不能少。
- 第四部分，是一组包裹在大括号的语句块，也就是函数要执行的具体代码，当然不写代码也没问题，{} 是必须要的。
乍一看，这个不就是函数的定义么，怎么说是函数字面量呢？
- 其实，当函数做为表达式的时候，可以分成这四部分。第二部分，函数名，但是可有可无。 如果是函数声明，少了函数名会报错的。 所以说函数表达式才是这里所说的函数字面量。
例如：
function () {}
- 这个写法符合上面4条，但却不是表达式，运行会报语法错误。
只有当作表达式的时候才能正常执行。
(function () {});
let a = function () {};
let obj = {fn: function () {}};
let fn = function test() {};
- 这个也是函数字面量，test是函数名，但是在这里只对函数体内可见，外部是不可调用的。
console.log(test);
- 这里的函数名可用于内部使用，比如一些递归调用的时候，这样会很方便。
3. 调用
什么是函数的调用
- 调用一个函数将暂停当前函数的执行，传递控制权和参数给新函数。除了声明时定义的形式参数，每个函数接收两个附加的参数:this和arguments。
- 参数this在面向对象编程中非常重要，它的值取决于调用的模式。在JavaScript中一共有四种调用模式:方法调用模式、函数调用模式、构造器调用模式和 apply调用模式。
- 这些模式在如何初始化关键参数this上存在差异。调用运算符是跟在任何产生一个函数值的表达式之后的一对圆括号。圆括号内可包含零个或多个用逗号隔开的表达式。每个表达式产生一个参数值。每个参数值被赋予函数声明时定义的形式参数名。
- 当实际参数（arguments)的个数与形式参数(parameters)的个数不匹配时不会导致运行时错误。如果实际参数值过多了，超出的参数值将被忽略。如果实际参数值过少，缺失的值将会被替换为undefined。对参数值不会进行类型检查:任何类型的值都可以被传递给参数。
函数的调用模式
(1) 基本函数调用模式
function basfn (){
console.log("----");
}
basfn();
- 1.每个参数作为实参传递给声明函数时定义的形参；
- 2.this被绑定到全局变量（直接调用一般指的是window）
var object1 = { value: 1 };
var value = 2;
object1.printProps = function () {
let printValue = function () {
console.log(this.value);
};
printValue();
console.log(this.value);
}
object1.printProps();
- 在printValue()函数在执行时，this.value值为2，也就是说，this指向的是全局对象，而不是对象object。
- 3.返回值：函数的返回值成为调用表达式的值。
I. 如果函数返回是解释器到达结尾，也就是没有执行到return xxx的语句。返回值为undefined。
II. 如果函数返回是因为接受器执行到return xxx语句， 返回return之后的值。
III. 如果return语句后没有值，即return，则返回undefined。
(2) 方法调用模式
- 当一个函数被保存为对象的一个属性时，称为方法。当一个方法被调用时,this被绑定到该对象。如果一个调用表达式包含一个属性存取表达式(即一个﹒点表达式或[subscript]下标表达式)，那么它被当作一个方法来调用。
- 1.参数和返回值的处理与函数调用一致
- 2.执行上下文this为该对象
function print() {
console.log(this.value);
}
var value = 1;
var object = { value: 2 };
object.m = print;
print();
object.m();
- 当调用print时，this绑定的是全局对象，打印全局变量value值1。
但是当调用object.m()时，this绑定的是方法m所属的对象Object，所以打印的值为Object.value，即2。
(3) 构造器调用模式
- 函数或方法调用之前带有关键字new，它就构成构造函数调用。
- 如果在一个函数前面带上new来调用，那么将创建一个隐藏连接到该函数prototype成员的新对象，同时this将会被绑定到那个新对象上。new前缀也会改变return语句的行为。
function fn() {
console.log('------');
}
var obj = new fn();
- 1.参数处理：一般情况构造器参数处理和函数调用模式一致。但如果构造函数没用形参，JavaScript构造函数调用语法是允许省略实参列表和圆括号的。
var obj = new Object();
var obj = new Object;
function fn(value) {
this.value = value;
}
var value = 1;
var obj = new fn(2);
console.log(value);
console.log(obj.value);
fn(3);
console.log(value);
console.log(obj.value);
- 第一次调用fn()函数是作为构造函数调用的，此时执行上下文this被绑定到新创建的对象obj。所以全局变量value值不变，obj新增一个属性value，值为2；
- 第二次调用fn()函数是作为普通函数调用的，此时执行上下文为this被绑定到全局对象，在浏览器中为window。所以全局对象的value值改变为3，而obj的属性值不变。
- 3.构造函数通常不使用return关键字，返回值为新对象。而如果构造函数显示地使用return语句返回一个对象，那么调用表达式值就为这个对象。如果构造函数使用return语句但没有指定返回值或者返回一个原始值，则忽略返回值，同时使用新对象作为调用结果。
(4) call()和apply()进行调用模式
- call()方法使用它自有的实参列表作为函数的实参，apply()方法要求以数组的形式传入参数
- apply方法让我们构建一个参数数组并用其去调用函数。它也允许我们选择this 的值。apply方法接收两个参数。第一个是将被绑定给this的值。第二个就是一个参数数组。
上面的定义看一遍是很懵的 ，其实看代码就好了：
function fun(a, b) {
console.log("a=" + a);
console.log("b=" + b);
console.log(this.name);
}
var obj =
{
name: "Tendo",
sayName: function () {
console.log(this.name);
}
};
var obj2 =
{
name: "天瞳",
sayName: function () {
console.log(this.name);
}
};
fun.call(obj, 2, 3);
fun.apply(obj2, [2, 3]);
- call()方法和apply()方法的作用相同：改变this指向。
- 他们的区别在于接收参数的方式不同。
call的语法:函数名.call(obj,参数1,参数2,参数3……);
apply的语法:函数名.apply(obj,[参数1,参数2,参数3……]);(哪怕只有一个参数也要用数组)
4. 参数
- 当函数被调用时，会得到一个“免费”奉送的参数，那就是arguments 数组。通过它函数可以访问所有它被调用时传递给它的参数列表，包括那些没有被分配给函数声明时定义的形式参数的多余参数。这使得编写一个无须指定参数个数的函数成为可能。
var sum = function() {
var i, sum = 0;
for (i = 0; i < arguments.length; i += 1) {
sum += arguments[i];
}
return sum;
};
document.writeln(sum(4, 8, 15, 16, 23, 42));
- 这不是一个特别有用的模式。
- 因为语言的一个设计错误，arguments并不是一个真正的数组。它只是一个“类似数组(array - like) ”的对象。
- arguments 拥有一个length 属性，但它缺少所有的数组方法。后面会讲到这个设计错误导致的后果。
5. 返回
- 当一个函数被调用时，它从第一个语句开始执行，并在遇到关闭函数体的﹔时结束。那使得函数把控制权交还给调用该函数的程序部分。
- return语句可用来使函数提前返回。当return被执行时，函数立即返回而不再执行余下的语句。
- 一个函数总是会返回一个值。如果没有指定返回值，则返回undefined 。
如果函数以在前面加上 new前缀的方式来调用,且返回值不是一个对象,则返回this (该新对象)。
6. 异常
- JavaScript提供了一套异常处理机制。异常是干扰程序的正常流程的非正常（但并非完全是出乎意料)的事故。当查出这样的事故时，你的程序应该抛出一个异常:
var add = function (a, b) {
if (typeof a !== 'number' || typeof b !== 'number') {
throw {
name: 'TypeError',
message: 'add needs numbers'
};
}
return a + b;
}
- throw 语句中断函数的执行。它应该抛出一个exception对象，该对象包含可识别异常类型的name属性和一个描述性的message属性。你也可以添加其他的属性。
- 该exception对象将被传递到一个try 语句的catch从句;
var try_it = function () {
try {
add("seven");
} catch (e) {
document.writeln(e.name + ': ' + e.message);
}
}
try_it();
- 如果在try代码块内抛出了一个异常，控制权就会跳转到它的catch从句。
- 一个try 语句只会有一个将捕获所有异常的 catch 代码块。如果你的处理手段取决于异常的类型，那么异常处理器必须检查异常对象的name属性以确定异常的类型。
7. 给类型增加方法
- JavaScript允许给语言的基本类型增加方法。object.prototype添加方法来使得该方法对所有对象可用。这样的方式对函数、数组、字符串、数字、正则表达式和布尔值同样适用。
具体实现代码如下：
Function.prototype.method = function (name, func) {
if (!this.prototype[name]) {
this.prototype[name] = func;
}
return this;
};
Function.method("add", function (a, b) {
if (typeof a != 'number' || typeof b != 'number') {
throw {
'name': "typeError",
'message': "add方法必须传入数字"
};
}
return a + b;
});
(function () {
try {
console.log(Function.add(1, 3));
} catch (e) {
if (e.name === 'typeError') {
console.log(e.message);
}
}
})();
String.method("trim", function () {
return this.replace(/^\s+|\s+$/g, '');
});
console.log('|' + " hello world ".trim() + '|');
Number.method("integer", function () {
return Math[this < 0 ? 'ceil' : 'floor'](this);
});
console.log((-10 / 3).integer());
8. 递归
- 递归函数会直接或间接地调用自身的一种函数。递归是一种强大的编程技术，它将一个问题分解为一组相似的子问题，每一个都用一个寻常解去解决。一般来说，一个递归函数调用自身去解决它的子问题。
- 普通写法
var sum = 0;
for(var i=1; i<=100; i++){
sum += i;
}
console.log(sum);
- 递归写法
function sum(n){
if(n==1) return 1;
return sum(n-1) + n;
}
var amount = sum(100);
console.log(amount);
- 程序调用自身的编程技巧称为递归（ recursion）。递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量 。
- 递归的能力在于用有限的语句来定义对象的无限集合。
- 一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。
9. 作用域
- 在编程语言中，作用域控制着变量与参数的可见性及生命周期。对程序员来说这是一个重要的帮助,因为它减少了名称冲突，并且提供了自动内存管理。变量的作用域无非就是两种：全局变量和局部变量。
- 全局作用域：
最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：
var outerVar = "outer";
function fn(){
console.log(outerVar);
}
fn();
- 局部作用域：
和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，最常见的例如函数内部
function fn(){
var innerVar = "inner";
}
fn();
console.log(innerVar);
- 需要注意的是，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
- 再来看一个代码：
var scope = "global";
function fn(){
console.log(scope);
var scope = "local";
console.log(scope);
}
fn();
- 第一个输出居然是undefined，原本以为它会访问外部的全局变量(scope=”global”)，但是并没有。这可以算是javascript的一个特点，只要函数内定义了一个局部变量，函数在解析的时候都会将这个变量“提前声明”：
- JS中的块级作用域
- 大多数使用C语言语法的语言都拥有块级作用域。在一个代码块中(括在一对花括号中的语句集）定义的所有变量在代码块的外部是不可见的。定义在代码块中的变量在代码块执行结束后会被释放掉。这是件好事。
糟糕的是,尽管代码块的语法似乎表现出它支持块级作用域,但实际上JavaScript并不支持。这个混淆之处可能成为错误之源。
比如下面的c语言代码：
for(int i = 0; i < 10; i++){
}
printf("%d",&i);
- 但是javascript不同，并没有所谓的块级作用域，javascript的作用域是相对函数而言的，可以称为函数作用域：
for(var i = 1; i < 10; i++){
}
console.log(i);
ps.（ES6 )加入了块级作用域，就是用 let 关键字声明：{ let a = 1; }，a的作用域就在花括号里
10. 闭包
什么是闭包
- 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。
- 由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。 - 闭包有两个作用：
第一个就是可以读取自身函数外部的变量（沿着作用域链寻找）
第二个就是让这些外部变量始终保存在内存中
闭包的用途
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
console.log(n);
}
return f2;
}
var result=f1();
result();
nAdd();
result();
- 在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
- 为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
- 这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行
使用闭包的注意点操作
- 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
- 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
11. 回调
- 函数使得对不连续事件的处理变得更easy。比如，假定有这么一个序列。由用户交互行为触发，向server发送请求。终于显示server的响应。
最自然的写法可能会是这种：
request = prepare_the_request();
response = send_request-synchronously(request);
display(response);
- 这样的方式的问题在于，网络上的同步请求会导致client进入假死状态。假设网络传输或server非常慢。响应会慢到让人不可接受。更好的方式是发起异步请求，提供一个当server的响应到达时随即触发的回调函数。异步函数马上返回，这样client就不会被阻塞。
request = prepare_the_request();
send_request-synchronously(request,function(response){
display(response);
});
- 我们传递一个函数作为參数给send_request-synchronously函数，一旦接收响应，它会被马上调用
- 以上这部分事实上已经解释了回调函数的使用方法，接下来再举个样例，简单点说明就是把方法a当做一个參数传递给方法mian，当方法mian运行完后运行另外一个指定函数（a）。这里a就是回调函数
function main(callback)
{
alert("main fun");
callback();
}
function a(){
alert("a fun");
}
main(a);
12. 模板
- 我们可以使用函数和闭包来构造函数，模块是一个提供接口和隐藏实现的函数或对象，通过使用函数产生模块，我们几乎可以完全摒弃全局变量的使用，从而缓解这个JavaScript的最为糟糕的特性之一所带来的影响
- 在没有模块规范出现之前，使用闭包创建命名空间是常用的手段：
var MyNameSpace = (function (global) {
const name = 'ltt',
age = 20,
hobby = ['吃', '睡', 'coding']
const getHobby = () => {
return hobby
}
return {
name,
age,
getHobby
}
})(window);
console.log(MyNameSpace)
console.log(MyNameSpace.name)
console.log(MyNameSpace.age)
console.log(MyNameSpace.getHobby())
var MyNameSpace = (function (MyNameSpaceModule) {
MyNameSpaceModule.setName = (name) => {
if(MyNameSpaceModule.name) {
MyNameSpaceModule.nname = name
}
}
return MyNameSpaceModule
})(MyNameSpace || {});
- 模块模式的一般形式是：一个定义了私有变量和函数的函数；利用闭包创建可以访问私有变量和函数的特权函数；最后返回这个特权函数，或者把它们保存到一个可访问到的地方。
- 使用模块模式就可以摒弃全局变量的使用。它促进了信息隐藏和其他优秀设计实践。对于应用程序封装，或者构造其他单例对象，模块模式非常 有效
13. 级联
- 有一些方法没有返回值。例如，一些设置或修改对象的某个状态却不返回任何值的方法就是典型的例子。如果我们让这些方法返回this而不是undefined，就可以启用级联。在一个级联中，我们可以在单独一条的语句中依次调用同一个对象的很多方法。一个启用级联的Ajax类库可能允许我们以这样的形式去编码;
getElement('myBoxDiv').
move(250, 150).
width(100).
height(100).
color('red').
border('10px outset').
padding('4px').
appendText("Please stand by").
on('mousedown', function (m) {
this.startDrag(m, this.getNinth(m));
}).
on('mousemove', 'drag').
on('mouseup', 'stopDrag').
later(2000, function () {
this.
color('yellow').
setHTML("What hath God Wraught?").
slide(400, 40, 200, 200);
}).
tip("This box is resizeable");
- 在这个例子中，getElement函数产生一个对应于id="myBoxDiv"的DOM元素并提供了其他功能的对象。该方法允许我们移动元素，修改它的尺寸和样式，并添加行为。这些方法每一个都返回该对象，所以调用返回的结果可以被下一次调用所用。
级联可以产生出具备很强表现力的接口。它也能帮助控制那种构造试图一次做太多事情的接口的趋势。
14. 套用
- 函数也是值，从而我们可以用有趣的方式去操作函数值，套用允许我们将函数与传递给它的参数相结合去产生出一个新的函数。
var addl = add.curry(1);
document.writeln(addl(6));
- addl是吧1传递给add函数的curry方法后创建的一个函数。addl函数把传递给它的参数的值加1。JavaScript并没有curry方法，但我们可以通过给Function.prototype添加功能来实现：
Function.method('curry', function () {
var args = arguments, that = this;
return function () {
return that.apply(null, args.concat(arguments));
};
});
- curry方法通过创建一个保存着原始函数和被套用的参数的闭包来工作。它返回另一个函数，该函数被调用时，会返回调用原始函数的结果，并传递调用curry时的参数加上当前调用的参数的所有参数，它使用Array的concat方法去连接两个参数数组。
糟糕的是，就像我们先前看到的那样，arguments数组并非一个真正的数组，所以它并没有concat方法。要避开这个问题，我们必须在两个arguments数组上都应用数组的slice方法。这样产生出拥有concat方法的常规数组。
Function.method('curry', function () {
var slice = Array.prototype.slice,
args = slice.apply(arguments),
that = this;
return function () {
return that.apply(null, args.concat(slice.apply(arguments)));
};
});
说明：
var a = [1,2,3];
document.write(a.concat(4,5));
var arr = new Array(3);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
document.write(arr.slice(1));
15. 记忆
- 函数可以用对象去记住先前操作的结果，从而能避免无谓的运算。这种优化被称为记忆。JavaScript的对象和数组要实现这种优化是非常方便的。
- 通过设计能产生出其他函数的函数。可以极大减少我们必须要做的工作。例如：要产生一个可记忆阶乘函数，我们只需提供基本的阶乘公式即可：
var factorial = memoizer([1, 1], function (shell, n) {
return n * shell (n - 1);
});
|