JavaScript函数(四)

news/2024/11/30 18:39:08/

JavaScript函数

      • 1、函数的介绍
      • 2、函数的使用
      • 3、特殊函数
        • 3.1、匿名函数
        • 3.2、递归函数
        • 3.3、回调函数
        • 3.4、闭包函数
      • 4、使用 arguments 对象
      • 5、函数参数
        • 5.1、默认参数
        • 5.2、剩余参数
      • 6、箭头函数

JavaScript函数:执行特定功能的代码块。[类似于java中的方法]

1、函数的介绍

  1. JS函数,我们在定义后,它是全局性的,我们可以任意调用。
  2. Js函数定义在外部Js文件中,实现代码重用。
  3. Js函数可以有返回值,也可以是无返回值(功能性函数)。
  4. 可以在一个函数中调用另一个函数,也可以把一个函数的返回值作为另一个函数的参数。

Js函数分为: 系统函数和自定义函数。
 
Js变量作用域: 变量使用的有效范围,在 JavaScript 中,对象和函数同样也是变量。

  • 全局变量:声明在所有函数之外的变量,称为全局变量,页面关闭后销毁。
  • 局部变量:声明在函数内部的变量,仅供该函数使用,函数运行完毕后销毁。

2、函数的使用

// 方式一:预解析阶段函数会提升
function fn() {};
// 方式二:预解析阶段只会提升函数名,后面的函数体 function() {}不会提升
var fn1 = function() {};
//调用函数
fn();// 有参函数,这里的参数为形参(定义时)
function fn2(x,y){console.log(x+"-"+y);
}
// 调用有参函数
fn2(6,8); //输出 6-8,这里的参数为实参(调用时)// return表示立即退出函数,并设置函数的返回值
function fn3(){return 666;
}
console.log(fn3()); //输出666

3、特殊函数

3.1、匿名函数

匿名函数是指没有名字的函数,通常用于函数表达式。
 

let hello = function (){console.log("web-chubby");
}
//立刻调用函数表达式:
(function () {
//函数体
})(); //后面这对圆括号中可加参数,去掉圆括号表示不执行该函数

3.2、递归函数

递归函数是自己指向并调用自己,分为递推和回归两个过程,需要终止条件并且逐步向终止条件靠近,递归函数使用了堆栈:
 

function foo(i) {if (i < 0)return;console.log('begin:' + i);foo(i - 1);console.log('end:' + i);
}
foo(3);// 输出:// begin:3
// begin:2
// begin:1
// begin:0
// end:0
// end:1
// end:2
// end:3

3.3、回调函数

回调函数是将一个函数作为另一个函数的参数,这个作为参数的函数可以为一个函数名、普通函数、匿名函数等等。
 
回调函数通常与异步函数一起使用,因为在异步的情况下才能真正体现出回调函数的作用。
 
在大多数编程语言中,函数的形参总是由外往内向函数体传递参数,但在JS里如果形参是关键字"callback"则完全相反,它表示函数体在完成某种操作后由内向外调用某个外部函数。
 

let fs = require("fs");function f(x) {console.log(x)
}function writeFile(callback) { //关键字callback,表示这个参数不是一个普通变量,而是一个函数fs.writeFile('input.txt', '我是通过fs.writeFile 写入文件的内容', function (err) {if (!err) {console.log("文件写入完毕!")c = 1callback(c) // 因为我们传进来的函数名是f(),所以此行相当于调用一次f(c)}});
}
let c = 0
writeFile(f) // 函数f作为一个实参传进writeFile函数

3.4、闭包函数

在一个函数内部再定义一个函数,此时再定义的函数称为闭包函数,内部函数只可以在外部函数中访问。
 
内部函数形成了一个闭包:它可以访问外部函数的参数和变量,但是外部函数却不能使用它的参数和变量。
 
如果一个闭包的函数定义了一个和外部函数的某个变量名称相同的变量,那么这个闭包将无法引用外部函数的这个变量。
 

function addSquares(a, b) {function square(x) {return x * x;}return square(a) + square(b);
}
a = addSquares(2, 3); // returns 13
b = addSquares(3, 4); // returns 25
c = addSquares(4, 5); // returns 41// 调用外部函数并为外部函数和内部函数指定参数
function outside(x) {function inside(y) {return x + y;}return inside;
}
fn_inside = outside(3); // 可以这样想:给一个函数,使它的值加 3
/* 
一个闭包必须保存它可见作用域中所有参数和变量。
每一次对外部函数的调用实际上重新创建了一遍这个闭包。
只有当返回的 inside 没有再被引用时,内存才会被释放,所以x的值还在
*/
result = fn_inside(5); // returns 8
result1 = outside(3)(5); // returns 8 ,先调外部函数,再调内部函数

4、使用 arguments 对象

函数的实参会被保存在一个类似数组的 arguments 对象中,可以通过类似于如下这种方式找出传入的参数:
 

function myConcat(separator) {var result = ''; // 把值初始化成一个字符串,这样就可以用来保存字符串了!!var i;// 遍历参数for (i = 1; i < arguments.length; i++) {result += arguments[i] + separator;}return result;
}
myConcat(", ", "red", "orange", "blue"); // returns "red, orange, blue, "
myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); // returns "elephant; giraffe; lion; cheetah; "
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); // returns "sage. basil. oregano. pepper. parsley. "

