JavaScript对象类型之function

news/2024/12/2 19:49:16/

目录

一、Function

定义函数

调用函数

默认参数

匿名函数

箭头函数

二、函数是对象

三、函数作用域

四、闭包

五、let、var与作用域


一、Function

定义函数

function 函数名(参数) {// 函数体return 结果;
}

例如:

function add(a, b) {return a + b;
}

调用函数

函数名(实参);

例如:

add(1, 2);     // 返回 3

js中的函数调用特点,对参数的类型和个数都没有限制,例如:

add('a', 'b');  // 返回 ab
add(4, 5, 6);   // 返回 9, 第三个参数没有被用到, 不会报错
add(1);			// 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN

默认参数

java中(spring)要实现默认参数的效果

@RestController 
public class MyController {@RequestMapping("/page")@ResponseBodypublic void page(@RequestParam(defaultValue="1") int page, @RequestParam(defaultValue="10") int size){// ...}
}

js实现的效果

function pagination(page = 1, size = 10) {console.log(page, size);
}

匿名函数

语法:

(function (参数) {// 函数体return 结果;
})

例如:

(function(a,b){return a + b;
})

第一种场景:定义完毕后立刻调用

(function(a,b){return a + b;
})(1,2)

第二种场景:作为其他对象的方法,例如:

页面有元素:

<p id="p1">点我啊</p>

此元素有一个onclick方法,会在鼠标单击这个元素后被执行,onclick方法刚开始是null,需要赋值后才能使用

document.getElementById("p1").onclick = (function(){console.log("鼠标单击了...");
});

箭头函数

(参数) => {// 函数体return 结果;
}
  • 如果没有参数,() 还是要保留

  • 如果只有一个参数,() 可以省略

  • 如果函数体内只有一行代码,{} 可以省略

  • 如果这一行代码就是结果,return 可以省略

例如:

document.getElementById("p1").onclick = () =>  console.log("aa");

二、函数是对象

1、可以参与赋值,例如,匿名函数也能参与赋值

function abc() {console.log("bb");
}document.getElementById("p1").onclick = abc;

2、有属性、有方法,执行console.dir(abc),输出结果如下:

ƒ abc()arguments: nullcaller: nulllength: 0name: "abc"➡prototype: {constructor: ƒ}[[FunctionLocation]]: VM1962:1➡[[Prototype]]: ƒ ()➡[[Scopes]]: Scopes[1]
  • 其中带有 f 标记的是方法,不带的是属性

  • 带有 ➡ 符号的可以继续展开,限于篇幅省略了

  • 带有 [[ ]] 的是内置属性,不能访问,只能查看

