JS中var声明与function声明以及构造函数声明方式的区别
JS中常见的三种函数声明(statement)方式有这三种:
- // 函数表达式(function expression)
- var h = function () {
- // h
- }
- // 函数声明(function declaration)
- function h() {
- // h
- }
- // 构造函数(function constructor)
function H() {
// H
}
先说三者的显著区别:
第一种声明方式也就是var声明方式,函数表达式,又叫做函数字面量(Function Literals)、函数直接量(Function direct quantity), 函数只有在var语句声明之后才能被调用
第二种声明方式也就是function声明方式,函数可以在function声明之前被调用
第三种声明方式也就是构造函数声明方式,函数可以在function声明之前被调用,不同于函数声明的是构造函数的函数名首字母要大写
因为在函数预编译过程中,会将函数声明整体提升,而对于var变量只会把var h进行提升,然后再在代码运行阶段进行赋值
对第一种情况,函数表达式是在函数运行阶段才赋值给变量h
对第二种情况,函数声明是在代码运行阶段之前,也就是代码解析阶段才赋值给标识符h
对第三种情况,构造函数也是在代码运行阶段之前,也就是代码解析阶段才赋值给标识符H
为了证明这种说法可以看下面两个例子:
对应第一种情况,
- console.log(h) // undefined
- var h = function () {
- // h
- }
- console.log(h) // function () {//h}
- h = function () {
- // h1
- }
console的结果是
- undefined
- ƒunction () {
- // h
- }
因为赋值发生在代码运行阶段, 代码自上而下运行console.log(h)所在位置只能获取它之前的赋值
对应第二种情况,第三种情况,
- console.log(h) // function h() {//h}
- function h() {
- // h
- }
- console.log(h) // function h() {//h}
- function h() {
// h1
}
console的结果是
- ƒunction h() {
- // h1
- }
- ƒunction h() {
- // h1
- }
因为赋值发生在代码解析阶段,代码运行到console.log(h)时解析早已完成, 而解析的结果是后面那个函数h,故会打印此结果
深入:
JS声明函数的三种方式:
1. 函数表达式: 即上面第一种方式,这种方法使用function操作符创建函数,表达式可以存储在变量或者对象属性里。函数表达式往往被称为
匿名函数,因为它没有名字。证明这一点你可以 console.log(h.name); 可以看到打印为空 "",而h只是对函数的引用,不是函数名。
2. 函数声明: 即上面第二种方式,会声明一个具名函数,且函数能在其所在作用域的任意位置被调用,其创建的函数为具名函数,证明这一
点你可以 console.log(h.name); 可以看到打印为 "h"。 可在后面的代码中将此函数通过函数名赋值给变量或者对象属性
3. 构造函数function Fun(){}:不推荐这种用法,容易出问题,通常用于原型链中
深入了解函数字面量和函数直接量:
https://blog.csdn.net/qq_25178609/article/details/51669870 https://blog.csdn.net/superhoy/article/details/52946157
JS中var声明与function声明以及构造函数声明方式的区别的更多相关文章
- js中var的有或无--重复声明和以后的声明
js中var的有或无--重复声明和以后的声明 使用var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误. 如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色. 如果重复 ...
- 浅谈JS中 var let const 变量声明
浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...
- 【前端开发】】js中var写和不写的区别
js中var用与不用的区别 Javascript声明变量的时候,虽然用var关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的.可以正常运行的代码并不代表是合适的代码. v ...
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val()
一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...
- js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别
js中有两种声明函数的方法,分别为: var functionOne = function() { // Some code }; function functionTwo() { // Some c ...
- JS中var声明与function声明两种函数声明方式的区别
JS中常见的两种函数声明(statement)方式有这两种: // 函数表达式(function expression) var h = function() { // h } // 函数声明(fun ...
- js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别 (译)
stackOverflow中看到了很久以前问的一个关于函数声明的问题,问题对函数剖析的特别深.这里翻译了一下组织成一篇小博文,加深一下对这两种声明方式的印象.虽是老调重弹,但是只要能帮助理解问题,不管 ...
- JavaScript中var变量引用function与直接声明function
今天在h5开发app的过程中遇到了一个js问题,function的执行问题 在js中声明函数function有这两种方法 var A=function(){...} 或者 function A(){. ...
- js中var的重复声明
腾讯的一个笔试题,先看一下 var a = 100;function fn() { alert(a); //undefined var a = 200; alert(a); //200}fn();al ...
随机推荐
- VIJOS-P1325 桐桐的糖果计划
VIJOS-P1325 桐桐的糖果计划 JDOJ 1432 桐桐的糖果计划 https://neooj.com/oldoj/problem.php?id=1432 Description 桐桐很喜欢吃 ...
- SPOJ - Triple Sums
[传送门] FFT第一题! 构造多项式 $A(x) = \sum x ^ {s_i}$. 不考虑题目中 $i < j < k$ 的条件,那么 $A^3(x)$ 每一项对应的系数就是答案了. ...
- struct和class内存大小的计算
以下均是在VS2017下的结果 结构体内存大小的计算: 用例一: #include<stdio.h> union ss { int a; char b; }; struct MyStruc ...
- Xamarin.Forms移动开发系列2:创建和调试
摘要 本文将介绍如何通过VS2019创建Xamarin.Forms应用程序,以及如何进行调试. 前言 本文介绍Xamarin.Froms应用程序的创建和调试. 开发环境 1.Visual Studio ...
- 初识程序设计,Linux使用问题记录
刚开始实在csdn写的,排版csdn更好看,本文链接:https://blog.csdn.net/qq_30282649/article/details/102910972 @[TOC](刚开始学习计 ...
- 字段加密实践(django-fernet-fields)
一.fernet介绍 Fernet 用于django模型字段对称加密,使用 crytography 库. 官网帮助文档 1.先决条件 django-fernet-fields 支持Django 1.8 ...
- MySQL实战45讲学习笔记:第一讲
一.MySQL逻架构图 二.连接器工作原理刨析 1.连接器工作原理图 2.原理图说明 1.连接命令 mysql -h$ip -P$port -u$user -p 2.查询链接状态 3.长连接端连接 1 ...
- MySQL中的相关表操作
简单表操作 1.表操作之修改表 .修改表名 alter table 表名 rename 新表名 .增加字段 alter table 表名 add 新字段名 数据类型[相关约束性条件...], add ...
- [Powershell]发布基于.NET Framework的WebAPI和Job控制台程序项目
获取要发布的定时计划任务. 禁用和停止定时计划任务. 批量强制结束Job进程. 打印定时计划任务状态. 备份项目文件夹. 发布项目文件夹. 删除部署包. 启用定时计划任务. <# .NOTES ...
- python运维开发常用模块(四)文件对比模块difflib
1.difflib介绍 difflib作为 Python的标准库模块,无需安装,作用是对比文本之间的差异,且支持 输出可读性比较强的HTML文档,与Linux下的diff命令相似.我们可以 使用dif ...