04-JavaScript函数

news2024/9/28 21:30:03

函数(重点)

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.//undefined

var a = 1;
function test(){
    console.log(a);
    var a = 1;
}
test();
3.//3 2 2

var b = 1;
function fun1() {
    b = 2;
    function fun2() {
        var b = 3;
        console.log(b);
    }
    fun2();
    console.log(b);
}
fun1();
console.log(b);
​
4.//2 1

var b = 1;
function fun1(b) {
    b = 2;//对形参进行的操作?
    console.log(b);
}
fun1('yy');
console.log(b);
​
5.//3 3

var b = 2;
function test2() {
    window.b = 3;
    console.log(b);
}
test2();
console.log(b);
6.//undefined 3 3

c = 5;
function test3() {
    window.c = 3;
    console.log(c);
    var c;
    console.log(window.c);
}
test3();
console.log(c);

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

报错there is no HDFS_NAMENODE_USER defined

在Hadoop安装目录下找到sbin文件夹,修改里面的四个文件 1、对于start-dfs.sh和stop-dfs.sh文件,添加下列参数: HDFS_DATANODE_USERroot HDFS_DATANODE_SECURE_USERhdfs HDFS_NAMENODE_USERroot HDFS_SECONDARYNAMENODE_USERroot 2、对于st…

TCPView下载安装使用教程(图文教程)超详细

「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:更多干货,请关注专栏《网络安全自学教程》 TCPView是微软提供的一款「查看网络连接」和进程的工具,常用来查看电脑上的TCP/UDP连接…

我与电源 3 - 电源反激战

老同志看到标题就能猜到,我今天要讲什么。 在我的技术栈里面,对于交流电接触的实在不多,因此对于反激电源这个鬼东西,我一开始也是非常模糊的。 2014 年的时候,我来到了一家做平衡车的企业,承担的任务是开发独轮平衡车,彼时公司只有两轮平衡车业务,那时候的两轮平衡车…

正弦实时数据库(SinRTDB)的使用(4)-快照查询

前文已经将松果实时数据库的安装、创建点表、创建测点、接入OPC DA的数据进行了介绍,没有了解的可以先看如下博客: 正弦实时数据库(SinRTDB)的安装 正弦实时数据库(SinRTDB)的使用(1)-使用数据发生器写入数据 正弦实时数据库(SinRTDB)的使用(2)-接入O…

倍压器电路原理及仿真

倍压器是利用二极管单向导通的特性和电容两端电压不能突变且可以存储能量的特性,使得能量逐步往后级输送,同时线路上的电压也逐渐升高。因此,它可以实现将较低的交流电压转换成一个较高的直流电压。根据倍压的原理,有二倍压、三倍…

喜讯!云起无垠入围2023年度中国高科技高成长企业系列榜单

近期,由【第一新声】与【天眼查】共同发起的“数字未来”系列评选活动揭晓了2023年度中国高科技高成长企业入围榜单。在此次评选中,云起无垠与腾讯安全、绿盟科技、奇安信、深信服、启明星辰、天融信、亚信安全、安恒信息等安全厂商一同入围网络安全领域…

KubeSphere简单介绍及安装使用

KubeSphere 概述 官网地址:https://kubesphere.io/zh/ 什么是 kubesphere KubeSphere 是一个开源的多云容器管理平台,旨在简化企业级 k8s 集群的部署、管理和运维。它提供了一个可视化的管理界面,帮助用户更轻松地管理和监控 k8s 集群&…

Nginx部署VUE3项目

