Javascript系列之（一）——函数上

学习Javascript的原因

想要学习前端，前期刚学过了HTML、CSS的知识，现在刚接触Javascript，目的是想要记录自己学习过程中的点滴，保存下更多的案例，供以后查找方便。欢迎各位大佬指正、交流经验。

今天从函数学起

函数——（上）

• 函数（功能） ：由一堆代码组成的，可以实现某个功能，被自己执行或被行为执行的代码段（一次实现，永久使用—）；
• 函数优势 ：忽略细节，重复使用，选择使用；
• 函数原则 ：封装；
• 注 ：函数其实也是变量；
• 创建函数 ：
  • 声明式： 函数的声明，声明关键字：function，如

    		// An highlighted block
    		function fn(){
    		}
    

  • 赋值式： - 函数名（），如fn()；

    //赋值式声明函数
    fn();
    

• 事件按照写法分类 ：
  • 写法一

    		 function fn1(){
    			console.log(“hello”);
    			}
    		document.onclick = fn1; //此时只有在被点击的时候才会被执行
    		//或者
    		document.onclikc = fn1(); //会立即执行，不用点击，且都会执行一次
    

  • 写法二

    	document.onclick = function(){
    		fn1:
    	}
    	/*因为外面又套了一层函数，外面一层函数不执行，
    	当点击事件触发时候才被执行。当外面函数执行的时候，
    	里面的函数fn1也会跟着被执行，可是fn1;没有加（），是不会被执行的，
    	所以只有给fn1加上（）才会被执行*/
    
    document.onclick = function(){ fn1(); }
    /*也就是说，涉及到函数的嵌套，内层函数fn1不会自动执行，
    只有当外层函数被事件触发而执行时，内层才会执行，所以需要加（） */
    

• 事件的分类

  • 鼠标
    点击（左键点击）onclick
    双击（左键点击）ondblclick
    右键点击 oncontextmenu
    按下 onmousedown
    抬起 onmouseup
    移动 onmousemove
    进入 onmouseover
    离开 onmouseout
  • 键盘
    按下 onkeydown
    抬起 onkeyup
    敲击（按下并抬起） onkeypress
  • 页面
    加载 onload
    改变大小 onresize
    滚动 onscroll
  • 表单
    获取焦点 onfocus
    失去焦点 onblur
    内容改变 onchange
    输入 oninput
    提交 onsubmit
    重置 onreset
• 注意 ：
  • 取决于行为怎么触发
  • 事件加给谁：比如 div 标签不能加键盘事件；表单等控件可以加键盘事件
• 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；

• 函数按写法分类：

  • 有名函数：有名字的函数，正常函数，正常使用，如声明书式创建的函数

    //声明式创建的函数
    function fn(){}
    

  • 无名函数
    • 非完整函数，不能存在与代码空间中，如

    	function(){
    		consloe.log("hello");
    	}
    	//会报错，意外的符号
    

  • 使用场景
  1. 作为赋值式创建函数的值

     	var fn = function(){}
     

  2. 被事件直接执行(事件处理函数)

     	document.onclick= function(){}
     

  3. 作为匿名函数的函数题存在
  4. 作为参数存在（回调函数）

     	function fn(a){};
     	fn(function(){
     		console.log("这个函数被a接收并执行")
     	})
     

  • 匿名函数

    	(function(){
    		console.log("hello");})
    	})
    	//最外层的括号，就把它变成了表达式，即本身就是一个函数
    	(function(){
    		console.log("hello");})
    	})()
    	/*执行这个函数，直接在后面加（）
    	这种函数立即执行，没法控制，类似于console.log("124");
    	*/
    

• 函数的参数（重头戏）：

含义：能够在函数执行的时候，向函数内部传递数据，函数内部接收到数据后，做 出一定的处理
例子：

   	//例1
   	function fn(a){
   		console.log(a);
   	}
   	fn(124);
 	//例2
 	function fn(a){
 		console.log(a)
 		}
 	fn("hello");

• 组成 ：两部分
  发：执行时，实参：实际的参数；实参发给了形参，实参相当于变量的值
  收：定义时，形参：形式的参数； 形参保存了实参，形参相当于变量名
• 个数 ：参数个数可以有多个
  1. 数量一致：位置一一对应
  2. 数量不一致：
     实参少，形参多，多出来的形参是undefined；
     实参多，形参少，多出来的实参 被派遣到神秘的区域 arguments中

		function fn(qwe){
			console.log(qwe);
			console.log(argements);
		}
		fn("hello","world",true,123,456,789,"hahaha");
		/*Arguments(7)[''hello", "world", true, 123, 456, 789, "hahaha", callee: f, Symbol(Symbol.iterator): f ]
		*/

• arguments

  • arguments 是函数中的用来保存所有实参的对象，这个对象时数组的形式，可以使用数组的基本形式去使用；数组：一组数据；数组的数据，按照定义时的顺序被编号，这个编号叫“索引”，从0开始

   	function fn(qwe){
   		console.log(qwe);
   		console.log(argements);
   	}
   	fn("hello","world",true,123,456,789,"hahaha");
   	/*Arguments(7)[''hello", "world", true, 123, 456, 789, "hahaha", callee: f, Symbol(Symbol.iterator): f ]*/
   	console.log(arguments[0]);
   	console.log(arguments[1]);
   	console.log(arguments[2]);
   	console.log(arguments[3]);
   	console.log(arguments[4]);
   	console.log(arguments[5]);
   	console.log(arguments[6]);
   	console.log(arguments[7]);   //这个其实是没有的
   	console.log(argument.length);
   	//拿第一个和最后一个数据
   	console.log(argument[0]);
   	console.log(argument[argument.length - 1]);
   	//配合for循环
   	for（var i=0; i<= argument.length; ++i）{ 
   		console.log(argument[i] + "<br>")
   	}

• 可以使用数组的索引的方式，配合数组的长度length，和循环遍历，操作arguments
• 参数可以发哪些数据：参数可以传递 任何数据

	function fn(){ 
		for(var i=0; i<arguments.length; ++i){ 
			console.log(arguments[i]);}  
		}

• 回调函数

回调函数：将一个函数传到另一个函数W中，作为参数的这个函数f，在函数W中被执行，叫回调函数

	function fn(a){
    	a(function(c){
       	 console.log("这个函数被参数b接收并执行了");
        c(function(){
            console.log("这个函数被参数d接收并执行了");
     	   });
   	 	});
 	 }
	  fn(function(b){
	      console.log("这个函数被参数a接收并执行了");
    	  b(function(d){
      	  console.log("这个函数被参数c接收并执行了");    
       	 d();
      	});
	  });
	}
	

• 好了，今天的分享到这里，之后我会将学过的内容以思维导图的形式贴上来，欢迎各位大佬分享一些技术经验、学习方法 or other something