JS 中的函数表达式和函数声明你混淆了吗?

更新日期: 2021-06-29阅读: 1.8k标签: 混淆

在 JavaScript 中,function关键字可以完成一个简单的工作:创建一个函数。 但是,使用关键字定义函数的方式可以创建具有不同属性的函数。

在本文中,我们来看一下,如何使用function关键字来定义函数声明和函数表达式,以及这两种函数之间的区别又是什么。


1.函数表达式vs函数声明

函数声明和函数表达式是使用 function 关键字创建函数的2种方法。

举个例子来说明差异,我们创建两个版本的 sums 函数:

function sumA(a, b) {
  return a + b;
}

(function sumB(a, b) {
  return a + b;
});

sumA(1, 2); // ???
sumB(1, 2); // ???

一般情况,像往常一样定义函数(sumA函数)。在另一种情况下,函数被放置在一对括号中(sumB函数)。

如果调用 sumA(1,2) 和 sumB(1,2) 会发生什么?

如预期的那样,sumA(1, 2) 返回 3。但是,调用sumB(1, 2)会引发异常:Uncaught ReferenceError: sumB is not defined。

其原因是sumA是使用函数声明创建的,该函数声明在当前作用域中创建一个函数变量(具有与函数名称相同的名称)。 但是sumB是使用函数表达式创建的(将其包装在括号中),该函数表达式不会在当前作用域内创建函数变量。

如果你想访问使用函数表达式创建的函数,那么将函数对象保存到一个变量中:

// Works!
const sum = (function sumB(a, b) {
  return a + b;
});

sum(1, 2); // => 3
如果语句以`function`关键字开头,则为函数声明,否则为函数表达式。
// 函数声明:以`function`关键字开头
function sumA(a, b) {
  return a + b;
}

// 函数表达式:不以`function`关键字开头
const mySum = (function sumB(a, b) {
  return a + b;
});

// 函数表达式:不以`function`关键字开头
[1, 2, 3].reduce(function sum3(acc, number) { 
  return acc + number 
});

从更高的角度来看,函数声明对于创建独立函数很有用,但是函数表达式可以用作回调。

现在,我们更深入地研究函数声明和函数表达式的行为。


2.函数声明

在前面的示例中已经看到的,sumA是一个函数声明:

// Function declaration
function sumA(a, b) {
  return a + b;
}

sumA(4, 5); // => 9

当一个语句包含function关键字,后跟函数名称,一对带参数的括号(param1, param2, paramN)以及包围在一对花括号{}中的函数主体时,就会发生函数声明。

函数声明会创建一个函数变量:一个与函数名称同名的变量(例如,上一个示例中的sumA)。 在当前作用域中(在函数声明之前和之后),甚至在函数作用域本身内,都可以访问该函数变量。

函数变量通常用于调用函数或将函数对象传递给其他函数(传递给高阶函数)。

例如,编写一个函数 sumArray(array),以递归方式累加一个数组的项(该数组可以包含数字或其他数组):

sumArray([10, [1, [5]]]); // => 16

function sumArray(array) {
  let sum = 0;
  for (const item of array) {
    sum += Array.isArray(item) ? sumArray(item) : item;
  }
  return sum;
}

sumArray([1, [4, 6]]); // => 11

function sumArray(array) { ... } 是函数声明。

包含函数对象的函数变量sumArray在当前作用域中可用:sumArray([10, [1, [5]]])之前和sumArray([1, [4, 6]])之后,函数声明, 以及函数本身的作用域sumArray([1, [4, 6]])(允许递归调用)。

由于提升,函数变量在函数声明之前可用。

2.1 函数声明的注意事项

函数声明语法的作用是创建独立函数。 函数声明应在全局作用域内,或直接在其他函数的作用域内:

// Good!
function myFunc1(param1, param2) {
  return param1 + param2;
}

