04-JavaScript函数

函数(重点)

1.为什么使用函数?

函数来解决代码重用的问题

2.函数的意义

函数其实就是封装,把可以重复使用的代码放到函数中,如果需要多次使用同一段代码,就可以把封装成一个函数。这样的话,在你需要再次写这些代码的时候,你只需要调用一次函数就行了。

3.定义函数的方式

3.1 使用字面量的形式定义函数

ECMAScript中的函数使用function关键字来声明,后面跟一组参数及函数体。函数的基本语法如下:

3.1.1 定义函数

 function sum(num1, num2) {var num3 = num1 + num2;console.log(num3);}

3.1.2 函数的调用

这个函数的作用是把两个值加起来返回一个结果。函数必须通过调用才会执行,调用这个函数的代码如下:

sum(5, 10); //15

3.1.3 函数的参数

  • 函数的参数分为实际参数(实参)和形式参数(形参);

  • 函数可以传递1个、3个甚至不传递参数,根据实际代码的需求传递。

3.2 使用函数表达式声明函数(匿名函数)

3.3 使用Function构造函数声明函数

3.4 自执行函数

先前咱们写的函数只有在调动的时候才会执行,如果像下面这样写的话,代码执行到这一行的时候,函数会自己执行(或者说自己调用自己)。

(function(a){console.log(a);
})("abc")

4. 函数的返回值return

function sum(num1, num2) {var num3 = num1 + num2;return num3;
}
//接受函数执行的返回值
var result = sum(5, 10); //15

注意点:

  • 函数在执行完return语句之后停止并立即退出。因此,位于return语句后面的任何代码永远都不会执行。

  • 一个函数中可以有多个return语句。

  • return语句也可以不带任何返回值。

5. arguments对象

arguments 是一个对应于传递给函数的参数的类数组对象。

可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数在索引 0 处。例如,如果一个函数传递了三个参数,你可以以如下方式引用他们:

function func1(a, b, c) {console.log(arguments[0]);console.log(arguments[1]);console.log(arguments[2]);
}
​
func1(1, 2, 3);

6. 函数是一种数据类型

  • function数据类型

function fn() {}
console.log(typeof fn);//返回值是function
  • 函数作为参数

因为函数也是一种类型,可以把函数作为一个函数的参数,在一个函数中调用

function fun() {console.log('函数哦');};
​
// 函数作为superfun的参数
function superfun(theFun) {theFun();console.log('执行了');
};
​
superfun(fun);

7. 作用域

作用域:指一个变量的作用范围。

目前的学习中,在Javascript将作用域分为 全局作用域函数作用域(局部作用域)。

7.1 全局作用域

代码在程序的任何地方都能被访问,window 对象的内置属性都拥有全局作用域。

7.2 函数作用域(局部作用域)

在固定的代码片段才能被访问

7.3 全局变量和局部变量

变量的作用域范围可分为全局变量和局部变量。

  • 全局变量:

在最外层声明的变量叫全局变量。

在函数体内部,没有使用var关键字声明的变量也是全局变量。(不推荐)

  • 局部变量:

在函数体内部,使用var关键字声明的变量叫作局部变量。

7.4 作用域规则

  • 函数允许访问函数外的数据。

  • 整个代码结构中只有函数可以限定作用域。

  • 作用域规则首先使用提升规则分析。

  • 如果当前作用规则中有名字了, 就不考虑外面的名字。

    注意点:

    局部变量退出作用域之后会销毁,全局变量关闭网页或浏览器才会销毁。

//函数才有局部作用域
var num = 123;
function foo() {console.log( num );
}
foo();
if ( false ) {var num = 123;
}
console.log( num ); // undefiend

7.5 作用域链(重点)

  • 只有函数可以制造作用域结构, 那么只要是代码,就至少有一个作用域, 即全局作用域。凡是代码中有函数,那么这个函数就构成另一个作用域。如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域。

  • 将这样的所有的作用域列出来,可以有一个结构:在当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链

  • 作用域链:采取就近原则的方式来查找变量最终的值。

// 案例1:
function f1() {function f2() {}
}
​
var num = 456;
function f3() {function f4() {    }
}
// 案例2
function f1() {var num = 123;function f2() {console.log( num );}f2();
}
var num = 456;
f1();
*我可以

什么是作用域和作用域链,请解释一下?

作用域(scope)

在 Javascript 中,作用域分为 全局作用域局部作用域

