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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
javascript实现雪花飘落效果
Aug 19 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
PHP 事件机制(2)
2011/03/23 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
四个PHP非常实用的功能
2015/09/29 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
javascript新手语法小结
2008/06/15 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
运动会入场式解说词
2014/02/18 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书