博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript中的函数个人分享
阅读量:6263 次
发布时间:2019-06-22

本文共 3123 字,大约阅读时间需要 10 分钟。

函数

函数的概述

  • 所谓函数就是只被定义一次,但可能被执行或调用多次
  • 变量与函数的区别: 变量存的是数据内容而函数存的是语句块

定义函数

  • 备注:
  1. 定义函数时 - 函数体的内容不会被执行
  2. 调用函数时 - 函数体才被执行
  • 注意: 一般以个函数就去完成一个功能

1.函数声明方式:

  • 语法: function 函数名称 () {
    函数体 - 语句块 }
  • 注意: 定义函数时 - 函数体的内容是不会被执行的

示例代码:

function fu(){     console.log('一花一世界')     }

2.字面量/直接量方式:

  • 语法: var 函数名称 = function(){
    函数体 }

示例代码:

var fun = function(){    console.log('这是一个函数');};// 调用函数 -> 函数体的内容才被执行fun();
  • 注意: 控制台调用函数的语法是函数名加( )而不是console.log( )

示例代码:

/* 调用函数 */fu()

变量与函数

var v = 100;/* 定义变量,并初始化值 */console.log(v);/* 调用变量 */// 变量是允许被重新赋值的v = function(){    console.log('这是一个函数');}// v既是个变量,又是个函数console.log(v);// 调用结果为 [Function: v]v();/* 函数的调用 */

控制台效果图:

图片描述

  • 注意: 一旦有同名的变量时下面的函数则不生效

示例代码:

var v2 = 200;function v2(){    console.log('这是一个函数');}// v2是变量 - TypeError: v2 is not a function - 表示 v2 不是一个函数console.log(v2);v2();

控制台效果图:

图片描述


函数的参数

  • 函数参数分类两种:
  1. 形参 : 就是定义函数后的小括号叫形参 - function fun(形参)

    • 注意: 允许定义多个形参 - 形参之间使用逗号分隔
  2. 实参 : 就是调用函数后的小括号叫实参 - fun(实参)

    • 注意: 形参的个数与实参不一定是一致的
    • 参的个数多于实参的个数 -> 多余的形参没有值(默认为 undefined)
    • 实参的个数多余形参的个数 -> 多余的实参没有对应的形参
    • 形参与实参根据占位符进行一一对应

示例代码:

function fun(a){// 在函数中定义一个变量,但未初始化值    console.log(a);}fun(100, 200);// 为函数中定义的变量初始化值

return语句

  • 函数的return语句

    • 注意:
    • 并不是必要的 - 可有可无
    • 作用 - 作为函数的返回值(数据内容)
    • 用法 - 一般会被编写在函数体的最后面

示例代码:

function fun(){    console.log('一花一世界');    return 100;}/* 将函数的返回值 赋值到变量中 */ var result = fun(); console.log(result);console.log(fun());/* 打印函数调用的结果 */console.log(fun);/* 打印变量的值 */
  • 函数的return语句

    • 注意:
    • 的确允许不编写在函数体的最后面
    • 一旦return语句不在函数体的最后面 - return语句之后的代码都不再执行

示例代码:

function fn(){    console.log('这是return语句之前...');    return;    console.log('这是return语句之后...');}var result = fn();console.log(result);// 100

目前JavaScript得到undefined值的情况总结:

  1. 定义变量,但未初始化值
  2. 定义变量,并初始化值为 undefined
  3. 访问数组中不存在的位置 - 默认值为 undefined
  4. 在函数体调用没有定义值的形参 - 默认值为 undefined
  5. 当函数定义时,没有指定返回值 - 默认返回值为 undefined

作用域

  • 就是变量和函数都有作用域,作用域就是变量和函数的可被访问范围,控制着变量和函数的可见性和生命周期- 函数作用域就是某一个函数里的
  • 函数以外的叫全局作用域
  • 备注: 函数作用域中的变量叫局部变量

全局作用域与局部作用域

全局作用域

  • 全局作用域(函数作用域之外的范围) - 全局变量

    • 全局变量的作用域 - 全局作用域 + 函数作用域
  • 注意: 全局作用域不能访问局部变量

全局作用域与局部作用域示例代码对比:

var v1 = 100;console.log(v1);function fun(){    /*        函数作用域 - 局部变量        * 局部变量的作用域 - 当前函数作用域     */    var v2 = 200;    console.log(v1);    console.log(v2);}console.log(v1);fun();// 全局作用域不能访问局部变量// console.log(v2);function fn(){    console.log(v2);}fn();

局部作用域与函数的参数

  • 局部变量 - 作用于当前函数作用域中

    • 局部变量的值 - 只能在当前函数作用域进行初始化
  • 函数的参数 - 作用于当前函数体中

    • 参数的值(实参) - 在全局作用域中传递的

示例代码:

var num = 200;function fun(a){    var v = 100;    console.log(v + a);}fun(num);

控制台调用图:

图片描述


按值传递

  • 是指将函数实参的变量值赋值给函数形参,使实参和输出结果一样
  • 在对局部变量进行修改时,不会修改全局变量

示例代码:

/* 按值传递 */var num = 100;/* 定义一个全局变量 *//* 定义一个函数 */function fun(num){/* 形参 */    num++;    console.log('这是函数内部的值: ' + num);// 101}/* 调用指定函数 - 实参传递的是全局变量的值 */fun(num);/* 实参 *//* 调用指定全局变量 */console.log('这是全局作用域的值: ' + num);// 100 101var v = 200;function fn(){    v++;}fn();console.log(v);// 201

声明提前

  • 表示在使用变量时,先调用变量,在对变量进行定义

    • 注意: 语法不会报错,会显示 undefined

示例代码:

console.log(num);// undefinedvar num = 100;/* 定义全局变量 *//* 定义函数 */function fun(){    // 全局变量与局部变量同名时 - 在当前函数作用域中只能访问局部变量    console.log(num);// undefined    var num = 200;/* 定义局部变量 */    // 就近原则    console.log(num);// 200}/* 调用函数 */fun();// 局部变量在全局作用域中无法访问 - 只能访问全局变量console.log(num);// 100

控制台调用图:

图片描述

转载地址:http://jckpa.baihongyu.com/

你可能感兴趣的文章
Payara基金会发布全面支持MicroProfile 2.0的5.183版
查看>>
360金融宣布采用新会计准则 2018年前三季度净利11亿
查看>>
非洲小哥见到马云 竟然提了这样的要求?
查看>>
收购大战:高通承诺将年收入增长率提至8%
查看>>
宁夏:科技创新激活高质量发展动能
查看>>
毕马威:中国消费未现降级 进一步增长潜力巨大
查看>>
四川眉山:苏东坡诞辰982周年非遗传承人展技艺
查看>>
新式茶饮市场扩张 网红奶茶店如何解决排队难题?
查看>>
兰州百万现金表彰星级的哥的姐 弘扬敬业奉献美德
查看>>
Python比总统更受关注:关于Python的五个事实
查看>>
第二代NumPy?阿里开源超大规模矩阵计算框架Mars
查看>>
几小时的事儿,苹果刚发布iOS 11.2.1又被阿里安全工程师完美越狱
查看>>
react配置eslint
查看>>
Web 安全漏洞之 OS 命令注入
查看>>
大数据平台架构技术选型与场景运用
查看>>
每天一个设计模式之享元模式
查看>>
微服务调用链追踪中心搭建
查看>>
一个强大的图片压缩算法—近微信压缩机制的Luban
查看>>
『React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南
查看>>
java基础(十一) 枚举类型
查看>>