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陷阱题
Feb 07 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
vue登录注册实例详解
Sep 14 Javascript
javascript canvas API内容整理
Feb 16 Javascript
JS函数本身的作用域实例分析
Mar 16 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将向Java靠拢
2006/10/09 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
php实现两个数组相加的方法
2015/02/17 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
围观tangram js库
2010/12/28 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
判断网页编码的方法python版
2016/08/12 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Python hmac模块使用实例解析
2019/12/24 Python
如何利用python读取micaps文件详解
2020/10/18 Python
大学同学聚会邀请函
2014/01/19 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
商家认证委托书格式
2014/10/16 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2014年采购员工作总结
2014/11/18 职场文书
入团介绍人意见范文
2015/06/04 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
python析构函数用法及注意事项
2021/06/22 Python
tomcat下部署jenkins的方法
2022/05/06 Servers