浅析JS中对函数function的理解(基础篇)

正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法。因此,函数名实际上是指向函数对象的指针,不与某个函数绑定。在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念:

var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐

  Function的构造函数可以接收任意数量的参数,但最后一个参数始终被看做函数体。这种方式有个缺点是,会导致解析两次代码,第一次是基础的ES代码解析,第二次是解析传入构造函数中的字符串,这样会导致性能的下降,在此写出是帮助理解js中函数其实是对象这个概念。

 (一)js函数没有重载的概念

  说到重载的概念,我们来类比Java中的重载是怎么实现的:在Java中,方法是通过方法签名来唯一标识一个方法。方法签名包括:方法名、参数数量、参数顺序和参数类型这几个要素。因此两个方法的方法名相同,而其他签名要素不同,编译器就会认为是两个不同方法,从而可以存在同名的不同方法,以实现重载的概念。(引用:怎么深入理解js中为什么没有重载呢--segmentfault 中manxisuo的回答)。

  而上面我们说过,js中的函数名实际上是指向函数对象的指针,因此函数名可以说是一个函数的唯一标识,跟参数列表并没有关系,因此并不会出现同名的两个函数(因为一个指针同时只能指向一个对象)从而不存在重载的概念。 举个栗子:

function sum(num1, num2){
return num1 + num2;
}
function sum(num1, num2, num3){
return num1 + num2 + num3;
}

  上面这种可以换一种写法,会更直观一些:

var sum = function(num1, num2){
return num1 + num2;
}
sum = function(num1, num2, num3){
return num1 + num2 + num3;
}

  这样就很明显可以看出,上面一行将sum指向function(num1,num2),而接下来又将sum指向function(num1, num2, num3),从而造成第二次的指向覆盖了第一次的,因此更明显的看出js中并没有重载的概念。

(二)函数声明和函数表达式的区别

  我们知道,常用的定义函数方法有两个:函数声明和函数表达式。

  函数声明,可以说是最常见的定义方法,如下例:

function sum(num1, num2){
return num1 + num2;
}

  函数表达式,这种定义方式在闭包及一些框架中使用较多,例如angular中常见的$scope.doSomething = function(){...}:

sum = function(num1, num2){
return num1 + num2;
};

  上述两种定义方法几乎是相同的,但有一点小区别,请看下面这个例子:

//函数声明
alert(sum(100, 100));
function sum(num1, num2){
return num1 + num2;
}
//函数表达式
alert(sum(100, 100));
var sum = function(num1, num2){
return num1 + num2;
};

  这两段代码看起来差别不大,只是函数定义的方式不同而已。但事实是,第一段可以正常运行而第二段则会报错。这是因为,在代码开始执行之前,解析器就已经通过一个名为函数声明提升的过程,读取并将函数声明添加到执行环境中。简单来说,解析器会先将函数声明放在源代码树的顶部。而下面那段代码,函数位于一个初始化语句中(并不会将其提升到顶部),简单来说,在执行到这个赋值语句之前,sum并未指向任何一个函数,因此在之前调用函数则会报错。

