函数创建
- 声明式: 函数声明的关键字:function:也会在内存中开辟空间,用来存储变量值中的数据
- 注不要忘记写函数名 function foo(){}
- 语法:function函数名(条件){代码块}
- 函数定义的规范:函数名首字母小写
- 函数的命名规则与变量命名规则相同: 函数推荐驼峰命名 变量推荐下划线命名
- 函数内的代码只会在函数调用时执行
var foo = function(){
console.log("hello world");
赋值式可以没有函数名
引用类型
- 函数为一种引用类型,还有其他两种引用类型分别为数组、对象
- 两种数值相同的number做比较运算,其值为真
var foo = function(){
console.log("hello world");
赋值式可以没有函数名
- 而两个看似相同的函数做比较运算,其值为假。
var foo1 = function(){}
var foo2 = function(){}
console.log(foo1 === foo2); // false;
- 上述代码为引用类型比较,因地址存放的位置不同,其值为假
- 代码在运行时 , 都会被放进内存之中;内存在存储代码的时候分成两种形式 :
- 栈 FILO; 先进后出;基本类型存储的值大小固定
- 堆 FIFO; 先进先出;地址存储在栈中,通过地址指向堆中的值
函数的调用
函数调用的两种形式;
1.在代码之中调用;
函数名+() 调用运算符;
foo();
浏览器在特定时机帮你调用函数,又称事件调用。
调用过程:html标签进行触发 => 浏览器接受 => 浏览器调用函数;
例:在点击的时候会让浏览器调用对应的函数;
btn.onclick = foo btn元素 onclick 为事件 foo为函数
函数的参数
函数的参数分为实参和形参
function foo{
if( a === "制冷"){
console.log("嗖嗖嗖") }
if( a === "制热"){
console.log("轰轰轰")
}
}}
参数;
foo( "制冷" )
foo( "制热" )
上图中a为形参,“制冷” “制热”分别为该函数实参
- 通过上述可以看到,函数的实参是可以比形成多的,同时形参也是可以比实参多的所以大体分为两种情况:
实参比形参多 - 剩下的参数都使用arguments关键字进行接收, 使用 [] 进行取出
- 函数之中有一个关键字 : arguments 他可以 接受所有的实际参数;
- 那我们怎么把这些参数取出来用呢?
- 拓展:JS之中的取出运算符 两种方法=> . 英文输入法下
[] 里面可以放任何数据;
arguments[]使用第二种方法 - 于是便可以用 arguments[]取出对应的参数了
函数的返回值
- 关键字 : return => 函数体内使用
- 例:
function foo(){
return "hello world";
}
console.log(foo());
return的特性:
1.在函数之中,只要遇到了return关键字,表示函数执行结束,会立即跳出函数执行
2.无论有多少个return ,只会执行第一个return,因为后面的就不执行了。 因此函数有一个特点, 返回值只能有一个
3.return 可以返回任意数据类型都可以返回;
函数的封装
- 封装优化都是根据具体的需求来确立;
- 所谓封装就是吧不一样的东西提取出来当成参数;
- 例:
btn.onclick = function(){
setRandomColor(body);
setRandomColor(btn);
setRandomColor(box);
}
function setRandomColor( ele ){
// var r = parseInt(256 * Math.random()); //小于 255 254.xxxxxx
// var g = parseInt(256 * Math.random());
// var b = parseInt(256 * Math.random());
// // 随机颜色 ; => 字符串;
// var random_color = "rgb(" + r + "," + g + "," + b + ")";
// // 把随机颜色赋值给body元素;
// // 元素.style.cssText = 字符串;
// // 给元素的行内样式设置为 => 字符串;
// ele.style.cssText = "background-color : " + random_color;
// }
上述代码想实现不同区域的颜色随机改变,于是将函数设定形参,通过把不同区域设为实参,向函数传递,进而实现需求功能。
预解析
- 预解析是Javascript的机制,因为他是解释形语言,不需要编译。
- 预解析大体体现在两个方面;
1.检查你的代码有没有语法错误; 如果有语法错误,直接终止程序; 如果你的代码之中有语法错误,那么你的所有代码都不会执行
例:
alert("hello world");
// alert(a); // 报出引用错误;
// function (){
// }
2.声明提升; 把所有需要和内存交互的行为提前; 把所有的内存操作集中在一起提升代码效率;
例:
foo();// 类型错误; undefined;
// var foo = function(){
// console.log("hello world")
// }
// foo();
foo();
// var foo = function(){
// console.log("hello world");
// }
声明式的函数声明可以在任何位置调用
2.1 变量提升; 变量声明分成两个部分
2.1.1变量声明; 只有这个部分发生了提升;
2.1.2变量赋值; 只有变量声明部分发生了提升var=foo
例“
console.log(a);
var a = 10;会报错
变量提升;
var a,b;
// 在原位置,只保留赋值部分功能;
a = 10;
b = 20;
function foo(){
}
2.2 函数提升; 整体提升;
例:`
// foo();
// function foo(){
// }
console.log(foo);不会报错!
拓展;函数提升和变量提升两者谁的优先级更高;
1.undefined; => 函数先提升,变量声明后提升。
2. 函数; => 函数整体提升,变量部分提升。
3. .声明提升的优先级,局部提升优先提升, 然后整体提升。