函数

2019-08-11

函数的概念

函数是一段可以反复调用的代码块。

作用
在程序设计中，常将一些常用的功能模块编写成函数，以减少重复编写程序段的工作量。
提高代码的复用性、可读性等

函数的创建方式（函数的声明）

function 命令
function 命令声明的代码区块，就是一个函数。function 命令后面是函数名，函数名后面是一对圆括号。函数体放在大括号里面。
function 函数名称() {
函数中要执行的代码;
}

1
2
3

function print() {
  console.log(1);
}

上面的代码命名了一个 print 函数，以后使用 print()这种形式，就可以调用相应的代码。这叫做函数的声明

函数表达式
除了用 function 命令声明函数，还可以采用变量赋值的写法。

1
2
3

var print = function () {
  console.log(1);
};

这种写法将一个匿名函数（没有名字的函数）赋值给变量。这时，这个匿名函数又称函数表达式

函数的执行(调用)

函数定义好之后，函数中的代码在程序运行过程中不会执行；

1
2
3

function print() {
  console.log(1);
}

通过函数名称调用函数，调用时执行函数中的代码；调用函数时，要使用圆括号运算符
print();

事件的概念种类

事件：就是发生的事情
事件驱动：就是发生了某件事情之后要处理的手段和过程

鼠标事件
onclick 鼠标单击
ondbclick 鼠标双击
onmousedown 鼠标按键按下
onmouseup 鼠标按键抬起
onmousemove 鼠标在元素上移动
onmouseout 鼠标移出
onmouseenter 鼠标移入
键盘事件
onkeydown 键盘按键按下
onkeyup 键盘按键抬起
onkeypress 键盘按键按住
表单事件
onblur 失去焦点
onfocus 获取焦点
onchange 内容修改

参数的声明

函数名后面是一对圆括号，里面是传入函数的参数
function 函数名称(参数列表){
函数体中的代码;
}
函数定义的时候的参数，称为形参

function print(s) {
  console.log(s);
}
function add(a, b) {
  console.log(a + b);
}

参数的传递
print（1）；

调用函数的时候，传入了参数 1，1 的值给了形参 s。
函数调用时候传入的参数叫做实参

函数的返回值

JavaScript 引擎遇到 return 语句，就直接返回 return 后面的那个表达式的值,后面即使还有语句，也不会得到执行。
也就是说，return 语句所带的那个表达式，就是函数的返回值。

注、return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回 undefined。

function add(x, y) {
  return x + y; //返回x+y的和
}
var res = add(1, 1); //把函数的返回值 赋值给 变量res
console.log(res); //2

变量的声明提升

函数内部会产生“变量提升”现象。在函数内部使用 var 命令声明的变量，不管在什么位置，变量声明都会被提升到函数体的头部。

function foo(x) {
  if (x > 100) {
    var tmp = x - 100;
  }
}
// 等同于
function foo(x) {
  var tmp;
  if (x > 100) {
    tmp = x - 100;
  }
}

arguments

由于 JavaScript 允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是 arguments 对象的由来。
arguments 对象包含了函数运行时的所有参数，arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用。

var f = function (one) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
};
f(1, 2, 3);

通过 arguments 对象的 length 属性，可以判断函数调用时到底带几个参数

作用域

作用域（scope）指的是变量存在的范围。
局部作用域和全局作用域
在 ES5 的规范中，Javascript 只有两种作用域：
一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；
另一种是函数作用域，变量只在函数内部存在。

函数外部声明的变量就是全局变量（global variable）
在函数内部定义的(使用 var)变量，外部无法读取，顾称为“局部变量”（local variable）

var v = 1; //全局变量
function f() {
  var b = 2; //局部变量
  console.log(b);
  console.log(v); //它在函数内部可以读取全局变量，但是局部变量的不能再函数外部访问
}
f();

上面的代码表明，函数 f 内部可以读取全局变量 v。

函数内部定义的变量，会在该作用域内覆盖同名全局变量。（山高皇帝远，县官不如现管）

var v = 1;
function f() {
  var v = 2;
  console.log(v);
}
f(); // 2
v; // 1

上面代码中，变量 v 同时在函数的外部和内部有定义。结果，在函数内部定义，局部变量 v 覆盖了全局变量 v。

注意，对于 var 命令来说，局部变量只能在函数内部声明，在其他区块中声明，一律都是全局变量。

if (true) {
  var x = 5;
}
console.log(x); // 5

上面代码中，变量 x 在条件判断区块之中声明，结果就是一个全局变量，
可以在区块之外读取。

递归函数

函数可以调用自身，这就是递归。

简单来说，就是函数自己执行过程中，调用自己本身。

f（n）求前 n 项和

1
2
3

F(n)=F(n-1)+n = F(n-2)+n-1 +n= F(n-3)+n-2 + n-1 + n
......   F(1)+2+3+4.... n-1 + n
// F(100)= F(99)+100= F(98)+99+100 = F(1)+2+3+4.....+99+100

递归的步骤：

先找临界值，即无需计算就能获取的值
找本次和上一次的关系 f（n） = f(n-1)+n (数学归纳)
假设当前函数已经可以使用了，调用自身计算上一次的运行结果，再写出本次运行结果即可

//求1-n之间的和
//1 ........ 100
//  1-  1000
//1. 临界值1
//2. sum(n-1)+n = sum(n)
function sum1(n) {
  //临界值
  if (n == 1) {
    return 1;
  }
  return sum1(n - 1) + n;
}

构造函数及对象类型

面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

面向对象编程的第一步，就是要生成对象。对象是单个实物的抽象。通常需要一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成

JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。

构造函数就是一个普通的函数，但是有自己的特征和用法。

1
2
3

function Vehicle() {
  this.price = 1000;
}

上面代码中，Vehicle 就是构造函数。为了与普通函数区别，构造函数名字的第一个字母通常大写。
构造函数的特点有两个。
函数体内部使用了 this 关键字，代表了所要生成的对象实例。
生成对象的时候，必须使用 new 命令

new 命令的作用，就是执行构造函数，返回一个实例对象。

function Vehicle() {
  this.price = 1000;
}
var v = new Vehicle();
v.price; // 1000

上面代码通过 new 命令，让构造函数 Vehicle 生成一个实例对象，保存在变量 v 中。这个新生成的实例对象，从构造函数 Vehicle 得到了 price 属性。new 命令执行时，构造函数内部的 this，就代表了新生成的实例对象，this.price 表示实例对象有一个 price 属性，值是 1000。

本文作者：人模人样的搬砖老段
本文链接：函数
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/02/10