一.Function函数基础

函数:就是将一些语句进行封装,然后通过调用的形式,执行这些语句。

1.函数的作用:

  • 将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动。

  • 简化编程,让编程模块化。

console.log("hello world");
sayHello(); //调用函数
//定义函数:
function sayHello(){
  console.log("hello");
  console.log("hello world");
}

2.函数的定义

函数定义的语法:

function 函数名字(){
函数体
return 返回值
}

解释如下:

  • function:是一个关键字。中文是“函数”、“功能”。

  • 函数名字:命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号,不能以数字开头。

  • 参数:后面有一对小括号,里面是放参数用的。

  • 大括号里面,是这个函数的语句。

3. 函数的调用

函数调用的语法:

函数名字();

4. 形参和实参

函数的参数包括形参和实参

注意:实际参数和形式参数的个数,要相同。

sum(3,4);
sum("3",4);
sum("Hello","World");

//函数:求和
function sum(a, b) {
console.log(a + b);
}

5. 函数的返回值

console.log(sum(3, 4));
//函数:求和
function sum(a, b) {
return a + b;
}

二.函数类型

  JavaScript中函数基本上可以分为一下三类,普通函数,匿名函数,自执行函数,此外需要注意的是对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。

// 普通函数
function func(arg){
return true;
} // 匿名函数
var func = function(arg){
return "tony";
} // 自执行函数
(function(arg){
console.log(arg);
})('123')

注意:对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。

三.函数作用域

JavaScript中每个函数都有自己的作用域,当出现函数嵌套时,就出现了作用域链。当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在,则异常。

切记:所有的作用域在创建函数且未执行时候就已经存在。

(1)“JavaScript中无块级作用域”

function Main(){
if(1==1){
var name = 'seven';
}
console.log(name);
}
// 输出: seven

补充:标题之所以添加双引号是因为JavaScript6中新引入了 let 关键字,用于指定变量属于块级作用域。

(2)JavaScript采用函数作用域

在JavaScript中每个函数作为一个作用域,在外部无法访问内部作用域中的变量。

function Main(){
var innerValue = 'seven';
} Main(); console.log(innerValue); // 报错:Uncaught ReferenceError: innerValue is not defined 

(3)JavaScript的作用域链

由于JavaScript中的每个函数作为一个作用域,如果出现函数嵌套函数,则就会出现作用域链。 

xo = 'tomcat';

function Func(){
var xo = "seven";
function inner(){
var xo = 'alvin';
console.log(xo);
}
inner();
}
Func();

如上述代码则出现三个作用域组成的作用域链,如果出现作用域链后,那么寻找变量时候就会出现顺序,对于上述实例:

当执行console.log(xo)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。

(4)JavaScript的作用域链执行前已创建

JavaScript的作用域在被执行之前已经创建,日后再去执行时只需要按照作用域链去寻找即可。

示例一:

xo = 'tomcat';

function Func(){
var xo = "seven";
function inner(){ console.log(xo);
}
return inner;
} var ret = Func();
ret();
// 输出结果: seven

上述代码,在函数被调用之前作用域链已经存在:

  • 全局作用域 -> Func函数作用域 -> inner函数作用域

当执行【ret();】时,由于其代指的是inner函数,此函数的作用域链在执行之前已经被定义为:全局作用域 -> Func函数作用域 -> inner函数作用域,所以,在执行【ret();】时,会根据已经存在的作用域链去寻找变量。

示例二:

xo = 'tomcat';

function Func(){
var xo = "mei";
function inner(){ console.log(xo);
}
xo = 'seven';
return inner;
} var ret = Func();
ret();
// 输出结果: seven

上述代码和示例一的目的相同,也是强调在函数被调用之前作用域链已经存在:

  • 全局作用域 -> Func函数作用域 -> inner函数作用域

不同的时,在执行【var ret = Func();】时,Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”,所以之后再执行【ret();】时,就只能找到“seven”。

示例三:

xo = 'tomcat';

function Bar(){
console.log(xo);
} function Func(){
var xo = "seven"; return Bar;
} var ret = Func();
ret();
// 输出结果: tomcat

上述代码,在函数被执行之前已经创建了两条作用域链:

  • 全局作用域 -> Bar函数作用域
  • 全局作用域 -> Func函数作用域

当执行【ret();】时,ret代指的Bar函数,而Bar函数的作用域链已经存在:全局作用域 -> Bar函数作用域,所以,执行时会根据已经存在的作用域链去寻找。

(5)提前声明变量

在JavaScript中如果不创建变量,直接去使用,则报错:

console.log(xxoo);
// 报错:Uncaught ReferenceError: xxoo is not defined

JavaScript中如果创建值而不赋值,则该值为 undefined,如:

var xxoo;
console.log(xxoo);
// 输出:undefined

在函数内如果这么写:

function Foo(){
console.log(xo);
var xo = 'seven';
} Foo();
// 输出:undefined

上述代码,不报错而是输出 undefined,其原因是:JavaScript的函数在被执行之前,会将其中的变量全部声明,而不赋值。所以,相当于上述实例中,函数在“预编译”时,已经执行了var xo;所以上述代码中输出的是undefined。

