【JS学习笔记 06】JavaScript 函数详解
JavaScript 函数详解
JavaScript 函数
函数是将复用的代码块封装起来的模块,它允许你在一个代码块中存储一段用于处理单任务的代码,然后在任何你需要的时候用一个简短的命令来调用,而不是把相同的代码写很多次。
声明定义
在js中函数是Function类的创建实例,所以可以使用类的实例化方式声明定义函数
let func = new Function("txt","console.log(txt)"); func("hello world"); // 输出:hello world
最常用的方式是采用函数定义的方式来定义函数
function func(txt) { console.log(txt); } func("hello world");//输出 hello world
函数作为对象成员
let student = { firstName : "张", lastName : "三", getName : function() { console.log(`${this.firstName} ${this.lastName}`); } } student.getName(); // 输出: 张 三
全局函数
声明在全局的函数被称为全局函数,全局函数和全局变量一样会声明在window对象中,会将window对象中的同名函数覆盖。这不正确建议使用模块处理。
console.log(window.screenX); //2200
当我们定义了 screenX 函数后就覆盖了window.screenX方法
function screenX() { return "hello world"; } console.log(screenX()); //hello world
函数提升
使用函数表达式定义的函数 和 用var关键字创建的函数都是全局的变量,都存在变量提升
sum(2,3); // 发生变量提升:输出5 function sum(x,y) { console.log(x + y); }
变量函数定义不会被提升
sum(2,3); // 报错 let sum = function (x,y) { console.log(x+y); }
匿名函数
所谓匿名函数指的就是没有签名的函数,在某些场景下,我们不需要复用我们的函数。一般是将函数作为右值传递,最常见在于赋值给函数形参。(类似C++的函数指针)
//将匿名函数传递给变量sum let sum = function(x,y) { return x + y; } console.log(sum(2,3)); // 输出:5
let arr = [1,2,3,4]; //使用匿名函数给arr.reduce传递参数,求和 let sum = arr.reduce(function(tatol,value) { return tatol += value; }); console.log(sum); // 输出: 10
箭头函数(lambda 表达式)
箭头函数是匿名函数的一种简写形式,是js提供的一种语法糖 ,格式如下:
(参数列表) => {函数体}
如果函数体只有一个返回语句,可以省略大括号和return语句。如果只有一个参数可以省略小括号,没有参数用一对空的小括号表示,不可省略。
let sum = (x,y)=> x + y; // 等效于let sum = function(x,y){return x+y;} console.log(sum(x,y));
- 箭头函数下的this的坑
在js中,箭头函数没有this
, 箭头函数中的this 会继承定义函数时的上下文,和外层函数指向同一个this。也就是说箭头函数里的this指的是它的上一层环境。
形参实参
形参是在函数声明时设置的参数,实参指在调用函数时传递的值。
- 当函数定义的参数大于调用时传递的参数时,即参数没有传够时,js不会报错,未传递的参数值为undifine
- 当函数定义的参数小于调用时传递的参数时,即参数传多了时,js也不会报错,从前往后参数传够了后面的被忽略
function func(x,y,z) { console.log(`x = ${x},y = ${y}, z = ${z}`); } //参数传少了 func(1,2);//x = 1,y = 2, z = undefined //参数传多了 func(1,2,3,4);//x = 1,y = 2, z = 3
默认参数
对于一些形参,我们希望它们不被赋值时也能拥有一个初始值,拥有初始值的参数就被称为默认参数,还是用上面传少的例子这次给z添加默认值。
function func(x,y,z = 1) { console.log(`x = ${x},y = ${y}, z = ${z}`); } //参数传少了 func(1,2);//x = 1,y = 2, z = 1
注意,为了使得默认参数有意义,默认参数只能放在常规参数的后面,否则浏览器将无法确定是省略的哪个参数。
function func(x,y = 1,z ) { console.log(`x = ${x},y = ${y}, z = ${z}`); } //参数传少了 func(1,2);//x = 1,y = 2, z = undefined
发生了意料之外的情况,当我们传递两个参数时,浏览器会将2传递给y
arguments
arguments 是函数获得到所有参数集合,下面是利用 arguments 和箭头函数求和的例子
function sum() { return[...arguments].reduce((total,value)=> total+=value); } console.log(sum(1,2,3,4)); // 10
- 箭头函数没有arguments
回调函数
在某个时刻被其他函数调用的函数称为回调函数,例如上面的数组
array的成员函数
reduce其实就是接受了一个回调函数,我们用箭头函数代替了回调函数。
apply/call/bind
改变this指针,也可以理解为对象借用方法。三者都可以改变构造函数中的空对象,即让函数里的this指向到另一个对象。
apply和call的区别仅仅在于传递的参数不同,而bind的不同点在于,apply和call在被绑定后都会立即执行,而bind并不会立即执行。
let a ={}; let b ={}; let c ={}; function func(name) { this.name = name; //输出func的this console.log(this.name); } //使用apply、call绑定的区别在于apply传入一个数组,而call传入对象 func.call(a,"张三"); //输出 : 张三 func.apply(b,["李四"]);//输出 : 李四 //而使用bind不会立即执行函数 func.bind(c,"王五"); //不执行函数
- 【JavaScript学习笔记】1:js的书写,显示数据,变量,函数
- JavaScript学习笔记之惰性函数示例详解
- JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
- 【JS学习笔记】06 JavaScript HTML DOM 事件
- JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第32讲_构造函数_成员函数详解_学习笔记_源代码图解_PPT文档整理
- 韩顺平 javascript教学视频_学习笔记9_js函数调用过程内存分析_js函数细节
- JavaScript学习笔记之JS函数
- 《JavaScript高级程序设计 第三版》学习笔记 (六) 函数与闭包详解
- JavaScript学习笔记之JS函数(二)
- javascript学习笔记(七) js函数介绍
- JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
- JavaScript高级程序设计(第2版) 学习笔记:(一)js函数依赖性
- JavaScript学习笔记之JS函数(一)
- JavaScript学习笔记之JS函数
- javascript学习笔记(七) js函数介绍
- 韩顺平 javascript教学视频_学习笔记34_js正则表达式详解
- JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
- JS学习笔记1——不要使用JavaScript内置的parseInt()和Number()函数,利用map和reduce操作实现一个string2int()函数
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理