概念：函数是具有包裹性的最小的功能模块

作用：程序员：提高代码的复用性

​ 业务的角度：协同开发，便于维护

函数的定义：一个功能的创造

function 标识符（参数列表）//函数头部 {

函数体

}

function：告知编译器后面的标识符是一个函数名

标识符：代表函数名，必须满足标识符命名规则

函数的两种声明方式

1，利用函数关键字自定义函数（命名函数）

1
2
3
4
function fun() {

}
fun()

2，函数表达式（匿名函数）

1
2
3
4
5
var 变量名 = function(){ };
var fun = function() { 

};
fun();

a,函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数

b,函数表达式也可以进行传递

1
2
3
4
5
6
7
8
参数列表：无参
 function fun() {
        console.log("heihei");
    }
有参：每两个参数间用逗号隔开
    function add(a, b) {
        console.log(a + b);
    }

函数的调用：功能模块的使用

调用的语法：

1
2
3
4
5
6
无参：函数名();
function fun() {
     console.log("yangzhe");
}

fun();
1
2
3
4
5
6
7
8
有参：函数名(参数1...参数n);    
function max(a, b) {        
   var c = a > b ? a : b;        
   console.log(c);    
}

max(1, 2);    
max(3, 5);

在定义函数时，函数名后面括号中的变量称为形式参数（简称形参）

再调用一个函数时，函数后面括号中的参数称为“实际参数”（简称实参）

传参方式：

1.内置类型传递：

值传递，数值的传递，单向传递，只能将实参的值传递给形参，反之不行

传参的注意事项：形参和实参是不同的内存单元，形参只有函数被调用时才会开辟空间，再调用结束后空间销毁

2.引用类型传递：

双向传递，可以通过形参改变实参的数值

return的作用1：

函数的返回值: 如果我们希望函数在调用完后， 可以得到一个数值， 这个只就是函数的返回值

返回值通过return 关键字带回

函数有return才有返回值的概念,没有return就没有返回值

1
2
3
4
5
6
7
8
function max(a, b) {
    var c;
    c = a > b ? a : b;
    return c;
}

var x = max(1, 22);
console.log(x);

return的作用2：

只要函数遇到return，就把后面的结果返回给函数的调用者 函数名() = return后面的结果

遇到return返回数据且跳出函数

【注意】：封装时考虑该函数是否需要参数和返回值。

函数设计的思想: 强调用户无法操作函数体，只能调用函数

​ 1.函数的功能

​ 2.该函数是否需要参数

​ 3.该函数是否需要返回值

事件与函数之间的关系：

onclick = 函数对象

至于必须写成 onclick=函数名，是语法缺陷，不要理解为是函数调用

事件：用户的某种行为操作，鼠标事件，键盘事件

事件的本质其实就是函数调用

事件与函数进行绑定

a,通过HTML元素进行绑定

1
2
3
4
5
6
7
function fun() {
     console.log("hahaha");
}

var fun1 = function() {
console.log("heiheihei");
}

b,通过js的方式绑定事件

将HTML元素转换成JS对象形式，给HTML标签起一个id名

1，查找到页面的那个元素

var oBtn = document.getElementById(“btn”); 先存储到oBtn变量中，

2，通过js的方式添加事件

JS对象操作属性的方式：js对象.属性

1
2
3
4
5
6
oBtn.onclick = function() {
     console.log("xixi");
}
oBtn.ondblclick = function() {
     console.log("haha");
}

普通函数与构造函数的区别：

1.返回值类型的区别：

构造函数没有返回值

普通函数有返回值

2.函数名的区别：

构造函数的函数名必须与类名一致，习惯首字母大写

普通函数的函数名只要符合标识符命名规则即可

3.调用方式的区别：

构造函数实在创建对象的时候由new关键字调用

普通函数是由我们使用对象调用的，一个对象可以调用多次普通函数

4.作用上的区别：

构造函数用于初始化一个对象

普通函数用于描述一类事物的公共行为

声明提升

变量提升：未被声明的变量 ，编译器会在首次进行变量定义且赋值为undefined

变量提升是当栈内存作用域形成时，js代码执行前，浏览器会将带有var,function关键字的变量提前进行声明declare(值默认就是 undefined)，定义 defined(就是赋值操作)，这种预先处理的机制就叫做变量提升机制也叫预定义

变量声明提升：只有var声明的变量才有声明提升，let,const没有;变量赋值无提升

函数声明提升：即将函数声明提升（整体）到作用域顶部（不包括函数表达式）

函数提升的优先级高于变量提升；

变量的作用域：变量能够使用的作用域

全局变量：没有被任何括号括起来的变量，作用域为整个文件

注意事项：

1，生命周期长，和页面生命周期一样

2，建议函数体内少使用全局变量，会降低函数的独立性

1
2
3
4
5
6
7
var a = 123;
function fun() {
   console.log(a);
   a = 666;
}
fun();
console.log(a);

局部变量：被任何括号括起来的变量，作用域为函数体内

1
2
3
4
function fun(a) {
   var b = 123;
}
console.log(b); //错误

函数嵌套定义：

子函数可以使用父函数的局部变量，反之父函数却不能使用子函数的局部变量

1
2
3
4
5
6
7
8
9
10
function f1(a) {
    var b = 2;
   var f2 = function(c) {
      var d = 4;
      console.log(a, b, c, d);
     }
    f2(3);
  // console.log(d); //报错
}
f1(1);

严格模式：

“user strict”;

在该作用域下的所有变量必须定义才能使用

1
2
var a;
a = 123;

回调函数：一个被当作函数参数的函数

1
2
3
4
5
6
7
8
9
10
11
function f1(f) {  第三方函数,无法操作函数体的
console.log("f1");
    f2();无法操作函数体直接调用f2
f();  f==f2 --->  f()==f2()
}

function f2() {  自定义函数
console.log("f2");
}

f1(f2);