四.闭包

「闭包」,是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」

由于作用域链只能从内向外找,默认外部无法获取函数内部变量。闭包,在外部获取函数内部的变量。

function f2(){
var arg= [11,22];
function f3(){
return arg;
}
return f3;
} ret = f2();
ret();

五.伪数组arguments

arguments代表的是实参。有个讲究的地方是:arguments只在函数中使用

(1) 返回函数实参的个数:arguments.length

例子:

fn(2,4);
fn(2,4,6);
fn(2,4,6,8); function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //获取形参的个数
console.log(arguments.length); //获取实参的个数 console.log("----------------");
}

结果:

(2) 之所以说arguments是伪数组,是因为:arguments可以修改元素,但不能改变数组的长短。举例:

fn(2,4);
fn(2,4,6);
fn(2,4,6,8); function fn(a,b) {
arguments[0] = 99; //将实参的第一个数改为99
arguments.push(8); //此方法不通过,因为无法增加元素
}

清空数组的几种方式:

var array = [1,2,3,4,5,6];

array.splice(0);      //方式1:删除数组中所有项目
array.length = 0; //方式1:length属性可以赋值,在其它语言中length是只读
array = []; //方式3:推荐

javascript学习4、Function函数、伪数组arguments的更多相关文章

  1. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  2. JavaScript 函数 伪数组 arguments

    一.函数 函数:函数就是将一些语言进行封装,然后通过调用的形式,执行这些语句. 函数的作用: 1.将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动 2.简化编程,让变 ...

  3. python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  4. 【JavaScript学习笔记】函数、数组、日期

    一.函数 一个函数应该只返回一种类型的值. 函数中有一个默认的数组变量arguments,存储着传入函数的所有参数. 为了使用函数参数方便,建议给参数起个名字. function fun1(obj, ...

  5. 前端 -----函数和伪数组(arguments)

    函数   函数:就是将一些语句进行封装,然后通过调用的形式,执行这些语句. 函数的作用: 将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动. 简化编程,让编程模块化. ...

  6. 09-JavaScript之伪数组arguments

    JavaScript之伪数组arguments arguments代表的是实参.有个讲究的地方是:arguments只在函数中使用. 1.返回函数实参的个数 使用argument.length方法返回 ...

  7. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  8. 09 Javascript的伪数组 arguments

    arguments代表的是实参.有个讲究的地方是:arguments只在函数中使用. (1)返回函数实参的个数:arguments.length 例子: fn(2,4); fn(2,4,6); fn( ...

  9. javascript学习总结之函数

    前言 在学习javascript函数的时候,有几个经常很容易混淆的方法,call,apply,bind,caller,callee,这些方法的使用,这些也可以说是会频繁使用的一些方法,在此通过查阅相关 ...

随机推荐

  1. Idea 进行断点调试的 快捷键

    快捷键 功能描述F8 单步调试,不进入函数内部F7 单步调试,进入函数内部Shift+F7 选择要进入的函数Shift+F8 跳出函数Alt+F9 运行到断点Alt+F8 执行表达式查看结果F9 继续 ...

  2. Shell脚本之八 函数

    一.函数定义 Linux shell 可以用户定义函数,然后在shell脚本中可以随便调用. shell中函数的定义格式如下: [ function ] funname [()] { action; ...

  3. Maven 教程(12)— Maven生命周期和插件

    原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79549695 除了坐标.依赖以及仓库之外,Maven的另外两个核心概念是生命周期 ...

  4. jquery的Layer弹出框操作

    在layer中,我们要先获取窗口的索引,然后再进行操作. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 $("# ...

  5. 什么是 ZFS文件系统?ZFS概念及特点简介

    什么是 ZFS? ZFS(Zettabyte File System)是由SUN公司的Jeff Bonwick领导设计的一种基于Solaris的文件系统,最初发布于20014年9月14日. SUN被O ...

  6. Nginx配置REWRITE隐藏index.php

    server { listen 80; server_name localhost; root D:\workspace\PHP\Atromic; location / { index index.p ...

  7. 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[5]:调试 debug

    作者:Xuejie 原文链接:https://xuejie.space/2019_10_18_introduction_to_ckb_script_programming_debugging/ Ner ...

  8. IDEA开发React环境配置

    概述 习惯了IDEA写代码,也不想在下一个webstorm,而且IDEA是webstorm的父集,webstorm能干的,IDEA应该也是可以的.本篇随便记录下idea下的react的环境搭建. 环境 ...

  9. RGB的光的三原色、品红黄青颜料的三原色

    学习了祁连山老师讲的光与色的基础知识,觉得收获颇多,所以记下来光与色的知识点. 首先提问大家一个问题:照片中物体的颜色就是它的固有色么?(请从色光和物体固有色的角度回答) 这个问题在看完下面的总结后相 ...

  10. 指针总结指向const的指针、const指针、指向const指针的const指针

    指针的一些总结   const与指针 指向const的指针指的是指针指向的数据是常量,不可以被修改,但指针变量本身可以被修改,如const int *p:严格说不能用指针间接修改指向的数据,但该变量可 ...