JavaScript数据类型之函数

    xiaoxiao2022-07-03  114

    函数

    函数是 ECMAScript 的核心,可以用来包装的一个代码块,具备一定的功能,可以执行特定的任务或计算值的语句。定义一次 可执行多次。

    函数的定义

    函数定义(也称为函数声明,或函数语句)由一系列的function关键字组成,依次为:

    函数的名称。

    函数参数列表,包围在圆括号中并由逗号分隔。

    定义函数的 JavaScript 语句,用大括号{}括起来。

    定义函数的原理:

    当定义一个函数的时候开辟了一个新的堆内存 然后把函数中的代码转成字符串存到了堆内存中 最后把堆内存的地址,赋值给函数名或者变量

    函数调用原理:

    在函数调用的时候,函数内形成一个执行栈 把函数代码块内的字符串代码拷贝一份放到执行栈中执行 参数赋值 执行上下文 预解析的机制 函数内的变量销毁

    函数定义的几种方式

    // 命名函数-函数声明 function fn () { } // 函数表达式-匿名函数 var fn = function () { } // 类声明: let f = new Function(); //内部要为字符串。 // 自执行函数 当代码执行到这一行 自己就执行了 (function () { })()

    直接写匿名函数是会报错的。

    如何避免报错呢? 1.声明函数时要有名字2.匿名函数要为一个表达式

    函数的调用

    函数名()代表函数执行。定义一个函数,可以重复执行多次。 函数的调用(只有函数才能调用,不然就报错)

    函数名 + 括号事件调用 一般是赋值一个匿名函数或者是赋值一个函数(名)地址定时器调用 setTimeout(function(){},1000) setInterval(function(){},1000) // 1、函数名 + 括号调用 fn() function fn () { console.log('hello') } fn() // 函数执行 fn() //2、事件调用(举例,点击事件) document.onclick = function(){ alert('1'); } //3、定时器调用 setTimeout(function(){},1000) setInterval(function(){},1000)

    对于函数表达式 必须在定义后才能调用

    fn() // 报错 Uncaught TypeError: fn is not a function var fn = function () { console.log('hello') } fn() // 成功执行

    函数的参数

    在调用函数时,您可以向其传递值,这些值被称为参数。

    函数可以通过定义时设定形参来接收调用时传递的参数

    // param1 和 param2 都是形参 function fn (param1, param2) { console.log(param1, param2) // 1, 2 } fn(1, 2) // 自执行函数 (function (num) { console.log(num) // 100 })(100)

    函数的arguments对象

    每个函数里都一个属于自己的实参集合arguments

    arguments是个类数组里面存储着函数调用时传递进来的所有参数

    // 命名函数 function fn (param1, param2) { // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ] console.log(arguments) } fn(1, 2)

    函数的返回值

    当函数程序运行后 外部想要拿到内部结果时 可通过return关键字来指定,如果不指定return 函数执行后默认返回undefined

    // 将计算的结果返回 并结束函数执行 return param1 + param2 } var sum = fn(1, 2) console.log(sum) // 3

    return 后面指定什么就将什么返回,函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说return后面的所有其他代码都不会再执行,所以函数返回具有切断函数执行的功能

    事件函数

    根据相应的浏览器行为(点击、滑过),执行相应动作。

    <body> <button id="btn">点我</button> <script> var btn = document.getElementById('btn') // 给按钮绑定一个点击事件 btn.onclick = function() { // 当这个按钮被点击时,会执行这个函数 alert('点我! 点我!') }; </script> </body> </html>

    事件函数中的this

    在事件函数中存在一个内置关键字 this,代表当前绑定事件的元素对象

    <body> <button id="btn">点我</button> <script> // 获取元素 var btn = document.querySelector('#btn') // 给元素绑定点击事件 btn.onclick = function () { // 这个事件函数中的this 代表当前btn这个元素对象 它两是同一个人 console.log(this === btn) // true console.log(this) // 就是btn这个元素对象 } </script> </body>
    最新回复(0)