JavaScript创建函数的三种方式

简介:

1.函数声明

1

2

3

function sum1(n1,n2){

    return n1+n2;

  };

2.函数表达式,又叫函数字面量


1

2

3

var sum2=function(n1,n2){

    return n1+n2;

};

两者的区别:解析器会先读取函数声明,并使其在执行任何代码之前可以访问;而函数表达式则必须等到解析器执行到它所在的代码行才会真正被解释执行。

自执行函数严格来说也叫函数表达式,它主要用于创建一个新的作用域,在此作用域内声明的变量,不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行。

1

2

3

(function(n1,n2){

    console.log (n1+n2)

})(1,3);//4

另外几种自执行函数:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

//可用来传参

(function(x,y){

  console.log(x+y);

})(2,3);

//带返回值

var sum=(function(x,y){

  return x+y;

})(2,3);

console.log(sum);

~function(){

  var name='~'

  console.log(name);

}();

!function(){

  var name='!'

  console.log(name);

}();

;(function(){

  var name=';'

  console.log(name);

})();

-function(){

  var name='-'

  console.log(name);

}();

//逗号运算符

1,function(){

  var name=',';

  console.log(name);

}();

//异或

1^function(){

  var name='^';

  console.log(name);

}();

//比较运算符

1>function(){

  var name='>';

  console.log(name);

}();

~+-!(function(){

  var name='~+-!';

  console.log(name);

})();

~!(function(){

  var name='~!';

  console.log(name);

})();

(function(){

  var name='call';

  console.log(name);

}).call();

(function(){

  var name='apply';

  console.log(name);

}).apply();

3.函数构造法,参数必须加引号

1

2

var sum3=new Function('n1','n2','return n1+n2');

console.log(sum3(2,3));//5

从技术角度讲,这是一个函数表达式。一般不推荐用这种方法定义函数,因为这种语法会导致解析两次代码(第一次是解析常规ECMAScript代码,第二次是解析传入构造函数中的字符串),从而影响性能。

1

2

3

4

5

6

var name='haoxl';

  function fun(){

    var name='lili';

    return new Function('return name');//不能获取局部变量

  }

 console.log(fun()());//haoxl

 Function()构造函数每次执行时都会解析函数主体,并创建一个新的函数对象,所以当在一个循环或频繁执行的函数中调用Function()构造函数效率是非常低的。而函数字面量却不是每次遇到都会重新编译的,用Function()构造函数创建一个函数时并不遵循典型的作用域,它一直把它当作是顶级函数来执行。

内容转载至:http://www.jb51.net/article/80861.htm

相关文章
|
23天前
|
JavaScript
|
1月前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
1月前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
11 0
|
1月前
|
JavaScript
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
10 0
|
1天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
3天前
|
JavaScript 前端开发
<body> 中的JavaScript函数
【5月更文挑战第1天】<body> 中的JavaScript函数。
8 3
|
3天前
|
JavaScript 前端开发
<head> 中的JavaScript 函数
【5月更文挑战第1天】<head> 中的JavaScript 函数。
8 2
|
4天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
4天前
|
JSON JavaScript 前端开发
深入探讨javascript的流程控制与分支结构,以及js的函数
深入探讨javascript的流程控制与分支结构,以及js的函数
|
4天前
|
JavaScript 前端开发 容器