arguments 变量只是“类数组对象”,并不是一个数组。称其为类数组对象是说它有一个索引编号和 length 属性。尽管如此,它并不拥有全部的 Array 对象的操作方法。


5、函数参数

从 ES6 开始,有两个新的类型的参数:默认参数,剩余参数。

5.1、默认参数

// 在形参列表中直接给参数赋值,这样就可以免去一些判断未定义的操作
function multiply(a, b = 1) {return a*b;
}
multiply(5); // 5

5.2、剩余参数

// 剩余参数语法允许将不确定数量的参数表示为数组
function multiply(multiplier, ...theArgs) {return theArgs.map(x => multiplier * x);
}
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

6、箭头函数

箭头函数表达式相比函数表达式具有较短的语法并以词法的方式绑定 this。箭头函数总是匿名的。
 

var a = ["Hydrogen","Helium","Lithium","Beryllium"];var a2 = a.map(function(s){ return s.length });
console.log(a2); // logs [ 8, 6, 7, 9 ]var a3 = a.map( s => s.length );
console.log(a3); // logs [ 8, 6, 7, 9 ]

不用箭头函数,this为全局对象:

function Person() {this.age = 0; // 构造函数 Person() 将`this`定义为自身setInterval(function growUp() {// 在非严格模式下,growUp() 函数将`this`定义为“全局对象”,这与 Person() 定义的`this`不同this.age++; //this指向全局对象,所以age还是0}, 1000);
}
var p = new Person();

将this值赋给一个变量,解决上述问题:

function Person() {var self = this; self.age = 0;setInterval(function growUp() {self.age++; // this指向person对象}, 1000);
}

箭头函数捕捉闭包上下文的this值,简单实用:

function Person(){this.age = 0;setInterval(() => {this.age++; // this指向person对象}, 1000);
}
var p = new Person();


http://www.ppmy.cn/news/198109.html

相关文章

android 智能手环应用,时硕智能手环软件

时硕手环app是搭配时硕智能手环一起使用的手机app&#xff0c;通过蓝牙即可与智能手环进行绑定&#xff0c;TA不仅能自动记录你全天24小时的身体状态&#xff0c;同时还可以增加你的运动积极性&#xff0c;为你增添更多的运动乐趣&#xff01; 时硕手环app主要功能 1、专业计步…

智能床垫到底有多智能-新导智能

​ 现代社会的高速工作&#xff0c;使得人们多多少少出现睡眠障碍。咱们常说的睡觉妨碍分为四种&#xff1a;入睡妨碍&#xff08;入睡耗时又困难&#xff09;、半途吵醒&#xff08;无法坚持睡觉状况&#xff09;、深睡妨碍&#xff08;感觉不到深眠状况&#xff09;、过早吵醒…

智能手机中MEMS传感器应用浅析

MEMS的全称是微型电子机械系统&#xff08;Micro-Electro Mechanical System&#xff09;&#xff0c;是指可将微型机构、微型传感器、微型执行器以及信号处理和控制电路、直至接口、通信和电源等于一体的微型器件或系统。可以把它理解为利用传统的半导体工艺和材料&#xff0c…

“千脑智能理论”或颠覆AI,比尔·盖茨重磅推荐

今年8月&#xff0c;马斯克发布推文称将会在10月31日&#xff0c;更新有关脑机接口的最新进展。近几年&#xff0c;人工智能方面的发展一直在取得突破和进展&#xff0c;人们对这方面的期待和研究却一直没有停止。 比尔盖茨2021年度书单5本书中重磅推荐了《千脑智能》。他讲道&…

亲情互动物联网智能手环

蓝牙主从一体技术&#xff0c;所有产品均支持蓝牙主从一体技术该技术应用使得做室内定位的集成客户可以大面积减少网关的部署数据和拉线成本&#xff0c;使得原来部署网关的位置全部改为部署信标&#xff0c;不仅仅整体方案成本更低&#xff0c;施工成本和客户便捷性也得到了大…

机器智能的未来

来源&#xff1a;混沌巡洋舰 今年8月&#xff0c;马斯克发布推文称将会在10月31日&#xff0c;更新有关脑机接口的最新进展。近几年&#xff0c;人工智能方面的发展一直在取得突破和进展&#xff0c;人们对这方面的期待和研究却一直没有停止。 比尔盖茨2021年度书单重磅推荐了《…

纺织服装产业实现智能制造升级

制造业是一国经济之本&#xff0c;也是国际竞争的焦点。近些年来&#xff0c;中国制造业有了很大进步&#xff0c;许多产品不仅占据了原本被进口产品主导的国内市场&#xff0c;还有很多在国际市场上也具备了竞争力。 自改革开放以来&#xff0c;我国服装产业围绕“科技、时尚…

医学统计分析:心电图智能诊病

心电图智能事件识别 背景 心电图&#xff08;ECG&#xff09;是一种简单、经济的院内检查手段&#xff0c;是患者住院或日常体检的常用检测项目。由计算机辅助医生对心电信号进行识别&#xff0c; 有望减轻医生工作负担&#xff0c;并降低人工造成的漏诊。对于某一时长的 ECG …