JavaScript对象类型之function

目录

一、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")
    @ResponseBody
    public 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: null
    caller: null
    length: 0
    name: "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);	
  • 9
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript中有多种对象类型,每种类型都有不同的作用。以下是一些常见的JavaScript对象类型及其作用: 1. Object(对象):Object是JavaScript中最基本的对象类型,它是其他所有对象类型的基础。通过Object,可以创建自定义的对象,并添加属性和方法。 2. Array(数组):Array是一种有序的集合,可以存储多个值。数组可以通过索引访问和修改其中的元素,还提供了一系列的方法用于操作和处理数组数据。 3. Function(函数):Function是一种特殊的对象类型,可以被调用执行。函数可以接收参数,并返回一个值。在JavaScript中,函数是一等公民,可以作为变量、参数或返回值来使用。 4. String(字符串):String是一种表示文本数据的对象类型。字符串可以包含字母、数字、符号等字符,并提供了一系列的方法用于处理和操作字符串数据。 5. Number(数字):Number是一种表示数值的对象类型。它可以表示整数和浮点数,并提供了一些数学运算和方法。 6. Boolean(布尔值):Boolean是一种表示逻辑值的对象类型,只有两个可能的值:true和false。布尔值常用于条件判断和逻辑运算。 7. Date(日期):Date是一种表示日期和时间的对象类型。它提供了一系列的方法用于获取和设置日期、时间,并进行日期的计算和格式化。 8. Math(数学):Math是一个内置的数学对象,提供了一系列的数学运算和方法,如求平方根、取整、随机数等。 9. RegExp(正则表达式):RegExp是一种用于匹配和处理文本的对象类型。它可以通过正则表达式来定义匹配规则,并进行字符串的模式匹配和替换。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏志121

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值