javascript函数

函数

函数

变量的作用：临时保存数据，保存的数据有类型，后期js会出现变量的类型，用来保证放入变量中的数据符合数据类型的规范

运算符的作用：连接变量或字面量，创建计算表达式，获取计算结果

流程控制的作用：使变量按照设计的逻辑正确执行

对象的作用：存储一组相关的数据包含方法，后期可以按照面向对象的方法去设计和组装程序

函数：封装一段业务逻辑diamond被称为函数

​ 作用：将多条语句，封装为一个整体，使函数表达。

​ 语法：

//声明方式
function 函数名(参数){
    一条或多条语句;
}
//表达式方式
var fun = function(){
    一条或多条语句;
}

//函数的使用
函数名（参数）;

//封装到函数中的逻辑代码不会立刻执行
//函数中的代码会在被调用时执行
//函数在被调用时，里面的语句会依次执行

//创建匿名函数,赋值给变量
var fun = function(){
    console.log("fun");
}

理解函数也是一种对象，也可以理解为能够被调用执行的对象

函数对象具有普通对象所有的特征和功能，但更强大，可以封装逻辑代码

使用typeof检查一个函数对象是，会返回function

//给函数添加属性
fun.i = 10;
fun2.i = 20;
console.log(fun.i, fun2.i);

通过构造函数来创建函数（不常用。了解）

封装执行的业务逻辑代码需要以字符串的方式传递给函数对象

 var code = 'console.log("构造方式创建函数")';
//通过构造创建函数
var fun3 = new Function(code);
fun3();

参数

函数内部执行逻辑时，需要用到外部的数据，通过参数声明来传递数据。

参数值可以通过调用函数时来传递。

多个参数之间，需要使用逗号隔开。

函数在声明时的参数也被称为：形参（形式参数）。

声明形参，也相当于在函数内部声明了变量，可以直接使用。

函数调用，不会检查参数的类型和数量，根据需要可以对参数进行类型检查。

参数的类型可以是任意类型。

 function add(x,y){ //变量x，y就是形参
  console.log("x  = " + x);
  console.log("y  = " + y);
  //判断是否为number
  if(isNaN(x) || isNaN(y)){
    console.log('不是number类型');
  }else {
    console.log(x + y);
  }
}

 add(2,3);
 add(2,'a');

函数在调用时需要指定具体的数据，称为实参（实际参数）。

实参会赋值给对应的形参。

通常实参和形参同名。

调用函数时，如果实参少于形参的数量，则输出结果为：undefined。

调用函数时，解析器不会检查实参的数量，多余的不会被赋值。

有可能实际的使用中接受到非法的参数，根据需要对实参进行校验

基本类型传参

 var i = 10;
 console.log("前：i = " + i); //10
 var add = function(i){
     i++;
 }
add(i);
console.log("后：i = " + i); //10

引用类型传参

var num = {};
num.i = 10;
console.log("前：num.i = " + num.i); //10
var add2 = function(num){
    num.i++;
}
add2(num);
console.log("后：num.i = " + num.i); //11

函数返回值

使用return语句返回函数计算的结果。

返回的结果一般都使用变量保存，谁调用返回给谁。

return之后的语句不会被执行，函数运行到此行，函数结束。

如果函数中不写return，则会返回undefined。

如果函数return之后不跟值，则也返回undefined。

如果return之后，继续写逻辑代码，则return之后的代码不会被执行。

如果函数中写了return，但没有紧跟这写变量或值，则返回underfined。

return 只能用在函数中，return在当前点结束函数。包括正在运行的循环。

函数的返回值可以是任意类型，包括对象，函数的返回值类型可以为函数。

• 使用break，continue，和return的区别：break结束循环，continue跳出循环，继续下一轮循环，return当前点结束函数，循环和函数都结束；

函数的作用域

表示一个变量的作用区域，如果超出作用区域，则变量不能被访问。

在函数外访问函数内部定义的变量，则报错，表示定义的变量存在访问的范围，如果超出区域不能访问。

js存在两种作用域

1. 全局作用域
2. 函数作用域

全局作用域

直接定义的变量，没有在任何函数内部，则变量的作用域在全局范围内。

全局作用域在页面打开时创建，在页面关闭时销毁

在全局作用域中有一个全局的对象window,我们可以直接使用，它时有浏览器创建，代表浏览器的一个窗口

在全局作用域中

​ 我们创建的变量会作为window对象的属性存在

​ 我们创建的函数会作为window对象的方法存在

以全局的winodow开头的属性和方法，可以直接使用，默认不需要使用window来调用

全局作用域的变量在js范围的页面中任何位置都能访问

 //全局作用域的变量
var x = 10;
var y = "abc";
function show(){
   console.log("print() --- " + x);
}
//访问全局变量
console.log(show); //自定义函数show
console.log(x); //变量x

函数作用域

在当前函数中定义的变量，则作用域在函数作用域。即当前函数范围起作用

