javascript入门基础篇重点第四节-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34187029/article/details/52885582

数据类型之函数：函数按照名字可以分为两类：1.有名函数 2.匿名函数

有名函数function xxx(){

alert(1);

}

xxx();----->调用函数

匿名函数document.οnclick=function(){---------->document.onclick点击页面

alert(1);

};

函数声明式与函数表达式
函数声明式：
function 函数名(){代码.....};
函数表达式：
var 函数名 = function(){代码....};

其它的一些函数表达式如：
+function(){};
-function(){};
!function(){};
(function(){})();

例如：

函数声明式 function test(){

console.log("111111");

}

test();

函数表达式var test=function(){

console.log("111111111");

}

test();

两者主要区别在于：
函数声明式后面不能直接追加(),函数表达式可以，表示立马执行;

var test = function(){
console.log("函数表达式...");
}();

闭包

闭包避免全局变量命名冲突 ---》模块模式
(function(){})()
var a = 20;
(function(){
var a = 10;
})();
(function(){
var a = 30;
})();
alert(a);//20闭包里面设定的值不会影响到闭包外面的运算

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字，关键词" />
<meta name="Description" content="内容" />
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
</style>
</head>
<body>
<input type="text" id="num1"/>
<select id="op">
<option value="+">+</option>
<option value="-">-</$keywordIndex{6}>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="text" id="num2"/>
=
<input type="text" id="result" οnclick="clickme();">
<script>
//根据id获取元素
var num1 = document.getElementById("num1");
var option = document.getElementById("op");
var num2 = document.getElementById("num2");
var result = document.getElementById("result");
function clickme(){
var value1 = num1.value * 1;//获取第一个输入框的值将输入框的值*1是为了让结果表达式使用+号后会使+号前后
var value2 = num2.value * 1;//获取第二个输入框的值两个字符拼接上去所以在获得输入框值的时候*1将字符串变为

var op = option.value;//获取符号数字，使+号可以正常使用
//alert(value1+"==="+value2+"==="+op);
//alert(value1+value2);//"12"+"12"= "1212"
//eval函数进行计算
result.value = eval(value1 + op + value2);//"23*23"
}当要使获取到的运算符起作用时要使用eval包含起来var xxx=eval(xxx+运算符+xxx);

//eval
//var a = "1+2*3";
//alert(eval(a));
/*
var json = "{$keywordIndex{17}:'Kery',age:18}";
var j = eval("("+json+")");
alert(typeof j+"==="+j.name+"===="+j.age);
*/
</script>
</body>
</html>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

//函数参数
//函数的实际参数和形式参数
//实参：函数在调用（执行）的时候，实际传入的参数，只要是数据类型都可以传入
//行参：函数在定义的时候，在括号里面写的变量名称之为形参。
//不定参数：arguments 代表所有实参的集合，想当与类数组
//注意：实参与形参不需要一一对应，按照需求来做。
/*function test(a,b,c){a,b,c为形式参数
alert(a+"==="+b+"==="+c);
console.log("111111");
}
test(12,"Kery");12,"Kery"实际参数
*/

//不定参的讲解
/*function sum(){
//arguments ---> 类数组

arguments[x];因为arguments是类数组所以要添加[x]，选定某个数
//alert(arguments[arguments.length-1]);选定最后一个数
var sum = 0;
for(var i=0;i<arguments.length;i++){将所有数的和输出

sum += arguments[i]
}
alert(sum);
};*/
//sum(1,2,3,4,5,6,7,8,9,10);

//return的讲解函数默认返回undefined
//另外作用阻断后续代码 --> 断点排除错误

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

作用域的讲解
浏览器在读js代码的时候解析步骤：
第一步：先找 var function
第二步：再逐行执行代码

script是最大的作用域
注意：如果函数名称和var定义变量相同，var会被函数覆盖。
作用域链：
子作用域没有想要的内容的时候，会从父作用域中获取或修改父作用域的内容，反之不可。