全局作用域:代码在程序的任何地方都能被访问,window 对象的内置属性都拥有全局作用域。

局部作用域:在固定的代码片段才能被访问。

作用域链(scope chain)

在当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。

8. 预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。

JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程。

预解析过程:

  1. 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。

  2. 把函数的声明提升到当前作用域的最前面,函数声明代表函数整体,所以函数提升后,函数名代表整个函数。

  3. 先提升var,再提升function。

  4. 预解析会把变量和函数的声明在代码执行之前执行完成。

8.1 变量预解析

预解析也叫做变量、函数提升。 变量提升(变量预解析): 变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。

8.2 函数预解析

函数提升: 函数的声明会被提升到当前作用域的最上面,函数声明代表函数整体,所以函数提升后,函数名代表整个函数。

fun();
​
function fun() {console.log('函数啊');
};

特殊情况--函数表达式声明函数问题

fn();
var  fn = function() {console.log('想不到吧');
}
//结果:报错提示 "fn is not a function"
​
//解释:该段代码执行之前,会做变量声明提升,fn在提升之后的值是undefined;而fn调用是在fn被赋值为函数体之前,此时fn的值是undefined,所以无法正确调用

9.综合练习

1.var x;
console.log(x)
x=3;
2.//undefinedvar a = 1;
function test(){console.log(a);var a = 1;
}
test();
3.//3 2 2var b = 1;
function fun1() {b = 2;function fun2() {var b = 3;console.log(b);}fun2();console.log(b);
}
fun1();
console.log(b);
​
4.//2 1var b = 1;
function fun1(b) {b = 2;//对形参进行的操作?console.log(b);
}
fun1('yy');
console.log(b);
​
5.//3 3var b = 2;
function test2() {window.b = 3;console.log(b);
}
test2();
console.log(b);
6.//undefined 3 3c = 5;
function test3() {window.c = 3;console.log(c);var c;console.log(window.c);
}
test3();
console.log(c);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/291187.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据-hive,初步了解

1. Hive是什么 Hive是基于Hadoop的数据仓库解决方案。由于Hadoop本身在数据存储和计算方面有很好的可扩展性和高容错性,因此使用Hive构建的数据仓库也秉承了这些特性。 简单来说,Hive就是在Hadoop上架了一层SQL接口,可以将SQL翻译成MapRedu…

docker环境配置过程中的常见问题

1、pull镜像问题 docker pull jenkins/jenkins:lts Using default tag: latest Trying to pull repository docker.io/library/centos ... Get https://registry-1.docker.io/v2/library/centos/manifests/latest: Get https://auth.docker.io/token?scoperepository%3Alibr…

keil调试仿真退出卡死现象解决办法

更新到keil5版本V5.20之后,目前一直到V5.29版本,都存在一个问题: 退出调试模式时,有可能会卡死! 此时需要在任务管理器中结束掉进程才能强制关闭keil工程。 网上查找了很多资料,一种是退出仿真时不能有断…

Python:执行py命令,提示: Can‘t find a default Python.

1.Python运行环境罢工 今天,要运行一个前年用python编写的爬虫程序,先检测python运行环境是否正常: D:\Python38-32\works>c:\windows\py.exe Cant find a default Python. 再试: D:\Python38-32\works>py --list Installe…

Vue3 + Vite + TS + Element-Plus + Pinia项目(5)对axios进行封装

1、在src文件夹下新建config文件夹后,新建baseURL.ts文件,用来配置http主链接 2、在src文件夹下新建http文件夹后,新建request.ts文件,内容如下 import axios from "axios" import { ElMessage } from element-plus im…

【Node.JS】koa

文章目录 概述koa和express对比koa下载安装使用1.创建koa项目文件目录2. 创建koa服务3. 添加路由 koa-router4. 数据库服务 mongodb5. 添加请求参数json处理 koa-bodyparser6. 用户接口举例7.引入koa一些常用插件8.用户登录验证 koa-jwt9.webpack生产打包 来源 概述 Koa 是一个…

OpenAI发布Voice Engine模型!用AI合成你的声音!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识…

6_相机坐标系_相机4个坐标系详述

相机系列文章是用来记录使用opencv3来完成单目相机和6轴机械臂手眼标定。本人吃饭的主职是linux下6轴机械臂相关应用开发。但对于机械臂运动学、相机应用等都非常感兴趣,所以对一些线性代数基础薄弱又想深入了解机械臂内部运算的同志比较有体会。由于是探索性学习&a…

