详解JavaScript的函数和方法
原创详解JavaScript的函数和方法
原创
一、函数是什么？
由 function关键字、函数名称和一些语句组成的函数体称之为函数。在 JavaScript中，函数与其他对象一样具有属性和方法，区别是函数可以被调用。如果一个函数中没有使用return语句，则它默认返回 undefined。
二、定义函数的方式
1、函数声明
函数声明是定义一个具有指定参数的函数。
// 1、语法
function name([param[, param[, ... param]]]) { statements }
// 2、可以在函数声明之前调用函数，不会有语法问题
hoisted(); // "foo"
function hoisted() {
console.log("foo");
}2、函数表达式
// 语法
var myFunction = function name([param[, param[, ... param]]]) { statements }
// 匿名写法
var myFunction = function() {
// statements
}
// 命名写法
var myFunction = function namedFunction(){
// statements
}// 使用实例
var foo = function() {}
foo.name // "foo"
var foo2 = foo
foo2.name // "foo"
var bar = function baz() {}
bar.name // "baz"
console.log(foo === foo2); //true
console.log(typeof baz);// undefined
console.log(bar === baz); // false (errors because baz == undefined)// 在函数表达式之前调用函数，会有语法错误。
notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
console.log("bar");
};3、动态创建函数
// 法一：使用函数表达式创建
var myFunc;
if (num == 0){
myFunc = function(theObject) {
theObject.make = "Toyota"
}
}
// 法二：使用 Function 对象创建
var x = 10;
function createFunction1() {
var x = 20;
return new Function('return x;'); // 这里的 x 指向最上面全局作用域内的 x
}4、箭头函数 (=>)
箭头函数是用更简洁的方式来表示函数。更多内容，看这里！
// 语法一
([param] [, param]) => { statements }
// 语法二
param => expressionvar a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryllium"
];
// 普通函数
var a2 = a.map(function(s){ return s.length });
console.log(a2); // logs [ 8, 6, 7, 9 ]
// 箭头函数
var a3 = a.map( s => s.length );
console.log(a3); // logs [ 8, 6, 7, 9 ]5、生成器函数
用 function * 定义一个函数并返回一个 Generator 对象称之为 生成器函数。配合上 yield 关键字可以变成 异步函数。详情，看这里！
6、AsyncFunction
可以使用 AsyncFunction 对象，动态创建异步函数。AsyncFunction 并不是一个全局对象，需要通过Object.getPrototypeOf(async function(){}).constructor来生成。JavaScript 中每个异步函数都是 AsyncFunction 的对象。更多内容，看这里！
// 使用实例
function resolveAfter2Seconds(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
var a = new AsyncFunction('a',
'b',
'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
a(10, 20).then(v => {
console.log(v); // 4 秒后打印 30
});三、函数参数
1、默认参数
// 1、参数默认值为 undefined
function multiply(a, b) {
b = (typeof b !== 'undefined') ? b : 1;
return a*b;
}
multiply(5); // 5
// 2、使用默认参数重新上面函数
function multiply(a, b = 1) {
return a*b;
}
multiply(5); // 52、剩余参数
用 ... 来表示不确定数量的剩余参数。更多内容，看这里！
// 1、语法
function(a, b, ...theArgs) {
// ...
}
// 2、实例
function multiply(multiplier, ...theArgs) {
return theArgs.map(x => multiplier * x);
}
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]3、arguments
arguments 是一个数组对象，包含函数的实际参数。更多内容，看这里！
function myConcat(separator) {
var result = '';
var i;
for (i = 1; i < arguments.length; i++) {
result += arguments[i] + separator;
}
return result;
}
myConcat(", ", "red", "orange", "blue");
// 结果： red, orange, blue, 四、方法
当函数是一个对象的属性时，称之为方法。
1、方法定义
从ECMAScript 2015开始，采用了更简短的方式来定义方法。
var obj = {
foo: function() {
/* code */
}
};
// 用下面简写的方式代替上面
var obj = {
foo() {
/* code */
}
};2、生成器方法
// 用有属性名的语法定义方法（ES6之前）：
var obj2 = {
g: function*() {
var index = 0;
while(true)
yield index++;
}
};
// 同一个方法，简写语法：
var obj2 = {
* g() {
var index = 0;
while(true)
yield index++;
}
};
var it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 13、Async 方法
// 用有属性名的语法定义方法（ES6之前）：
var obj3 = {
f: async function () {
await some_promise;
}
};
// 同一个方法，简写语法：
var obj3 = {
async f() {
await some_promise;
}
};4、Async 生成器方法
var obj4 = {
f: async function* () {
yield 1;
yield 2;
yield 3;
}
};
// 同一个方法，简写语法：
var obj4 = {
async* f() {
yield 1;
yield 2;
yield 3;
}
};5、get 和 set
使用 get 和 set 关键字将属性与函数关联起来，可以对属性做一些复杂的自定义操作。使用方法，看这里！
五、其他特性
1、检测函数是否存在
typeof 操作符可以判断一个函数是否存在。
if ('function' === typeof window.noFunc) {
// use noFunc()
} else {
// do something else
}2、闭包
闭包（closure）就是通过嵌套函数的方式，缓存嵌套函数及其执行环境，等待下一次调用。当内部函数以某一种方式被任何一个外部函数作用域访问时，一个闭包就产生了。更多内容，看这里！
3、预定义函数
JavaScript语言有一些全局函数可用：eval()、isNaN()、parseInt()等。详细说明，看这里！
4、Function 对象
Function 对象 可以动态创建 函数，实际上每个函数都是一个 Function 对象。详细说明，看这里！
六、参考文档
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。