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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
简单实现js页面切换功能
Jan 10 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
vue-cli中实现响应式布局的方法
Mar 02 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
php查询相似度最高的字符串的方法
2015/03/12 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python如何读取bin文件并下发串口
2019/07/05 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
python多进程并发demo实例解析
2019/12/13 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
python中time.ctime()实例用法
2021/02/03 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
Delphi CS笔试题
2014/01/04 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
秘书英文求职信范文
2014/01/31 职场文书
租房协议书范本
2014/04/09 职场文书
出国留学担保书
2014/05/20 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书