JavaScript学习DAY3

DAY3

一、函数

定义方式
  • 声明式函数
    function fn(形参){

    }
	fn(实参)
  • 赋值式函数
    var fn = function(形参){

    }
    fn(实参)

声明式函数可以在声明之前和之后调用
函数表达是只能在声明之后调用

调用方式

函数的调用方式:

​ + 函数名+括号 fn()

​ + 通过事件调用函数

function haha(){

      			alert('大家好,我是通过事件调用的函数');

   		}

​ + 自调用 括号加匿名函数形式

(function(){

     			console.log(666);

   		})();
参数默认值
function fn(形参1,形参2){
	形参1 = 形参1||默认值
	形参2 = 形参2||默认值
	
	函数体
}
fn()

二、函数的定义阶段

  • 在内存当中开辟一块空间
  • 把这个空间的地址给到函数的名字
  • 把要执行的代码当成 字符串 放到函数里面(定义的时候不解析变量)

三、函数的优点

   	1、封装  封装代码,使代码更加简洁
    2、即时  想什么时候使用就什么时候使用
    3、复用  可以多次使用

四、函数的参数

  • 形参 在函数定义的时候书写的
  • 实参 在函数调用的时候书写的
  • 形参比实参多的时候 多出来的就是 undefined
  • 实参比形参多的时候 多的参数就没有变量接收

五、arguments

不需要任何操作就可以直接使用的东西 是实参的集合 是一个伪数组 有数组的下标和数组的length

console.log(arguments)
把所有的实参全部打印出来

console.log(arguments[i]) // arr[0] arr[1] arr[2]…

for(var i = 0 ; i < arguments.length ; i++)

arguments对象:

​ + 是function给咱们提供的,主要是保存了形参的内容

​ + 当形参过多的时候,直接使用arguments对象

​ + arguments.callee() 用于替代函数名称的

​ + arguments.length表示的是实参的个数

​ + arguments.callee.length表示的是形参的个数

判断实参个数和形参个数是否相等
function fn(a, b, c){

      console.log(arguments.length == arguments.callee.length);

    }

    fn(1, 2, 3);

六、返回值

return

  • 函数没有写 return 返回值就是 undefined
  • 写了 return 但是后面没有东西 返回值也是 undefined
  • 写了 return return后面的东西就是函数的返回值
    return 后面的代码不再执行
  • 注意:外界拿到的是return后面的数据,return数据==函数名()
  • 什么时候写 return 什么时候不写 return
    当你执行这个函数希望得到一个结果的时候 就要写 return
    如果这个函数的作用只是帮我实现某些功能 我不需要他给我一个结果 那就可以不写 return

七、onload

    window.onload = function(){
        // 当页面资源加载完毕以后浏览器调用
    }

八、预解析

浏览器在执行代码之前会把所有代码通读解释一遍 但是这个过程你看不到
会把所有 var 声明的 和 声明式函数 提前 同名是函数优先
var 声明的变量放到前面去不会赋值 声明式函数放到前面 会有值是一个函数的地址

    /* 
        预解析
        var num
    */
    console.log(num)    // undefined
    var num = 10
    console.log(num)   // 10

九、预解析的无节操性

  • if 条件判断 条件为 false 里面的代码不会执行但是会进行预解析
  • return 后面的代码不会执行但是会进行预解析

十、函数的执行阶段

  • 通过函数的名字找到这个函数
  • 形参赋值 (形参是只能在函数内部使用的变量)
  • 函数内部预解析
  • 函数内部代码执行
var a = b = c = 10;

      /*

        拆分:

        var a = 10;

        b = 10;

        c = 10;

      */
上一篇:JS函数、arguments、作用域


下一篇:javascript内置对象arguments详解