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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
解析PHP的session过期设置
2013/06/29 PHP
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
python异步任务队列示例
2014/04/01 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
pymysql模块使用简介与示例
2020/11/17 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
高中运动会广播稿
2014/09/16 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
检讨书怎么写
2015/05/07 职场文书
盗窃案辩护词
2015/05/21 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript