day05 函数
目录
1.回顾
-
for-in作用：用于循环对象
语法：for（var 变量 in 需要循环的对象）{}
-
this
-
概念：当前调用函数的对象，所处环境不同，代表的值不一样，取决于函数被调用时所处的环境
-
在事件处理函数中，this指向触发事件的对象【点谁是谁】
-
//1.点击li，打印被点击li的内容
var oLi = document.getElementsByTagName("li");
//2.循环添加点击事件
for(var i = 0;i<oLi.length;i++){
oLi[i].onclick = function(){
//打印被点击li的内容
console.log(oLi[i]); //没有在通过循环变量i，获取到对应被点击的标签
console.log(this);//触发事件的对象 点谁就是谁
}
}
-
自定义属性
-
开关
//3.开关（多个） var oDiv = document.getElementsByTagName("div"); for(var i =0;i<oDiv.length;i++){ oDiv[i].tag = true; oDiv[i].onclick = function(){ if(this.tag == true){ this.style.height = "100px"; this.tag = false; }else{ this.style.height = "40px"; this.tag = true; } } } -
选项卡(需要下标，但是又获取不到)
//1.获取元素 var oBtns = document.getElementsByTagName("button") var oDivs = document.getElementsByTagName("div"); //2.点击button for(var i= 0;i<oBtns.length;i++){ oBtns[i].index = i; oBtns[i].onclick = function(){ //4.全部清空 for(var j = 0;j<oDivs.length;j++){ oDivs[j].style.display = "none"; } //3.显示div（对应的） oDivs[this.index].style.display = "block"; } }
-
2.函数
函数的概念：函数是由事件驱动的或当他被调用时可重复使用的代码块
使用场景：
-
作为事件处理函数 标签.事件 = function(){}
-
函数封装
-
代码复用
2.1函数的声明和使用
-
普通声明方式
-
声明：function 函数名(){代码块}
-
调用：函数名（）
-
-
表达式声明
-
声明：var 变量 = function （）{ 代码块}
-
调用：变量名()
//1.普通函数声明方式 function study(){ console.log("沉迷学习，日渐消瘦"); } //函数没有调用不会执行 console.log(study); //d打印函数 study(); study(); study(); //可重复使用代码块 //2.表达式声明 var s = function (){ console.log("沉迷游戏，无法自拔"); } s(); -
2.2 函数参数
2.2.1 参数
如果函数中出现不确定的值，就可以作为参数
形参(形式参数)： function 函数名(参数1,参数2)
实参(实际参数)： 函数名(10)
//单个参数
function sum(n){//var n;
var s = 0;
for(var i = 1;i<=n;i++){
s += i;
}
console.log(s);
}
//调用
sum(100);
sum(200);
//多个参数,多个参数之间用,隔开
//声明一个函数，计算两个数和
function add(a,b){
console.log(a+b);
}
add(10,20); //30
//声明一个函数，计算所有用户输入的和
//arguments:实参集合，如果参数个数确定不了，就不写形参，直接使用arguments
function s(){
console.log(arguments,arguments.length); //实参集合
console.log(arguments[0]); //10
var sum = 0;
for(var i = 0;i<arguments.length;i++){
sum += arguments[i];
}
console.log(sum);
}
s(10,20);
s(10,20,30);
s(10,20,30,40);
2.2.2 参数类型
所有的js数据类型都能作为函数参数
//1.函数做为参数
function sayhello(){
console.log("你好呀，你吃饭了吗？");
}
function see(f){//var f = function sayhello(){console.log("你好呀，你吃饭了吗？");}
f();
}
see(sayhello);
2.3 函数注意点
//形参个数与实参个数不一致的时候，一一对应，没有被赋值的就是undefined，多了的不管
function sum(a,b){//var a,b;
console.log(a+b);
}
sum(10); //NaN 实参给形参赋值的时候是一一对应 a=10,b=undefined : NaN
sum(10,20);//30 a = 10,b=20
sum(10,20,30);//30 a = 10,b=20
//同名会覆盖（函数和函数，函数和变量），后面会覆盖前面
function add(x,y){
console.log(x+y);
}
function add(x,y){
console.log(x*y);
}
// var add = 10;
// console.log(add);
add(10,20); //200 add is not a function
//arguments和形参是一个东西，一改全改
function fun(a){
arguments[0] = 100;
console.log(a); //100
a = 200;
console.log(arguments[0]);
}
fun(10);
//普通函数中this的指向----window
function fu(){
console.log(this);
}
fu();
2.4 作用域和预解析
2.4.1 作用域
作用域：变量或函数的有效使用范围（全局作用和局部作用域）
-
全局变量/函数
全局变量/函数： 在函数外声明的变量/函数，叫全局变量/函数，可以在当前页面内任意地方使用和修改，会一直存储在内存，知道页面关闭
//全局变量 var x = 10; console.log(x); //10; x = 30; console.log(x); //30 function fun(){ console.log(x);//30 x = 100; } fun(); console.log(x); //100 -
局部变量/函数
在函数内声明的变量/函数，叫局部变量/函数，只能在函数内部使用，出了函数的{}就销毁了
//局部变量 function fun2(m){//var m; var y = 1; console.log(y); } fun2(10); //console.log(y);// y is not defined 没有声明变量y //console.log(m); -
作用域链：
js中的一种查找机制，先查找自己作用域范围内是否存在，有就使用自己的，没有就往上一级作用域查找，依次往上查找，一直找到全局，全局没有报错，is not defined
var n = 10; function fun3(){ var n = 40; function inner(){ // var n = 100; console.log(n); } inner(); } fun3();
2.4.2预解析
浏览器在解析js的过程中，至少有两步，预解析，逐行执行
-
预解析：找一些东西，找var function，把var 和function的声明提到最前面， 所有作用域代码在执行之前都会进行预解析
-
找var：提前声明一下变量，存储在内存中，如果变量同名声明一次
-
function:提前声明函数，存储在内存中，如果同名会多次声明
-
-
逐行执行：声明已经提到了最前面，逐行执行的时候将不会再声明
//找var console.log(a);//undefined var a = 10; console.log(a);//10 var a = 20; console.log(a);//20
//找function console.log(sum); //函数2 function sum(){ console.log("函数1"); } console.log(sum); //函数2 function sum(){ console.log("函数2"); } console.log(sum);//函数2 -
普通函数声明方式和表达式声明方式的区别？
add(); //和 function add(){ console.log("和"); } // addd(); 预解析的时候，变量只声明，不赋值，undefined var addd = function(){ console.log("addd"); } -
笔试题
console.log(c);//函数2 var c = 10; function c(){ console.log("函数1"); } console.log(c); //10 var c = 20; function c(){ console.log("函数2"); } console.log(c); //20 //c(); //c is not a function //局部作用域预解析 function sum(){ console.log(a);//undefined var a = 10; } sum(); var x = 10; function fun1(){ console.log(x); //undefined var x = 20; } fun1(); function fun2(a){//var a,函数执行的第一步，就是给参数赋值 a =100 console.log(a);//100 var a = 20; console.log(a);//20 } fun2(100);
2.5 函数返回值
2.5.1 return
需要用到函数内部的变量或者是函数的时候需要使用return 进行数据返回
函数返回值：return 可以将函数内部的变量或函数返回到函数外面去使用
语法：return 需要返回的内容
特点：return 一次只能返回一个，写多个最后只会返回最后一个
函数中只要遇到return函数就结束了
//return 一次只能返回一个，写多个最后只会返回最后一个
function sum(a,b){
var c1 = a+b;
var c2 = a*b;
var c3 = a/b;
return [c1,c2,c3];
}
//函数调用表达式的结果就是函数的返回值
var s = sum(10,20);
console.log(s);
//函数中只要遇到return函数就结束了
function ss(){
return 1; //函数中只要遇到return函数就结束，后面的代码不会执行
console.log("js难吗？");
}
ss();
function add(){
s = 0;
for(var i = 1;i<=100;i++){
s += i; //s+=1
return s;//函数中只要遇到return函数就结束
}
}
var a = add();
console.log(a);//1
2.5.2 获取元素样式
//1.只能获取行间样式
var w = oDiv.style.width;
//console.log(w);
//2.获取非行间样式
//标准浏览器：getComputedStyle(标签).属性名 ie8-不兼容
var w1 = getComputedStyle(oDiv).width;
console.log(w1); //200px
//IE浏览器：标签.currentStyle.属性名
var w1 = oDiv.currentStyle.width;
console.log(w1);
//3.兼容,拿其中一个方法作为判断条件 xx.xx, 如果是直接调用的就使用window.xx
//alert(window.getComputedStyle);
//alert(oDiv.currentStyle)
if(oDiv.currentStyle){
var w1 = oDiv.currentStyle.width;
}else{
var w1 = getComputedStyle(oDiv).width;
}
console.log(w1);
封装
function getStyle(elem,attr) {//标签：elem 属性：attribute
if (window.getComputedStyle) {
//标准
var w = getComputedStyle(elem)[attr];
} else {
//ie
var w = elem.currentStyle[attr];
}
return w;
}
扫一扫
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