调用函数时，创建函数作用域，函数执行完毕后，函数作用域销毁

每执行一次函数，就创建一次函数作用域，彼此之间互相独立

在函数作用域中可以访问到全局作用域中的变量，反之则不成立

在函数作用域中操作一个变量时，它会先在自身作用域中寻找，如果存在，则使用，如果没有则向上一级作用域中寻找，直到找到全局作用域，如果依然没有找到，则报错

如果函数中使用全局作用域中的变量，则使用window

//创建全局作用域变量
 var obj = new Object();

 function fun(){
     var i = 10;
     console.log("i = " + i + "----" + obj);

 return obj;
 };

 console.log(i); // 报错
 fun(); //i = 10
 fun(); //i = 10

调用两次函数，返回的是同一个对象。

声明提前

全局变量的声明提前

​ 如果使用var关键字声明的变量，会在变量使用前被提前声明，但不会被赋值

​ 使用时输出undefined

​ 如果没有使用var关键字，则变量不会被声明提前

		/*
          场景：先定义变量，在输出变量的值
          结论：输出变量的值
        */
      //全局a
    var a = 123;
    console.log("a = " + a); //123

       /*
        场景2：先输出变量值，在定义变量
        结论：输出undefined
        var a;
        console.log("a = " + a); //undefined
        a = 123;
       */
  console.log("a = " + a); //123
  var a = 123;
       /*
        场景3： 先定义变量，再输出变量的值，但没有使用关键字var
        结论：
       */
  a = 123;
  console.log("a = " + a); //123
         /*
        场景4： 先输出变量的值，再定义变量，但没有使用关键字var
        结论：报错
       */
  console.log("a = " + a); //123
  a = 123;

函数的声明提前

声明函数相当于全局作用域中创建变量，变量名等于函数名

使用声明方式创建的函数，会在函数调用之前，被提前声明，所有可以先调用，再声明

使用函数表达式创建的函数，不会被提前声明，所以不能先调用，再执行

//调用函数
//  fun();
//  fun2();
console.log(fun); //函数
console.log(fun2); //undefined

//声明方式创建函数
function fun(){
  console.log('fun被执行 ---- ');
};

//表达式方式创建函数
var fun2 = function(){
 console.log('fun2被执行 ---- ');
};

参数对象

当我们调用函数时，浏览器都会给函数默认传递两个隐含的对象

1、函数的上下问题对象 this

​ 2、封装实参的对象 arguments

arguments对象是类似与数组的对象，可以通过下标获取对应的实参信息

通过length获取长度

在调用函数时，我们所传递的实参都会封装到arguments对象中

如果没有定义形参，我们通过arguments也可以获取实参，但比较麻烦

cellee属性对应一个函数对象，就是当前正在执行的函数对象本身

function show(x, y, z){
//出现隐含的对象arguments，这个对象就是参数对象
 console.log(arguments);

//arguments判断不是数组
console.log(arguments instanceof Array); //false
console.log(Array.isArray(arguments)); //false

//arguments.length 返回参数的个数
 console.log(arguments.length);
    
 console.log(arguments[0]);
 console.log(arguments[1]);
 console.log(arguments[2]);


//通过callee属性可以获取函数对象本身
console.log(arguments.callee); //function
console.log(arguments.callee === show); //true
};
show(1,2,3);

立即执行函数

函数定义完成后，就立即被执行，次数通常为一次

语法：(function(参数){

​ })();

(function(){
    console.log('立即执行函数被执行');
})

//带参数的立即执行函数
var res = (function(x,y){
    return x,y;
})(2,3);
console.log(res);

this对象

在调用函数时，浏览器会给函数传递一个隐含的对象。其中一个为this

this这个对象，也被称为函数的上下文对象

根据函数的调用方式，this指向不同的对象

1. 以函数方式调用，this === window
2. 以方法方式调用，this === 调用方法的当前对象

//以函数的方式调用
function show(){
     console.log("函数内 ： name = " + name);
     console.log("函数内 ： this.name = " + this.name);
}
show();//this为window

//以方法的方式调用
var p = {
    name:'ton',
    age:20,
    sex:'男',
    info:show
}
p.info();//this为当前p对象

箭头函数

语法：

​ var 变量 = (形参) =>{}

//使用箭头函数
var sayHello = () => {
  console.log('HelloWorld');
};
sayHello();

如果函数中只有一个参数，则小括号可以省略

//如果形参只有一个，则可以省略()
var sayHello2 = name => {
  console.log('HelloWorld: ' + name);
}
sayHello2('tom');

如果函数中只有一句return代码，则箭头后的{}和return都可以省略

 //如何函数中只有一条return执行语句，则可以省略{} 即return
var add = (x, y) => x + y;
var res = add(10,20);
console.log(res);

箭头函数中不能使用arguments对象

 var a = ()=>{
	//报错
	console.log(arguments);
}
a();