从零开始学 Web 之 JavaScript(三)函数

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

img_25336e0b5504f9a5b326090f41d9dcd7.png

一、函数

1、函数的定义

// 第一种
function fn1(){
    console.log("我是第一种定义方法!");
}

// 第二种
var fn2 = function (){
    console.log("我是第二种定义方法!");
};  // 注意分号

function (){
   console.log("我是第二种定义方法!");
}();  // 第二种方式的调用方式之一:函数的自调用

//第三种
var fn3 = new Function("console.log('我是第三种定义方法!')");

第一种:(函数的声明)第一种定义方法最强大,定义完毕后,在哪里使用都可以,无位置限制。
第二种:(函数表达式:匿名函数) 后两种定义方法是有局限性的。(使用函数必须在定义函数之后)

2、函数的调用

函数名();

3、函数名

  • 要遵循驼峰命名法。
  • 不能同名(函数重载),否则后面的函数会覆盖前面的函数。
//打印函数名,就等于打印整个函数。
console.log(fn);
//打印执行函数,就等于打印函数的返回值。
console.log(fn()); 

4、形参和实参

  • 形参不需要写 var.
  • 形参的个数和实参的个数可以不一致 。

5、返回值

  1. 如果函数没有显示的使用 return 语句 ,那么函数有默认的返回值:undefined
  2. 如果函数使用 return 语句,但是 return 后面没有任何值,那么函数的返回值也是:undefined.

6、变量和作用域

全局变量:在 script 使用 var 定义的变量(所有的 script 共享其全局性,js 里面没有块级作用域概念,只有全局作用域和局部作用域)。

隐式全局变量:在 script 没有 var 的变量。

function fn(){
  var a = b = c = 1;       // b和c就是隐式全局变量(等号)
  var a = 1; b = 2; c = 3;   // b和c就是隐式全局变量(分号)
  var a = 1 , b = 2 , c = 3;  // b和c就不是隐式全局变量(逗号)
}

(全局变量是不能被删除的,隐式全局变量是可以被删除的)

var num1 = 10;
num = 20;
delete num1;
delete num2;
console.log(typeof num1); // number
console.log(typeof num2); // undefined

局部变量函数内部用 var 定义的变量和形参。

6.1、变量声明提升(预解析)

作用:查看语法错误。js的解析器在页面加载的时候,首先检查页面上的语法错误。把变量声明提升起来。(变量声明提升和函数整体提升)

6.2、变量的提升

只提升变量名,不提升变量值。

consolas.log(aaa);// 打印的结果是 undefined ,因为只提升变量名,不提升变量值。
var aaa = 111; 

在函数范围内,照样适用。

6.3、函数的提升

function 直接定义的方法:整体提升(上面说的第一种函数定义的方法).

fn();

var aaa = 111;
function fn(){
    //变量声明提升在函数内部照样实用。
    //函数的就近原则(局部变量作用域),打印的aaa不是111,而是 undefined。
    console.log(aaa); // undefined
    var aaa = 222;
}

预解析会分块:

多对的 script 标签中函数重名的话,预解析不会冲突。也就是预解析的作用域是每一个的 script 标签。

var先提升,function再提升:

示例:

console.log(a); // 输出a函数体
function a() {
    console.log("aaaaa");
}
var a = 1;
console.log(a); // 输出1

打印第一个结果的时候,var会提升,之后 function 再提升,但是函数a和变量a重名,function的a在后面覆盖掉变量a,所以第一个输出 a 函数体.

第二个前面var a = 1;提升之后,这个位置就相当于只有 a = 1; 赋值,所以第二个打印1.

6.4、匿名函数

作用大致如下:

//1.直接调用
(function (){
    console.log(1);
})();

//2.绑定事件
document.onclick = function () {
    alert(1);
}

//3.定时器
setInterval(function () {
    console.log(444);
},1000);

img_25336e0b5504f9a5b326090f41d9dcd7.png

img_964e5550b9dc423fcb4297d85f09ac10.png

目录
相关文章
|
2月前
|
开发框架 JavaScript 前端开发
使用 Node.js 和 Express 构建 Web 应用
【10月更文挑战第2天】使用 Node.js 和 Express 构建 Web 应用
|
1月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
41 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
2月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
44 1
JavaScript控制台:提升Web开发技能的秘密武器
|
1月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
35 4
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
2月前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
47 12
|
2月前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
24 1
|
2月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用