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 相关文章推荐
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
使用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
使用php4加速网络传输
2006/10/09 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
php判断是否为json格式的方法
2014/03/04 PHP
php单链表实现代码分享
2016/07/04 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python错误处理详解
2014/09/28 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
python并发和异步编程实例
2018/11/15 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
英国在线药房:Express Chemist
2019/03/28 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
优秀员工自荐信范文
2013/10/05 职场文书
会计主管岗位职责范文
2013/11/08 职场文书
八年级物理教学反思
2014/01/19 职场文书
网络技术专业推荐信
2014/02/20 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
mysqldump进行数据备份详解
2022/07/15 MySQL