Function类型
Function与函数的概念
- 函数这样的一段JavaScript代码,它只定义一次,但是可能被执行或调用多次
- Function类型是JavaScript提供的引用类型之一,通过Function类型创建Function对象
- 在JavaScript中函数也是对象的形式存在.
- 注意: 每个函数都是以个Function对象
Function与函数
1.函数声明方式
示例代码:
function fun() { console.log('一笑一人生');} 2.字面量方式
示例代码:
var fn = function () { console.log('一花一世界');};// 判断函数是否为Function类型的console.log(fun instanceof Function);//调用结果为 trueconsole.log(fn instanceof Function);//调用结果为 true//JavaScript中所有的函数都是Function类型的对象 3.创建Function类型的对象 - 就是一个函数
-
语法:
var 函数名 = new Function(参数,函数体);- 由于函数的参数和函数体都是以字符串形式传递给Function的
示例代码:
var f = new Function('a','console.log(a)');f(100);//以函数方式进行调用 Object与Function
示例代码:
//1. Object与Function都是自身的类型console.log(Object instanceof Object);//调用结果为 trueconsole.log(Function instanceof Function);//调用结果为 true//2. Object自身是构造函数,而构造函数也是函数,是函数都是Function类型console.log(Object instanceof Function);//调用结果为 true//3. Function是引用类型,用于创建对象,是对象都是Object类型console.log(Function instanceof Object);//调用结果为 true
代码的执行流程
示例代码:
// 变量的声明提前console.log(v);//调用结果为 undefinedvar v = 100;// 如果使用函数声明方式定义函数时 - 函数的声明提前fun();//调用结果为 一花一世界function fun() { console.log('一花一世界');} 代码的执行流程分析图:
Function的apply()方法
-
apply(thisArg,argArray)方法 - 用于调用一个指定的函数
-
参数
- thisArg参数 - 可选项,在func函数运行时使用的this值
- argArray参数 - 数组,作为参数(实参)的列表
- 返回值 - 调用该函数的返回结果
-
示例代码:
// 定义函数function fun(value) { console.log('一花一世界' + value);}//函数的调用方式// 语法结构 : 函数名称()fun('一笑一人生');//调用结果为 一花一世界一笑一人生fun.apply(null,['一叶一孤城']);//调用结果为 一花一世界一叶一孤城 Function的call()方法
-
Function的call()方法用于调用一个函数,并接收指定的this值作为参数,以及参数列表
- thisArg参数 - 在func函数运行时使用的this值
- arg1,arg2...参数 - 指定的参数类表
- 返回值 - 调用该函数的返回值
示例代码:
//定义函数function fun(value,value2) { console.log('一花一世界' + value + value2);}// 函数的调用方式//语法结构 : 函数名称()fun('一笑一人生','极乐世界');//调用结果为 一花一世界一笑一人生极乐世界fun.apply(null,['一笑一人生','走你']);//调用结果为 一花一世界一笑一人生走你// call()方法 - 用于调用一个函数fun.call(null,'一笑一人生','一叶一菩提');//调用结果为 一花一世界一笑一人生一叶一菩提 Function的bind()方法
- Function的bind()方法用于创建一个新的函数(称为绑定函数),并接收指定的this值作为参数,以及参数列表
-
bind(thisArg,arg1,arg2,...)方法
- 作用 - 用于创建一个新函数(称为绑定函数)
-
参数
- thisArg参数 - 当绑定函数被调用时,该参数会作为原函数运行时的this指向
- arg1, arg2,...参数 - 当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法 (表示参数列表)
- 返回值 - 返回新的函数
示例代码:
//定义函数function fun(value) { console.log('一花一世界' + value);}/*var f = fun.bind();// 相对于从指定函数复制一份出来console.log(f);f();*/fun('一笑一人生');// 调用结果为 一花一世界一笑一人生var f = fun.bind(null,'一叶一菩提');f();// 调用结果为 一花一世界一叶一菩提 重载是什么
-
重载的含义:
- 定义多个同名的函数,但具有数量不同的参数
- 调用函数,根据传递参数的个数调用指定的函数
- 注意: JavaScript中函数没有重载如果同时定义多个同名的函数时,则只有最后一个定义的函数时有效的
示例代码:
function add(a,b){ return a + b;}function add(a,b,c){ return a + b + c;}function add(a,b,c,d){ return a + b + c + d;}//理想效果:add(1,2);// 3add(1,2,3);// 6add(1,2,3,4);// 10//实际效果:// JavaScript的函数不存在重载 -> 当函数同名时，最后一次定义的函数有效console.log(add(1,2));// NaNconsole.log(add(1,2,3));// NaNconsole.log(add(1,2,3,4));// 10 arguments对象
-
JavaScript提供arguments对象
- 该对象存储当前函数中所有的参数(指的是实参) - 类数组对象
- 应用场景 - 该对象一般用于函数中
- 作用 - 用于获取当前函数的所有参数
-
属性
- length - 函数所有参数(指的是实参)的个数
- 用法 - 模拟实现函数的重载
示例代码:
function add() { var num = arguments.length; switch (num) { case 2: return arguments[0] + arguments[1]; break; case 3: return arguments[0] + arguments[1] + arguments[2]; break; case 4: return arguments[0] + arguments[1] + arguments[2] + arguments[3]; }}console.log(add(1,2));//调用结果为 3console.log(add(1,2,3));//调用结果为 6console.log(add(1,2,3,4));//调用结果为 10 函数的递归
- 函数的递归 - 就是在指定函数的函数体中调用自身函数
示例代码:
function fun() { // 当前函数的逻辑内容 console.log('this is function'); // 调用自身函数 - 实现递归 fun();}fun(); 控制台效果解析图:
解决递归死循环的方法
示例代码:
function fn(v) { console.log(v); /* 语句判断 */ if (v >= 10) { /* 结束语句循环 */ return; } //fn(v + 1); arguments.callee(v + 1);}//fn(0);var f = fn;fn = null;f(0);console.log(f); 控制台调用图:
特殊函数
匿名函数
- JavaScript语法中，定义函数必须定义函数名称 -> 匿名函数
-
匿名函数的作用:
- 将匿名函数作为参数传递给其他函数 -> 回调函数
- 将匿名函数用于执行一次性任务 -> 自调函数
回调函数
- 当一个函数为参数传递给另一个函数时,作为参数的函数被称之为回调函数
示例代码:
// 作为另一个函数(fn)的参数的函数(one) - 回调函数var one = function(){ return 1;}function fn(v){ return v();}// one函数仅是作为fn函数的参数出现 - 并不是调用// var result = fn(one);/* 以上代码等价于以下代码 以下代码中作为参数的函数 - 匿名回调函数 */var result = fn(function(){return 1;});console.log(result);// 1 回调函数分析图:
回调函数的参数
示例代码:
// 作为另一个函数(fn)的参数的函数(one) -> 回调函数var one = function(w){ return w;}function fn(v){// 形参是一个函数 return v(100);// 函数的调用体}// var result = fn(one);// 实参必须是一个函数var result = fn(function(w){return w;});console.log(result); 回调函数的参数的分析图:
自调函数
-
自调函数 - 定义即调用的函数
- 第一个小括号 - 用于定义函数
- 第二个小括号 - 用于调用函数
示例代码:
// 全局作用域 - 生命周期：JavaScript文件从执行到执行完毕(function(value){ // 函数作用域 - 生命周期：从函数调用到调用完毕 console.log('一花一世界' + value);})('一叶一菩提');// 表达式语法(function(value){ // 函数作用域 - 生命周期：从函数调用到调用完毕 console.log('一花一世界' + value);}('一笑一人生')); 作为值的函数
- 将一个函数作为另一个函数的结果进行返回,作为结果为返回的函数称之为止的函数
示例代码:
var one = function(){ return 100;};// 作为值的函数 -> 内部函数的一种特殊用法function fun(){ var v = 100; // 内部函数 return function(){ return v; };}var result = fun();console.log(fun()());// 调用结果为 100 作用域链
示例代码:
var a = 10;// 全局变量function fun(){ var b = 100;// fun函数作用域的局部变量 // 内部函数 function fn(){ var c = 200;// fn函数作用域的局部变量 // 内部函数 function f(){ var d = 300;// f函数作用域的布局变量 // 调用变量 console.log(a);// 10 console.log(b);// 100 console.log(c);// 200 console.log(d);// 300 } f(); // 调用变量 // console.log(a);// 10 // console.log(b);// 100 // console.log(c);// 200 // console.log(d);// d is not defined } fn(); // 调用变量 // console.log(a);// 10 // console.log(b);// 100 // console.log(c);// c is not defined // console.log(d);// d is not defined}fun(); 作用域链的分析图:
闭包
-
闭包是什么:
- JavaScript允许函数嵌套,并且内部函数可以访问定义在外部函数中的所有变量和函数,以及外部函数能访问的所有变量和函数.但是外部函数却不能够访问定义在内部函数中的变量和函数
示例代码:
var n;// 定义变量,但不初始化值function fun() {// 函数作用域 var v = 100; // 进行初始化值 - 一个函数 n = function () { console.log(v); }; // n();}fun();n();// 调用结果为 100 闭包的特点与作用
-
闭包的特点:
- 局部变量: 在函数中定义有共享意义(比如: 缓存,计数器等等)的局部变量
- 内部函数: 在函数(f)中声明有内嵌函数,内嵌函数(g)对函数(f)中的局部变量进行访问
- 外部使用: 函数(f)向外返回此内嵌函数(g),外部可以通过此内嵌函数持有并访问声明在函数(f)中的局部变量,而此变量在外部是通过其他途径无法访问的
-
闭包的作用:
- 提供可共享的局部变量
- 保护共享的局部变量.提供专门的读写变量的函数
- 避免全局污染