  • 相对重要的是 [[Prototype]][[Scopes]] 会在后面继承和作用域时讲到

3、可作为方法参数

function a() {console.log('a')
}function b(fn) {          // fn 将来可以是一个函数对象console.log('b')fn();                 // 调用函数对象
}b(a)

4、可作为方法返回值

function c() {console.log("c");function d() {console.log("d");}return d;
}c()()

三、函数作用域

函数可以嵌套(js代码很常见,只是嵌套形式很多时匿名函数,箭头函数)

function a() {function b() {        }
}

例如:

function c() {var z = 30;
}var x = 10;
function a() {var y = 20;function b() {// 看这里console.log(x, y);}b();
}
a();
  • 以函数为分界线划定作用域,所有函数之外是全局作用域

  • 查找变量时,由内向外查找

    • 在内层作用域找到变量,就会停止查找,不会再找外层

    • 所有作用域都找不到变量,报错

  • 作用域本质上是函数对象的属性,可以通过 console.dir 来查看调试

四、闭包

var x = 10;
function a() {var y = 20;function b() {console.log(x,y);}return b;
}
a()();  // 在外面执行了 b
  • 函数定义时,它的作用域已经确定好了,因此无论函数将来去了哪,都能从它的作用域中找到当时那些变量

  • 别被概念忽悠了,闭包就是指函数能够访问自己的作用域中变量

五、let、var与作用域

如果函数外层引用的是let变量,那么外层普遍的{}也会作为作用于边界,最外层的let也占一个script作用域

let x = 10; 
if(true) {let y = 20;function b() {console.log(x,y);}console.dir(b);
}

如果函数外层引用的是var变量,外层普遍的{}不会视为边界

var x = 10; 
if(true) {var y = 20;function b() {console.log(x,y);}console.dir(b);
}

如果var变量出现了重名,则他俩会被视为同一作用域中的同一变量

var e = 10; 
if(true) {var e = 20;console.log(e);	// 打印 20
}
console.log(e);		// 因为是同一个变量,还是打印 20

如果是let,则视为两个作用域中的两个变量

let e = 10; 
if(true) {let e = 20;	console.log(e);	// 打印 20
}
console.log(e);		// 打印 10

要想里面的e和外面的e能区分开来,最简单的办法是改成let,或者用函数来界定作用域范围

var e = 10; 
if(true) {function b() {var e = 20;console.log(e);}b();
}
console.log(e);	

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

相关文章

最火爆的持续集成工具 jenkins ,详细教程来啦(傻瓜式教程)

很多小伙伴在安装以及配置jenkins的时候&#xff0c;总会遇到一些问题。 今天在这边特地把jenkins的安装&#xff0c;以及常用的一些功能的配置整理到了这篇文章中&#xff0c;希望对大家有所帮助&#xff01; 1安装JDK JDK安装完需要配置环境变量&#xff0c;大家可以自行百度…

8-数据可视化-地图可视化

文章目录1.基础地图2.国内疫情地图3.省内疫情地图1.基础地图 &#xff08;1&#xff09;基础结构 from pyecharts.charts import Map mapMap() # 准备地图对象 data[ # 数据是由元组组成的列表("北京市",100),("台湾省",99),("上海市",98),(&q…

SDK之动态链接库开发—基本概念

动态链接库&#xff08;Dynamic Link Library&#xff0c;简称 DLL&#xff09;是一种在运行时加载的库&#xff0c;可用于在多个应用程序之间共享代码和数据。与静态链接库相比&#xff0c;动态链接库的主要优劣势如下&#xff1a; 优势&#xff1a; 空间效率更高&#xff0…

砝码称重(第十二届蓝桥杯省赛第一场C++A/B/研究生组)

突然决定要参加蓝桥&#xff0c;已经超级久没复习C/C的我考前还是决定打几道题捡一捡C/C的语法和思路。 2023年蓝桥的题之后会出&#xff0c;因为 AcWing上还没有出可以测试的程序&#xff0c;也没把握说自己考场上做的就是对的。 题目 你有一架天平和 N 个砝码&#xff0c;…

0201服务注册源码解析-nacos2.x-微服务架构

文章目录1 搭建测试服务1.1 搭建服务1.2 启动测试2 nacos 服务注册原理2.1 客户端注册2.2 服务端注册结语1 搭建测试服务 1.1 搭建服务 我们基于springboot来搭建简单的订单和库存服务&#xff0c;通过订单服务调用库存服务,项目代码和配置在文章最后的仓库有&#xff0c;项目…

关于FTP文件传输协议说明,带你了解更详细的文件传输协议

FTP是文件传输协议的缩写。顾名思义&#xff0c;FTP用于在网络上的计算机之间传输文件。您可以使用文件传输协议在计算机帐户之间交换文件&#xff0c;在帐户和台式计算机之间传输文件或访问在线软件档案。但是请记住&#xff0c;许多文件传输协议站点已被大量使用&#xff0c;…

Android Jetpack 从使用到源码深耕【数据库注解Room 从实践到原理 】(二)

上文,我们通过一个简单的sqlite应用实例,引入了Room,知道了Room使用的便捷和好处。然后用Room的方式,重新实现了应用实例中的场景,在这个过程中,我们结合自己已有的知识体系,从使用代码入手,对Room的实现原理,进行了猜想和简单的验证。 Room实现原理,是否真如我们猜想…

Typescript - function 函数(箭头函数 / 参数类型与返回类型 / 可选参数与默认参数 / 剩余参数 / 函数重载)通俗易懂详细示例教程

前言 在 Typescript 中&#xff0c;对 JavaScript 函数进行了 “升级”&#xff0c;继承了基本功能的同时又增加了一些新用法&#xff08;使其更加严谨&#xff09;。 用一个表格&#xff0c;可以大致描绘出异同点。 TypeScriptJavaScript含有类型无类型箭头函数箭头函数&…