[记录] JavaScript 中的函数

Posted 2021-01-01

函数： 函数是一段可以反复调用的代码块。可以传递参数，不同的参数会返回不同的值。 函数声明的三种方法: 1. function 命令 function 命令声明的代码块，就是一个函数。 function 命令后面是函数名，函数名后面是一对圆括号(), 里面可以传入参数。函数体放在大括号里面。 function show(name) { // 代码块... console.log( name ); } 2. 函数表达式 除了用 function 命令声明函数， 还可以采用变量赋值的写法。 var show = function(name) { // 代码块... console.log( name ); }; 这种写法是将一个匿名函数赋值给变量。因为赋值语句的等号右侧只能放表达式，所有这个匿名函数称函数表达式。 带名的函数表达式，函数名在函数体内有效，在函数体外部无效。 var show = function abc() { // 代码块... // 命名函数表达式 // 每个函数都会有一个name的属性，这里的区别就在于 show.name 是 abc }; 注意： 函数作为表达式出现，则会忽略名称。函数表达式需要在语句结尾加上分号，表示语句结束。 3. Function 构造函数 Function 构造函数可以不使用new命令，返回结果完全一样。这种声明方式少人使用。 var show = new Function( "x", "y", "return x + y" ); // 等同于 function show(x, y) { return x + y; } Function 构造函数的最后一个参数会被当作函数体，如果只有一个参数，该参数就是函数体。 函数的重复声明： 同一个函数被多次声明，后面的声明会覆盖前面的声明。 function show() { console.log(‘A‘); } show(); // A function show() { console.log(‘B‘); } show(); 上面代码中，后声明show函数覆盖了之前的。在预编译环节，由于函数名的提升至最前，前一次声明在任何地方都是无效的。 函数名的提升： javascript 引擎将函数名视同变量名，所有采用 function 命令声明函数，都会被提升到代码头部。 // 先调用 show(); // 后声明，由于"变量提升", 所以代码可以正常执行 function show() { .. } 采用赋值语句定义函数，先调用，再声明就会报错。 show(); var show = function() {} // TypeError: show is not a function 等同以下形式 var show; show(); show = function() {}; 注意: 同时采用 function 命令 和 赋值语句 声明同一个函数，最后采用的总是赋值语句定义的。 var show = function() { console.log("A"); }; function show() { console.log("B"); } show(); // A 函数本身的作用域： 函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域。 函数的属性和方法： A. name 属性 函数的 name 属性返回函数的名字 function show() {} show.name; // show 变量赋值定义的函数，name 属性返回变量名。 var show = function () { // 匿名函数表达式 }; show.name; // show var show = function abc() { // 有名函数表达式 } show.name; // abc B. length 属性 (函数形参的个数) function show(a, b){ // a,b 是函数的形参 } show.length; // 2 C. toString() 方法： 返回一个字符串，内容是函数的源码; function show() { // 注释 hide(); } show.toString(); 结果： "function show() { // 注释 hide(); }" 在函数声明的时候定义的参数， 叫形式参数 - 形参； 在函数调用的时候传入的参数， 叫实际参数 - 实参； 参数： function test(a, b){ // 函数内部相当于声明了两个变量 // var a; // var b; // 函数内部有一个实参列表 arguments - [1,2,3] 是一个类数组 // 获取形参的长度 test.length; // 形参个数 和 实参列表arguments一一对应，如有一方修改则都改，例外：当实参小于形参时，修改形参变量，对应的arguments为undefined // return; // 1. 终止 (默认在逻辑的最后会有一个return); // 2. 函数返回值 return 123; } 参数特点： 不定参，形参比实参多，内部用到则默认为undefined。实参比形参多，则忽略； 函数调用方式： 1. 直接调用函数 (this指向window) function init(){ // 代码块... } init(); // window.init(); 2. 作为方法调用 (this指向当前对象) var myObject = { value: 100, init: function() { console.log( this.value ); } } myObject.init(); // 100 3. 构造函数，用new关键字来新建一个函数对象的调用； (this指向被绑定到的构造函数实例上) var init = function (status) { this.status = status; } init.prototype.getStatus = function () { return this.status; }; var test = new init(‘构造函数‘); console.log( test.getStatus() ); // 构造函数; this指向test