例如

var x=10;

fn();

function fn(){

x=20; 此表达式没有用var来表示和设定.不知道x从何而来只能在父作用域中获取或修改父作用域的内容

}

alert(x);//20

其他经典作用域例题

//alert(x); 函数表达式解析式要从上至下
//var x = 10;
/*
1.定义：
var x;
2.执行：
alert(x);//undefined
x = 10;
*/

/*
a();
var a = function(){ 函数声明式则把a()放在函数主题上边下边都可以
console.log(111);
}*/

/*
定义：var a;
执行：a();//undefined();
*/

/*
alert(x);
alert(fn1);
alert(fn2);
var x = 10;
function fn1(){
}
var fn2 = function(){}

定义：
var x;function fn1(){};var fn2;
执行：
alert(x)//undefined
alert(fn1);//function fn1(){}
alert(fn2);//undefined
*/

/*
var x = 10;
fn();
function fn(){
var x = 20;
}
alert(x);

定义：var x;function fn(){var x = 20};
执行：
x = 10;
fn() ----> 1.定义：var x;
2.执行：x = 20;
alert(x);//10
*/

/*
var x = 20;
a();//执行
function a(){
alert(x);
var x = 10;
}
alert(x);

定义：var x;function a(){...}
执行: x = 20;
a(); ----> 1.定义：var x;
2.执行：alert(x);//undefined
alert(x);//20
*/

/*
a();
var a = function(){alert(1)};
a();
function a(){alert(2)};
a();
var a = function(){alert(3)};
a();

定义：function a(){alert(2)};
执行：
a();// 2;
a = function(){alert(1)};
a();//1
a();//1
a = function(){alert(3)}
a();//3
*/

/*
var a = 0;
function fn(){
alert(a);
var a = 1;
alert(a);
}
fn();

定义：var a;function fn(){...};
执行：a = 0;
fn() ---> 定义：var a;
执行：alert(a);//undefined
a = 1;
alert(a)//1

*/

/*
fn();
alert(a);
var a = 0;
alert(a);
function fn(){var a=1;}

/*
定义：var a; function fn(){};
执行：fn() ---> 定义：var a;
执行：a = 1;
alert(a);//undefined
a = 0;
alert(a)//0
*/

/*
fn()();
var a = 0;
function fn(){
alert(a);
var a = 3;
function c(){
alert(a);
}
return c;
}

定义：1.var a = 0; function fn(){...}
执行：fn() ---> 1.定义：var a=3;$keywordIndex{18} c(){...}
2.执行：alert(a);//undefined
a = 3;
return c;
c() ---> 1.定义：
2.执行：alert(a);//3
a = 0;
*/

/*
var a = 1;
function fn(){
var a;
alert(a);
a++;
alert(a);
}
fn();
alert(a);

定义：var a = 1;function fn(){};
执行：a = 1;
fn() ----> 定义：var a;
执行：alert(a);//undefined
a++;//undefined++?
alert(a);//NaN
alert(a) ---> a = 1

*/

/*
var a = 10;
alert(a);
a();
function a(){alert(2);}

定义：function a(){alert(2)}
执行：a = 10;
alert(a);//10
a();---->a是几？10()?

*/

/*
var a = 5;
function fn(){
var a = 10;
alert(a);
function b(){
a++;
alert(a);
}
return b;
}
var c = fn();
c();
fn()();
c();
/*
定义：
var a;function fn();var c

执行：
a = 5;
fn() -----> 定义：var a;$keywordIndex{28} b(){};
执行：a = 10;
alert(a);//10
return b;
c = function b(){};
c() -----> 定义：
执行：a++;//11
alert(a)//11
fn() ----> 定义：var a;$keywordIndex{31} b(){};
执行：a = 10;
alert(a);//10
return b;
b() -----> 定义：
执行：a++
alert(a);//11
c() -----> 定义：
执行：a++;//12
alert(a)//12
*/
*/