快速上手Spring Cloud 九:服务间通信与消息队列

快速上手Spring Cloud 一:Spring Cloud 简介 快速上手Spring Cloud 二:核心组件解析 快速上手Spring Cloud 三:API网关深入探索与实战应用 快速上手Spring Cloud 四:微服务治理与安全 快速上手Spring Cloud 五:Spring …

新数字时代的启示:揭开Web3的秘密之路

在当今数字时代,随着区块链技术的不断发展,Web3作为下一代互联网的概念正逐渐引起人们的关注和探索。本文将深入探讨新数字时代的启示,揭开Web3的神秘之路,并探讨其在未来的发展前景。 1. Web3的定义与特点 Web3是对互联网未来发…

Discourse 最多允许有几个分类级别

和 DISCUZ 不同,DISCUZ 可以允许分类下面还有分类,再继续分类这种嵌套式分类。 Discourse 最多只允许有 2 个分类。 如果你在已有的分类下再继续分类的话,系统会提示错误: 意思就是子分类不能再分子分类。 Discourse 尽量采取了…

【linux课设】自主实现shell命令行解释器

shell和bash的关系 shell是命令解释器,它接收用户的命令并将其传递给内核去执行。bash,即GNU Bourne-Again Shell,是shell的一种实现方式,也是大多数linux系统下默认的shell。 bash的原理 大多数的指令进程(除了内建命令&#…

窥探未来:Web3如何颠覆传统互联网

随着科技的迅速发展,Web3正逐渐成为人们关注的焦点。与传统的Web2相比,Web3代表了一种全新的互联网模式,其潜力和影响力引发了人们对未来的期待和探索。本文将深入探讨Web3如何颠覆传统互联网的各个方面,并展望其可能带来的未来变…

Docker搭建LNMP环境实战(08):安装php-fpm

1、编写php测试文件 在文件夹&#xff1a;/mnt/hgfs/dockers/test_site/www目录下创建文件&#xff1a;test.php&#xff0c;内容为&#xff1a; <?phpecho "hello world!!!!!! From test.php"; ?>2、编写php-fpm部署配置文件 在文件夹&#xff1a;/mnt/h…

基于单片机寻迹巡线避障智能小车系统设计

**单片机设计介绍&#xff0c;基于单片机寻迹巡线避障智能小车系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机寻迹巡线避障智能小车系统设计是一个结合了硬件与软件技术的综合性项目。该系统的目标是设计一款…

AMEYA360代理 | 江苏长晶科技FST2.0高性能 IGBT产品介绍

江苏长晶科技股份有限公司是一家专业从事半导体产品研发、生产和销售的企业。自2019年起&#xff0c;连续4年被中国半导体行业协会评为 “功率器件十强企业”。2021年开始自主研发有着“工业CPU”之称的IGBT&#xff0c;截至2023年Q3在家电/工业/新能源等行业实现8款产品市场应…

【MySQL】DML的表操作详解:添加数据&修改数据&删除数据(可cv例题语句)

前言 大家好吖&#xff0c;欢迎来到 YY 滴MySQL系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C Linux的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

政安晨:【Keras机器学习实践要点】(九)—— 保存、序列化和导出模型

目录 介绍 如何保存和加载模型 保存一个Keras模型 装回模型 设置 保存 例子&#xff1a; 自定义对象 向 load_model() 传递自定义对象 使用自定义对象范围 模型序列化 APIs 内存模型克隆 任意对象序列化和反序列化 保存模型权重 内存中的权重传递接口 无状态层…

阿里云Salesforce CRM功能差异列表 - Winter‘24

阉割版的阿里云Salesforce由于技术和监管等因素与国际版的Salesforce差距很大&#xff01; 一、Winter‘ 24版差异概况&#xff1a; 1.1. 主要版本&#xff1a; 阿里云上的 Salesforce 提供两个版本&#xff0c;用于生产用途的 CN 版本&#xff08;CN Edition&#xff09;和用…

20240329-科技咨询:比亚迪第五代DMi;央视AI《周处除三害》;带屏幕苹果耳机爆火

一、比亚迪5月份即将推出第五代DMi技术 近日&#xff0c;比亚迪举行了2023年财报投资人沟通会。会议纪要显示&#xff0c;比亚迪董事长王传福在会上透露&#xff0c;今年5月将推出第五代DMI混动技术&#xff0c;预计馈电油耗将降至2.9升/百公里&#xff0c;而满油满电续航将达…