函数
-
函数：函数就是将具有独立功能的代码块，整合到一起并命名，需要的时候调用即可（当它被调用时可重复使用代码块）
-
作用：提高效率，提高代码重用率
1 函数的使用场景
-
作为事件处理函数
-
函数封装（代码复用）
-
对象的方法
//1.使用场景1：作为事件的处理函数 document.onclick = function(){ console.log("处理函数"); } //2.使用场景2：封装（代码复用） function change(){ oImg.src = "./img/"+n+".jpg"; oPs[0].innerText = n + "/4"; oPs[1].innerText = "动漫"+n; } //3.使用场景3：作为对象的方法 var obj = { "name":"小芳", "skill":function(){ console.log("敲代码"); } }
2 函数声明
-
普通函数声明方式
-
声明：function 函数名(){ 代码块 }
-
调用：函数名()
say(); //可以声明前调用 //1.声明：function 函数名(){ 代码块 } function say(){ console.log("你好啊，吃饭了吗？"); } //2.调用 函数名() say(); say(); say(); //多次重复使用
-
-
表达式函数声明方式
-
声明：var 变量 = function (){ 代码块 }
-
调用：变量名()
fun(); //报错，只能先声明后调用 //3.声明：var 变量 = function (){ 代码块 } var fun = function(){ console.log("我是一个表达式函数"); } //4.调用：变量名() fun(); fun();
-
3 函数参数
-
什么时候使用参数：函数中出现不确定的值，就可以使用参数，传递不同参数实现不同效果
-
参数
-
形参：形式参数，function 函数名(a){ a---->形参
-
实参：实际参数 函数名(10) 10---->实参
//1.参数 function sum(n){ //var n ---- 形参 var s = 0; for(var i = 1;i<=n;i++){ s += i; } console.log(s); } sum(100); //100 实参 调用函数的时候会将100赋值给n sum(50);
-
-
多个参数
//2.多个参数,多个参数之间用逗号隔开,实参和形参之间一一对应赋值 function add(a,b){ console.log(a+b); } add(10,100); //a = 10;b = 100 -
arguments
//3.如果参数个数确定不了的时候，不定义形参，使用arguments //声明一个函数，计算用户输入的所有值的和 function jia(){ //arguments函数内置对象，实参集合 console.log(arguments); //Arguments(3) console.log(arguments.length); //获取集合的长度 console.log(arguments[0]); //10 var s = 0; for(var i = 0;i<arguments.length;i++){ s += arguments[i]; } console.log(s); } jia(10,20,30); jia(10,20,30,40); -
参数类型
所有js数据类型都能做完参数的参数，null和undefined一般不会作为参数传递，没有意义
//1.字符串做参数 ： 声明一个函数，通过id获取元素 function getElement(id){ var elem = document.getElementById(id); console.log(elem); } getElement("box"); //单词和字母不加引号就会认为是变量 getElement("btn"); //单词和字母不加引号就会认为是变量 //2.函数做为参数 function two(){ console.log("我是第二步操作"); } function one(f){ //f = function two(){console.log("我是第二步操作");} console.log("我是第一步操作"); f(); //调用f --- >two } console.log(two); //function two(){console.log("我是第二步操作");} one(two);
4 作用域与预解析
作用域与作用域链
-
作用域：指变量或函数的有效使用范围
-
种类：全局作用域，局部作用域
-
全局变量/函数：在函数外声明的变量/函数,就叫全局变量/函数，可以在页面的任何地方被访问和修改，会一直存储在内存中
-
//1.全局变量/函数 var a = 10; function fun1(){ console.log(a); //10 a = 20; } fun1(); console.log(a); //20局部变量/函数：在函数内声明的变量/函数,就叫局部变量/函数，只能在函数内部使用，函数执行一结束，会被销毁
//2.局部变量/函数 function fun2(){ var c = 10; console.log(c); //10 } fun2(); //console.log(c); //c is not defined c是局部变量，只能在函数内部使用 //只有函数内声明的才是局部变量，其他的{}无效 if(1){ var d = 666; } console.log(d);
-
-
作用域链
js中的一种查找机制，先找自己作用域范围内，依次往父级作用域查找，一直找到全局，全局还是找不到报错is not defind
var x = 9; function outer(){ // var x = 99; function inner(){ // var x = 999 console.log(x); //9 } inner(); } outer();
预解析
浏览器的js解析器在执行js的时候会进行很多操作，至少有两步
-
1.预解析(变量提升)：找东西
-
找var，提前声明变量(只看=左的部分),只声明不赋值， 如果变量重名，只声明一次
-
找function,提前声明整个函数，如果重名会多次声明，后面的会覆盖前面的
-
-
2.逐行执行
-
预解析找var
//1.找var，提前声明变量(只看=左的部分),只声明不赋值， 如果变量重名，只声明一次 console.log(a); //undefined var a = 10; console.log(a); //10 -
预解析找function
//2.找function,提前声明整个函数，如果重名会多次声明，后面的会覆盖前面的 console.log(sum); //ƒ sum(){ console.log("函数2");} function sum() { console.log("函数1"); } function sum() { console.log("函数2"); } -
函数内部在代码执行之前也会进行预解析
function fun1() { console.log(a); //undefined var a = 10; console.log(a); //10 } fun1(); -
一些常见的面试题
//面试题1.表达式函数和普通函数的区别 //a1(); 会提前声明整个函数，可以提前调用 function a1() { console.log("我是一个表达式函数"); } //a2() 会提前声明变量，undefined，不能提前调用 var a2 = function () { console.log("我是一个表达式函数"); } //面试题2, 代码执行后结果是？(预解析，重名覆盖，所有的声明都在预解析就已经完成) console.log(c); //整个函数 cccc2 var c = 10; function c() { console.log("函数cccc1"); } console.log(c); //10 var c = 20; function c() { console.log("函数cccc2"); } console.log(c); //20 var c = 30; //c(); //c is not a function //面试题3：函数内部在代码执行之前也会进行预解析 function fun1() { console.log(a); //undefined var a = 10; console.log(a); //10 } fun1(); //面试题4：预解析，作用域 var x = 10; var y = 20; function fun2() { console.log(x, y); //undefined 20 var x = 10; } fun2(); //面试题5： 预解析只声明=号左边的 var m = 100; var n = 200; function fun3() { console.log(m, n); //undefined 200 var m = n = 10; //var m = n = } fun3(); console.log(n); //10 // 面试题6 function fun4(z) { //函数执行第一步 传参 console.log(z); //100 var z = 10; } fun4(100); //面试题7 function test(a, b) { console.log(a); //function a(){} console.log(b); //undefined var b = 234; console.log(b); //234 a = 123; console.log(a); //123 function a() { } var a; b = 234; var b = function () { }; console.log(a); //123 console.log(b); //function (){} } test(1)
5 函数返回值
-
函数简单使用
-
return函数返回值：将函数内部的内容输出到函数外部，并且结束函数执行
-
语法：return 值
function sum(n) { var s = 0; for (var i = 1; i <= n; i++) { s += i; } //返回值 return s; } var ss = sum(100); console.log(ss); //控制台打印5050 var sss = sum(50); document.write(sss); //页面显示5050 console.log(sum(70));
-
-
特性
-
一次只能返回一个
-
函数中只要遇到return函数就会结束，一般情况下，return都会在函数的末尾
//2.一次只能返回一个 function fun(a, b) { var c1 = a + b; var c2 = a * b; //return c1,c2; //40 return { "add": c1, "c": c2 } } var s = fun(10, 4); console.log(s); //{add: 14, c: 40} //3.函数中只要遇到return函数就会结束 function fun2(n) { var s = 0; for (var i = 1; i <= n; i++) { s += i; //0 + 1 = 1 return s;//返回值,结束函数 } } console.log(fun2(100)); //1
-
6 函数复用
代码复用：1.用循环不好写 2.结构一样，功能一致
执行步骤：
1.当他只有一个去实现，获取元素的时候必须通过父元素获取
2.将实现的代码放入函数中，将父元素作为参数传入
3.调用
7523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
