提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

详解JavaScript的函数和方法

JavaScript
2023-04-18 16:06:02 时间
一、函数是什么？

由 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 => expression
var 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); // 5
2、剩余参数

用 ... 来表示不确定数量的剩余参数。更多内容，看这里！

// 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); // 1
3、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 对象。详细说明，看这里！

六、参考文档

相关文章