函数和作用域是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. 数据库优化案例——————某市中心医院HIS系统

    记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...

  2. TODO:Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  3. Android注解使用之通过annotationProcessor注解生成代码实现自己的ButterKnife框架

    前言: Annotation注解在Android的开发中的使用越来越普遍,例如EventBus.ButterKnife.Dagger2等,之前使用注解的时候需要利用反射机制势必影响到运行效率及性能,直 ...

  4. DataTable 转换成 Json的3种方法

    在web开发中,我们可能会有这样的需求,为了便于前台的JS的处理,我们需要将查询出的数据源格式比如:List<T>.DataTable转换为Json格式.特别在使用Extjs框架的时候,A ...

  5. 开源一款简单清爽的日历组件,JavaScript版的

    源码会在最后给出地址,需要的朋友自己去下载.最近项目需要做一个日程安排的功能,就是点击日历的某一天弹出一个录入页面,填完信息后保存当天的日程安排.有日程的日期会有不同的标记(比如加一个背景色啥的).网 ...

  6. iOS架构一个中型普通App的一些经验总结

    这一版比较完善的的App终于提交审核了.有时间写写自己的一些经验的总结了.自己主导的从0到比较成型的app到目前来说也只有两个,但是其中的很多东西都是大同小异.基本上是想到了什么就写什么,感觉写的不到 ...

  7. C# 数组的交集、差集、并集

    C# 数组的交集.差集.并集 工作中经常会用这方面的知识来检查那些字段是必须输入的,那些是禁止输入. using System; using System.Collections.Generic; u ...

  8. document.compatMode

    在我电脑屏幕上显示的 电脑是 1920*1080这是在document.compatMode:css1Compat模式 window.screen.availWidth 1920 window.scr ...

  9. 【干货分享】流程DEMO-人员调动流程

    流程名: 调动 流程相关文件: 流程包.xml 流程说明: 直接导入流程包文件,即可使用本流程 表单:  流程:  图片:3.png DEMO包下载: http://files.cnblogs.com ...

  10. class-dump 反编译私有的库和应用

    一.下载并安装class-dump 下载class-dump-3.5.dmg  点击下载 下载完成以后双击.dmg的文件,将里面的class-dump拷贝到/usr/local/bin 设置权限chm ...