JS中创建函数的三种方式及区别


Posted in Javascript onMarch 13, 2016

1.函数声明

function sum1(n1,n2){
    return n1+n2;
  };

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

var sum2=function(n1,n2){
    return n1+n2;
};

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

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

(function(n1,n2){
    console.log (n1+n2)
})(1,3);//4

另外几种自执行函数:

//可用来传参
  (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.函数构造法,参数必须加引号

var sum3=new Function('n1','n2','return n1+n2');
console.log(sum3(2,3));//5

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

var name='haoxl';
  function fun(){
    var name='lili';
    return new Function('return name');//不能获取局部变量
  }
 console.log(fun()());//haoxl

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

Javascript 相关文章推荐
JS实现图片翻书效果示例代码
Sep 09 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
详解JS面向对象编程
Jan 24 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 #Javascript
Javascript数组Array方法解读
Mar 13 #Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 #Javascript
Javascript数组Array基础介绍
Mar 13 #Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 #Javascript
简单谈谈json跨域
Mar 13 #Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 #Javascript
You might like
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
深入探讨前端框架react
2015/12/09 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
用python读取xlsx文件
2020/12/17 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
社区工作者先进事迹
2014/01/18 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
单位接收函范文
2015/01/30 职场文书
2016猴年春节问候语
2015/11/11 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS