javascript学习四、Function函数、伪数组arguments

一.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：推荐