build 打包生成 dist 上传至服务器版本:nginx1.24,dist放置根目录下html下 location / {#项目打包生成的静态文件所在路径 配置要打开的资源的根目录的地址,是以 nginx 下的 html 文件夹中dist为根目录来查找的root html/dist;#默认主页in…

前端学习<二>CSS基础——06-CSS盒模型详解

盒子模型 前言 盒子模型,英文即box model。无论是div、span、还是a都是盒子。 但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。…

【C语言】strcmp 的使⽤和模拟实现

前言 这篇文章将要带我们去实现模拟一个strcmp函数 首先我们要知道strcmp函数的定义 strcmp()定义和用法 我们先看一下strcmp在cplusplus网站中的定义 链接: link int strcmp ( const char * str1, const char * str2 );比较两个字符串将 C 字符串 str1 与 C 字符串 str2 …

There is no getter for property named ‘deleted‘

实体类在继承BaseEntity的时候,由于没填写deleted参数名导致mybatis报错 这时候要么改application.yml里的mybatis参数👇 要么就将BaseEntity基类的delete上加个existfalse👇(推荐)

工业互联网下的增强现实

工业互联网下的增强现实 1、 概述 增强现实(Augmented Reality,简称AR),增强现实技术也被称为扩增现实,AR增强现实技术是促使真实世界信息和虚拟世界信息内容之间综合在一起的较新的技术内容,其将原本在现…

C语言牛客网BC-37 牛牛的圆(求面积)

题目如下 代码实现 #include<stdio.h> int main() { float r 0;float s 0;scanf("%f",&r);s 3.14*r*r;printf("%.2f",s);return 0; } 创作不易&#xff0c;点点关注&#xff0c;感谢支持&#xff01;&#xff01;&#xff01;

深入解析MD5哈希算法:原理、应用与安全性

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 本文将深入探讨MD5哈希算法的工作原理、应用场景以及安全性问题。我们将了解MD5如何生成固定长度的哈希值&#xff0c;以及它在数…

前端Webpack5高级进阶课程

课程介绍 本套视频教程主要内容包含React/Vue最新版本脚手架分析、基于Webpack5编写自己的loader和plugin等&#xff0c;让你开发时选择更多样&#xff0c;最后&#xff0c;用不到一百行的代码实现Webpack打包。通过本套视频教程的学习&#xff0c;可以帮你彻底打通Webpack的任…

蚂蚁集团Java一面,不只是技术问题,还有系统设计的深度拷问!

下面我将分享一位同学在蚂蚁集团Java一面的面试经历&#xff0c;他的评价是&#xff0c;面试过程中问题很深入&#xff0c;你试试呢&#xff1f; 【提醒】通过这次面试经验&#xff0c;你将可以复习到以下知识点&#xff1a; 线程池的工作原理、参数配置及使用注意事项CPU密集…

java特殊文件——properties属性文件概述

前言&#xff1a; 整理下学习笔记&#xff0c;打好基础&#xff0c;daydayup!! properties properties是一个Map集合&#xff08;键值对合集&#xff09;&#xff0c;但是一般不当作合集。而是用来代表属性文件&#xff0c;通过Properties读写属性文件里的内容 Properties调用方…

【计算机考研】408到底有多难?

你真以为大家是学不会408吗&#xff1f; 不是&#xff01;单纯是因为时间不够&#xff01;&#xff01;&#xff01; 再准确一些就是不会分配时间 408的知识其实并不难&#xff0c;要说想上130那确实有难度&#xff0c;但是100在时间充裕的情况下还是可以做到的 我本人是双…

深入浅出:探索Hadoop生态系统的核心组件与技术架构

目录 前言 HDFS Yarn Hive HBase Spark及Spark Streaming 书本与课程推荐 关于作者&#xff1a; 推荐理由&#xff1a; 作者直播推荐&#xff1a; 前言 进入大数据阶段就意味着 进入NoSQL阶段&#xff0c;更多的是面向OLAP场景&#xff0c;即数据仓库、BI应用等。 …

阅读笔记(MM2023)Learning pixel-wise alignment for unsupervised image stitching

无监督图像拼接中的学习逐像素对齐 Jia, Q., Feng, X., Liu, Y., Fan, X., & Latecki, L. J. (2023, October). Learning pixel-wise alignment for unsupervised image stitching. In Proceedings of the 31st ACM International Conference on Multimedia (pp. 1392-140…