javaScript的函数(Function)对象的声明(@包括函数声明和函数表达式)
写作缘由:
平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到 var fn = function () {} 这种函数的创建,究竟他们用起来有什么区别呢,今天就本着打破砂锅问到底的精神,好好来说说这个让人神魂颠倒的--函数声明。
函数声明
函数声明示例代码
function fn () {
console.log('fn 函数执行..');
// code..
}
这样我们就声明了一个名称为fn的函数,这里出个思考,你认为在这个函数的上面来调用他的话会执行吗?还是会报错?
fn(); // 在之前调用我们声明的fn函数 function fn () {
console.log('fn 函数执行..');
// code..
}
控制台输出结果:
是的,此时fn函数是可以被调用到的,这里来总结下原因。
总结:
1:此时fn函数是变量的结果,默认存储在全局上下文的变量中(可用 window.函数名 来验证)
2:此方式为函数声明,在进入全局上下文阶段创建,代码执行阶段,它们已经可用。ps:javaScript在每次进入方法时都会先初始化上下文环境(由全局 → 局部)
3:它可以影响变量对象(仅影响存储在上下文中的变量)
函数表达式
函数表达式示例代码
var fn = function () {
console.log('fn 函数【表达式】声明执行..')
// code..
}
这样我们就声明了一个匿名函数,并且把它的引用指向了变量fn?
再次在该表达式声明的函数上下方各调用一次,来看控制台的输出结果。
// 为了清晰的看到控制台的输出,我们在各自调用前后做个标记,增加可读性。
console.log('之前调用开始..');
fn();
console.log('之前调用结束..');
var fn = function () {
console.log('fn 函数【表达式】声明执行..')
// code..
}
console.log('之后调用开始..');
fn();
console.log('之后调用开始..');
控制台打印结果:
可以看到代码在执行到第一次调用fn()函数的时候,提示:fn is not a function (fn 不是一个方法),遇到错误而终止运行。
这说明在第一次调用fn()的同时,var fn 变量没有做为全局对象的一个属性而存在,且 fn 引用的匿名函数上下文也没有被初始化,所以在他之前调用失败。
// 现在先把之前的调用逻辑给注释掉,再看下控制台的输出
// console.log('之前调用开始..');
// fn();
// console.log('之前调用结束..');
var fn = function () {
console.log('fn 函数【表达式】声明执行..')
// code..
}
console.log('之后调用开始..');
fn(); // 在表达式之后调用
console.log('之后调用开始..');
控制台打印结果:
可以看出,在该表达式函数之后来调用是可以的,来总结下那是为什么呢?
总结:
1:首先变量本身不做为一个函数存在,而是一个匿名函数的引用(值类型的不属于引用)
2:在代码执行阶段,初始化全局上下文时,它没有被做为全局的一个属性而存在,所以不会造成变量对象的污染
3:该类型的声明一般在插件的开发比较常见,也可做为闭包中回调函数的调用
所以 function fn () {} 并不等于 var fn = function () {} ,他们有本质上的区别。
希望看完对这两种写法有自己的认识 。如有错误,还请慷慨指正
ps:欢迎转载,转载请注明出处! http://www.cnblogs.com/liuyitian/p/4042596.html
javaScript的函数(Function)对象的声明(@包括函数声明和函数表达式)的更多相关文章
- Javascript学习之Function对象详解
JavaScript中的Function对象,就是我们常说的函数对象.在JS中,所有的函数也是以对象的形式存在的. 语法 充当Function对象的构造函数使用,用于结合new关键字构造一个新的Fun ...
- 函数----Function对象
函数---Function对象 一 . 函数的书写 函数 : 就是将一些语句进行封装,然后通过调用的形式,执行这些语句. 函数的作用 : ● 将大量重复的语句写在函数里,以后需要这些语句的时候,可以 ...
- Javascript基础--函数(Function对象)
1.函数是一段可执行的代码,函数可多次调用,模块化管理. 2.使用function语句,function funName([arg1][,arg2]....[,argn]){代码块}.所有版本可用,一 ...
- Javascript Object、Function对象
1.Object对象 原型对象 原型是对象的一个属性,也就是prototype属性,每个对象都有这个内部属性,而且他本身也是一个对象. <script type="text/javas ...
- javascript中的function对象
function对象都是Function的实例: > Object.getOwnPropertyNames(Function) [ 'length', 'name', 'arguments', ...
- Javascript高级篇-Function对象
1.引入 1.1Function是基于原型的对象 2.创建Function对象 2.1 var myFun = new Function("参数一","参数二" ...
- 微信小程序 功能函数 将对象的键添加到数组 (函数深入)
// 将对象的键添加到数组 var arr = Object.keys(site); //英文 https://developer.mozilla.org/en-US/docs/Web/JavaScr ...
- JavaScript学习09 函数本质及Function对象深入探索
JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...
- javascript对象模型和function对象
javascript中,函数就是对象 <html> <head> <script type="text/javascript"> functio ...
随机推荐
- 奇异值分解(We Recommend a Singular Value Decomposition)
奇异值分解(We Recommend a Singular Value Decomposition) 原文作者:David Austin原文链接: http://www.ams.org/samplin ...
- .net framework 源码调试 与 问题解决
调试方式有二种, 看官方资料就OK. 官方地址: http://referencesource.microsoft.com/serversetup.aspx 1. 使用配置在线地址安装 2. 下载安装 ...
- Unity3D Script Execution Order ——Question
我 知道 Monobehaviour 上的 那些 event functions 是 在主线程 中 按 顺序调用的.这点从Manual/ExecutionOrder.html 上的 一张图就可以看出来 ...
- SystemInfo.deviceUniqueIdentifier 返回机器码
SystemInfo.deviceUniqueIdentifier 返回机器码
- Openstack Grizzily 单节点测试机安装( All In One CentOS/RHEL)
Openstack Grizzily版本已经相当完善,根据官方文档安装基本不存在什么问题,但是想快速测试了解Openstack功能的用户非常多,devstack的安 装需要check最新的代码,时常碰 ...
- SPOJ NSUBSTR Substrings 后缀自动机
人生第一道后缀自动机,总是值得纪念的嘛.. 后缀自动机学了很久很久,先是看CJL的论文,看懂了很多概念,关于right集,关于pre,关于自动机的术语,关于为什么它是线性的结点,线性的连边.许多铺垫的 ...
- 【转】12 款优秀的 JavaScript MVC 框架评估
JavaScript MVC 框架有很多,不同框架适合于不同项目需求.了解各种框架的性能及优劣有利于我们更加快捷的开发.作者(Gordon L.Hempton)一直在寻求哪种MVC框架最为完美,他将目 ...
- 在AngularJS中学习javascript的new function意义及this作用域的生成过程
慢慢入门吧,不着急. 至少知道了controller和service的分工. new function时,隐含有用this指向function的prototype之意. 这样,两个JAVASCRIPT ...
- Project Euler 91:Right triangles with integer coordinates 格点直角三角形
Right triangles with integer coordinates The points P (x1, y1) and Q (x2, y2) are plotted at integer ...
- lintcode:First Missing Positive 丢失的第一个正整数
题目 丢失的第一个正整数 给出一个无序的整数数组,找出其中没有出现的最小正整数. 样例 如果给出 [1,2,0], return 3 如果给出 [3,4,-1,1], return 2 挑战 只允许时 ...