函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容。

(一)JavaScript函数

JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句。

1.JavaScript创建函数的方法有两种:

  • 函数声明:

function funcDeclaration(){ return 'A is a function'; }

  • 函数表达式:

var funExpression=function(){ return 'A is a function '; }

上述函数声明和函数表达式的区别(注明:翻译自:不同的方式来写一个函数)在:

JavaScript解析器中存在一种变量声明被提升(hosting)的机制,也就是说变量(函数)的声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。

例如以下代码段:

alert(foo); // function foo() {}
alert(bar); // undefined
function foo() {}
var bar = function bar_fn() {};
alert(foo); // function foo() {}
alert(bar); // function bar_fn() {}

输出结果分别是function foo() {}undefinedfunction foo() {}function bar_fn() {}

可以看到foo 的声明写在alert之后,仍然可以被正确调用,因为JavaScript解释器会将其提升到alert前面,而以函数表达式创建的函数bar则不享受此待遇。

所以,JavaScript 引擎执行以上代码的顺序可能是这样的:

  • 创建变量foobar,并将它们都赋值为undefined
  • 创建函数 foo 的函数体,并将其赋值给变量foo
  • 执行前面的两个 alert。
  • 创建函数 bar_fn ,并将其赋值给 bar
  • 执行后面的两个 alert。

2.函数的参数

在调用函数时,你可以向其传递值,这些值被称为参数。

function printName(name){
    console.log(name);
}

printName('Byron');
printName('Casper);

其中name是形参,'Byron'和'Casper'是实参。

说到函数的参数,我们不得不提到arguments。此处涉及的内容有点多,请看客们参考楼主之前转载的javascript arguments

3.函数重载

重载是很多面向对象语言实现多态性的手段之一,在静态语言中确定一个函数的手段是靠方法签名--函数名+参数列表,也就是说相同名字的函数参数个数不同或者顺序不同都被认为是不同的函数,成为函数重载。

在JavaScript中没有函数重载的概念,函数通过名字确定唯一性,参数不同也被认为是相同的函数,后面的覆盖前面的。

4.返回值

有时候我们希望在函数执行后给我们一个反馈,就像表达式一样,给我们个结果,我们可以通过return来实现

function fn(a, b){
    a++;
    b++;
    return a + b;
}

var result = fn(2, 3);
conslole.log(result);

这样我们就能拿到函数希望给我们的反馈了,调用return后,函数立即终端并返回结果,即使后面还有语句也不在执行。其实我们不写return语句,函数也会默认给我们返回undefined

5.命名冲突

当在同一个作用域内定义了名字相同的变量和方法的话,无论其顺序如何,变量的赋值会覆盖方法的赋值。

var fn = 3;
function fn(){}

console.log(fn); // 3

当函数执行有命名冲突的时候,函数执行时载入顺序是 变量、函数、参数,典型例子如下:

function fn(fn){
  console.log(fn);

  var fn = 3;
  console.log(fn);
}

fn(10); 输出结果为:10 3

(二)函数作用域

在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

说到这里,我们不得不提下JavaScript中的作用域链。

在JavaScript中,函数也是对象,实际上,JavaScript里面一切都是对象。函数对象和其他对象一样。

JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里。  ----JavaScript权威指南

JavaScript的作用域的是实现和C/C++不同,并非用“堆栈”方式,而是使用列表,具体过程如下(EMA262中所述):

  • 任何执行上下文时的作用域,都是由作用域链(scope chain)来实现的;

  • 在一个函数被定义的时候,会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性;

  • 在一个函数对象被调用的时候,会创建一个活动对象(也就是一个对象),然后对于每一个函数的形参,都命名为该活动对象的命名属性,然后将这个活动对象做为此时的作用域链(scope chain)最前端,并将这个函数对象的[[scope]]加入到scope chain中。

参考:

1.JavaScript 开发进阶:理解 JavaScript 作用域和作用域链

版权所有,如有转载请注明来源

JavaScript基础学习-函数及作用域的更多相关文章

  1. JavaScript基础03——函数的作用域及变量提升

    1.作用域 作用域,变量在函数内部作用的范围/区域.有函数的地方就有作用域.   2.局部作用域和全局作用域 function fn(){ var a = 1; } console.log(a); / ...

  2. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  3. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

  4. 48.javascript基础学习

    javascript基础学习:   http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...

  5. JavaScript 基础 学习 (四)

    JavaScript 基础 学习 (四) 解绑事件 dom级 事件解绑 ​ 元素.on事件类型 = null ​ 因为赋值的关系,所以给事件赋值为 null 的时候 ​ 事件触发的时候,就没有事件处理 ...

  6. JavaScript 基础 学习(三)

    JavaScript 基础 学习(三) 事件三要素 ​ 1.事件源: 绑定在谁身上的事件(和谁约定好) ​ 2.事件类型: 绑定一个什么事件 ​ 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...

  7. JavaScript 基础学习(二)js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  8. JavaScript 基础 学习 (二)

    JavaScript 基础 学习 节点属性 ​ 每一个节点都有自己的特点 ​ 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) ​ 语法:节点.nodeT ...

  9. JavaScript 基础 学习 (一)

    JavaScript 基础 学习 获取页面中的元素的方法 作用:通过各种方式获取页面中的元素 ​ 比如:id,类名,标签名,选择器 的方式来获取元素 ​ 伪数组: ​ 长的和数组差不多,也是按照索引排 ...

随机推荐

  1. less学习

    // 1.变量:颜色可做+- // from @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light- ...

  2. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  3. excel 日期/数字格式不生效需要但双击才会生效的解决办法

    原因: Excel2007设置过单元格格式后,并不能立即生效必须挨个双击单元格,才能生效.数据行很多.效率太低. 原因:主要是一些从网上拷贝过来的日期或数字excel默认为文本格式或特殊-中文数字格式 ...

  4. 【原创经验分享】WCF之消息队列

    最近都在鼓捣这个WCF,因为看到说WCF比WebService功能要强大许多,另外也看了一些公司的招聘信息,貌似一些中.高级的程序员招聘,都有提及到WCF这一块,所以,自己也关心关心一下,虽然目前工作 ...

  5. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  6. Oracle 数据库语句大全

    Oracle数据库语句大全 ORACLE支持五种类型的完整性约束 NOT NULL (非空)--防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值. CH ...

  7. %iowait和CPU使用率的正确认知

    resources 理解 %IOWAIT (%WIO) LINUX系统的CPU使用率和LOAD Linux Performance Observability Tools How Linux CPU ...

  8. Visual Studio:error MSB8020(搬运)

    状况如下: error MSB8020: The builds tools for v120 (Platform Toolset = 'v120') cannot be found. To build ...

  9. H3 BPM社区:流程开发者的学习交流平台

    企业上市有上市流程,融资扩充有融资流程,项目招投标有招投标流程,部门领导选拔有晋升流程,员工请假休假有请假流程,早起上班梳洗有符合自己习惯的流程--生活处处是流程,流程无处不在.但从信息化建设来说,企 ...

  10. iOS -- CocoaPods

    CocoaPods 是什么? CocoaPods 是一个负责管理 iOS 项目中第三方开源库的工具.CocoaPods 的项目源码在 GitHub( https://github.com/CocoaP ...