以上所述是小编给大家介绍的JS中函数function的理解(基础篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-10-12

js基础之DOM中元素对象的属性方法详解

在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

JS基础随笔(菜鸟必看篇)

在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型 简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等 下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示 复杂数据类型:在栈内存储引用,如下图 在了解以上两种数据类型的存储方式之后可以区分

javascript基础知识讲解

本篇适合javascript新手或者学了前端一段时间,对js概念不清晰的同学~~. 学习目的 本文针对javascript基础薄弱的同学,可以加深对javascript的理解. 本文将讲述以下几点对于初学者开说javascript(有的是大部分语言都有的)的坑 讲解内容如下: 1. 连等 2. i++ 3. 包装对象 4. 引用类型 5. && 与 || 讲解部分 1. 连等 小试牛刀 连等是常见的表达式,但是并不是所有情况都适合连等,连等只适用于字面量并不适用于引用类型. // 字面量连

JavaScript基础教程——入门必看篇

JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

Three.js基础部分学习

一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件  <场景 A scene.相机a camera.渲染器 a renderer  三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

Javascript基础学习笔记(菜鸟必看篇)

什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin

javaScript基础详解

首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 JavaScript的六大作用: 1直接在script输出 document.write("<h1>This is a heading</h1>");//document.write表输出,括号中h1标签同样有效 2对事件作出反应 <button type="button"

js基础之DOM中document对象的常用属性方法详解

-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

JavaScript基础重点(必看)

接触JavaScript这门语言也就很长的时间了,但从来没有系统的去了解这么语言.趁现在刚刚毕业以及某些原因无心工作的情况下去系统的了解一下这么语言,也想通过这么语言养成写博客的习惯,因为我认为这是一件对程序员来说很神圣又很光荣的事情. 1.1背景 相信很多初学者都遗忘或混淆的就是JavaScript的官方命名:ECMAScript.2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015. 1.2语法 常规语法省略 重点强调: 1.原始值和对象:原始值包括布

js 基础篇必看(点击事件轮播图的简单实现)

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图

JavaScript基础知识点归纳(推荐)

定义在函数外的变量一定是全局变量:定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量. 1.全局变量与局部变量 JavaScript var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(glob

JavaScript基础进阶之数组方法总结(推荐)

数组常用方法总结: 下面我只总结了es3中常用的数组方法,一共有11个.es5中新增的9个数组方法,后续再单独总结. 1个连接数组的方法:concat() 2个数组转换为字符串的方法:join().toString() 6个增删数组元素的方法:pop().push().shift().unshift().slice().splice() 2个数组排序方法:reverse().sort() 连接数组的方法: 1.concat() 作用:连接两个数组,合并为一个新数组. 用法:arr1.concat

给Java菜鸟的一些建议_关于Java知识点归纳(J2EE and Web 部分)

J2EE(Java2 Enterprise Edition) 刚出现时一般会用于开发企业内部的应用系统,特别是web应用,所以渐渐,有些人就会把J2EE和web模式画上了等号.但是其实 J2EE 里面并不仅仅是web,可以看到很多其中的规范都是通用的,目的是为了高效开发出健壮的服务企业业务模式的应用系统.J2EE中也是可以没有web界面的应用,而现在面向大众用户开发的网站往往也会使用到很多的J2EE的技术,所以J2EE和web开发的概念都是融合在了一起了. 我本人在JAVA开发刚入行的时候,也是

javascript基础语法——全面理解变量和标识符

关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript的基本特性.实际上,变量是标识符的一种.本文将详细介绍变量和标识符 定义 标识符(Identifier)就是一个名字,用来对变量.函数.属性.参数进行命名,或者用做某些循环语句中的跳转位置的标记 //变量 var Identifier = 123; //属性 (new Object).Identifier = 'test'; //函数及参数 function IdentifierName(Identifie

Java知识点归纳 —给Java新手的一些建议(新手必看)

写这篇文章的目的是想总结一下自己这么多年来使用java的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的Java程序员和打算入Java开发这个行当的准新手们,希望可以给大家一些经验,能让大家更好学习和使用Java. 这次介绍的主要内容是和J2SE相关的部分,另外,会在以后再介绍些J2EE相关的.和Java中各个框架相关的内容. 经过这么多年的Java开发,以及结合平时面试Java开发者的一些经验,我觉得对于J2SE方面主要就是要掌握以下的一些内容. 1. JVM相

Javascript简写条件语句(推荐)

经常在各处牛人的代码中看到许多简写的条件表达语句,看了一些介绍这方面的文章,觉得3 ways 2 say if这篇文章(http://www.thomasfrank.se/3_ways_2_say_if.html)还不错.在这篇文章中作者对传统的if...else....?:.&&/||三种条件表达的写法的特点及用处进行了总结归纳,简述如下: 1. if...else结构 // Set r to 0 or 1 var r= Math.floor(2*Math.random()) // Se