function bigFunction(param) {
  // Good!
  function myFunc2(param1, param2) {
    return param1 + param2;
  }

  const result = myFunc2(1, 3);
  return result + param;
}

基于相同的原因,不建议在条件(if)和循环(while,for)中使用函数声明:

// Bad!
if (myCondition) {
  function myFunction(a, b) {
    return a * b;
  }
} else {
  function myFunction(a, b) {
    return a + b;
  }
}

myFunction(2, 3);

使用函数表达式更好地执行有条件地创建函数。


3.函数表达式

当function关键字在表达式内部创建函数(带有或不带有名称)时,将出现函数表达式。

以下是使用表达式创建的函数的示例:

// Function expressions

const sum = (function sumB(a, b) {
  return a + b;
});

const myObject = {
  myMethod: function() {
    return 42;
  }
};

const numbers = [4, 1, 6];
numbers.forEach(function callback(number) {
  console.log(number);
  // logs 4
  // logs 1
  // logs 1
});

在函数表达式中创建了两种函数:

如果表达式中的函数没有名称,例如 function(){return 42},那是一个匿名函数表达式
如果函数具有名称,例如 上一个示例中的sumB和回调,那么这是一个命名函数表达式

3.1 函数表达式的注意事项

函数表达式适合作为条件创建的回调或函数:

// Functions created conditionally
let callback;
if (true) {
  callback = function() { return 42 };
} else {
  callback = function() { return 3.14 };
}

// Functions used as callbacks
[1, 2, 3].map(function increment(number) {
  return number + 1;
}); // => [2, 3, 4]

如果已创建命名函数表达式,请注意,该函数变量仅在创建的函数作用域内可用:

const numbers = [4];
numbers.forEach(function callback(number) {
  console.log(callback); // logs function() { ... }
});

console.log(callback); // ReferenceError: callback is not defined

callback是一个命名的函数表达式,因此callback函数变量仅在callback()函数使用域可用,而在外部则不可用。

但是,如果将函数对象存储到常规变量中,则可以在函数作用域内外从该变量访问函数对象:

const callback = function(number) {
  console.log(callback); // logs function() { ... }
};

const numbers = [4];
numbers.forEach(callback);
console.log(callback); // logs function() { ... }


4. 总结

根据使用function关键字创建函数的方式,可以通过两种方法来创建函数:函数声明和函数表达式。

留个问题: function sum(a, b) { return a + b } + 1 是函数声明还是函数表达式,可以在留言中说出你的答案。

原文:https://dmitripavlutin.com


链接: https://www.fly63.com/article/detial/10481

js混淆加密,通过混淆Js代码让别人(很难)无法还原

使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对于一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密,或者混淆js来达到代码保护。

js 变量声明易混淆的几点知识

JavaScript 学习过程中遇到的一些容易混淆的地方:变量提升、函数的作用域内赋值、函数内 形参、变量、函数 同名的问题...

JavaScript中易混淆的DOM属性及方法对比

ParentNode.children:该属性继承自ParentNode,返回值是一个HTMLCollection实例,成员是当前节点的所有元素子节点,该属性只读,且该属性是动态集合。Node.prototype.childNodes:该属性继承自Node,返回值是一个NodeList实例,成员是当前节点的所有子节点(包括但不限于元素子节点),该属性也是个动态集合。

Javascript混淆与解混淆的那些事儿

像软件加密与解密一样,javascript的混淆与解混淆同属于同一个范畴。道高一尺,魔高一丈。没有永恒的黑,也没有永恒的白。一切都是资本市场驱动行为,现在都流行你能为人解决什么问题,这个概念。

Js混淆安全加固

在安全攻防战场中,前端代码都是公开的,那么对前端进行加密有意义吗?可能大部分人的回答是,毫无意义,不要自创加密算法,直接用HTTPS吧。但事实上,即使不了解密码学,也应知道是有意义的,因为加密前和解密后的环节

vue项目配置 webpack-obfuscator 进行代码加密混淆

公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!