重温js——函数基础

简介: 函数的作用,减少重复代码,实现代码的解耦。把某个功能点给抽离出来。使得代码阅读增加

函数的作用,减少重复代码,实现代码的解耦。把某个功能点给抽离出来。使得代码阅读增加


创建(定义、声明)函数


function 函数名(){
  // 代码体
}


函数本身是不会运行的,只有调用了函数才会生效。调用函数的方式也很简单, 直接 函数名() 直接调用


特点


1.通过字面量声明的函数,会提升到脚本的顶部,和定义遍历的var 一样。


374ae760680a4057b270aac9a33fa8bb.png


2.通过字面量声明的函数,会成为全局的属性


6621db8f7724440e8d837630536136b2.png


3.通过typeof 函数名,得到的结果是 'function'


3583f212353d466c82ad802d29048395.png


4.函数内部的代码块,声明变量在es6以前没有使用var, 会在函数运行的时候,把声明的变量放到全局的window上面。es6严格模式不能定义,会报错。


470787775fda453aa9db3e84465490e2.png


5.函数内部如果使用var来声明变量,不会把当前变量提升到window上,而是提升到函数的代码块中的顶部,在外部是无法使用该变量。意味着函数可以有代码作用域。


7c0c7412ff774072a8f1c50ba5e6c324.png


参数


如果函数没有参数,函数将没有任何意义


function 函数名称(参数1,参数2,...){
  // 参数只能在这个代码块中使用,其他地方不能使用
}

c657a3b799a6459db2140737e905b2ee.png


形参和实参是一一对应的,实参多了,函数不管,实参少了,少了的部分会被填充undefined


返回值


函数运行后,调用函数的结果就是返回值,没有返回任何的值会默认返回undefined。 return 会阻止代码的运行,后面的代码不会被运行。


8b91cf1aa94742e1ab282d545df17156.png


文档注释


函数在代码中是非常常用的,但是每个函数的意义是好多人都不清楚,所以出现了一种文档注释,来注释函数或者是变量


/**
 *
 */

6fc7477f46c841adb6307e1722b9f90b.png

0ca945556aa34206b93bdd1f7cdbae7f.png


函数作用域


在js中,作用域分为以下三种:


1.全局作用域: 在早期的js中,在外部使用的var 声明的变量,会提升到脚本块的顶部,并且成为全局对象的属性


2.函数作用域: 在函数作用域中使用var声明的变量,会被提升到函数的顶部,并且不会成为全局对象的属性。因此,函数中声明的变量不会导致全局对象的污染。


3.块级作用域: 这个由于前面全局作用域的影响,代码多了,全局变量会遭到污染。在es6后面,使用let或者const来定义变量,这里有一个特别的作用就是块级作用域,声明的变量只在一个{}中生效。


因此,函数中声明的变量不会导致全局对象的污染,尽量的把功能封装在函数中


但是,当函数成为一个表达式时,他既不会提升,也不会污染全局对象。

有哪些方法可以将函数变成函数表达式呢?


1.将函数用小括号括起来,就成了函数表达式


372d24d7059e4597879a6c6d677ebbbb.png


上面的方式会导致无法使用名称来调用,我们知道表达式会有返回值,(function test1 () {}) 返回的就是一个函数,所以调用的方式就是,后面加上一个(), 这就是调用一个函数。


4cd0e1d0dd2d4e7c99defcd03db831dd.png


上面的这种情况,如果书写一个函数表达式,然后立即执行,该改函数我们称之为立即执行 函数 IIFE(Immediately Invoked Function Expresion)。


由于大部分情况下,立即执行函数无法被后面的代码调用,所以函数的名字可以省略,省略函数名的函数叫做 匿名函数


作用域中可以使用的变量


全局作用域只能使用全局作用域中声明的变量(包括函数)

函数作用域不仅可以使用函数作用域中的变量或者函数,还可以使用全局作用域的变量或者函数。


上面两句话的意思是,全局作用域大于函数作用域


外边的作用域不可以使用里面的, 里面的作用域可以使用外面的。


var a = '23';
function A (){
  console.log(a)
  B();
    console.log(b);
  function B(){
   var b = 'b';
  }
}
A();

262d277e1b9a4e939f5df9fc146a7ab4.png


闭包


闭包是一种现象,内部函数使用外部函数环境中的变量或者函数。


var test = '2323';
function A(){
  console.log(test)
}
// 这里面就使用了闭包


详细的闭包,后面在慢慢聊

相关文章
|
13天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
25 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
11天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
25天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
28天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
2月前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
1月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
32 4
|
1月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
16 2
|
1月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
23 5
|
1月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
22 3
|
1月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
18 3