标签分类
技术文章
当前位置:主页 > 计算机编程 > javascript > 基于js的变量提升和函数提升(详解)

js的变量提升和函数提升知识点总结

  • 发布时间:
  • 作者:码农之家原创
  • 点击:156

基于js的变量提升和函数提升(详解)

这篇文章主要知识点是关于js,变量提升,函数提升,基于js的变量提升和函数提升(详解),js变量提升深入理解 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程
  • 类型:物联网大小:60.8 MB格式:PDF出版:电子工业出版社作者:赵英杰
立即下载

更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

一、变量提升

在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。

上个简历的例子如:

console.log(global); // undefined
var global = 'global';
console.log(global); // global

function fn () {
console.log(a); // undefined
var a = 'aaa';
console.log(a); // aaa
}
fn();

之所以会是以上的打印结果,是由于js的变量提升,实际上上面的代码是按照以下来执行的:

var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // 打印出global

function fn () {
var a; // 变量提升,函数作用域范围内
console.log(a);
a = 'aaa';
console.log(a);
}
fn();

二、函数提升

js中创建函数有两种方式:函数声明式和函数字面量式。只有函数声明才存在函数提升!如:

console.log(f1); // function f1() {}  
console.log(f2); // undefined 
function f1() {}
var f2 = function() {}

只所以会有以上的打印结果,是由于js中的函数提升导致代码实际上是按照以下来执行的:

function f1() {} // 函数提升,整个代码块提升到文件的最开始<br>console.log(f1);  
console.log(f2);  
var f2 = function() {}

结语:基本上就是这样,要熟练掌握的话可以多做些练习,test:

console.log(f1()); 
console.log(f2);  
function f1() {console.log('aa')}
var f2 = function() {}
(function() {
console.log(a);
a = 'aaa';
var a = 'bbb';
console.log(a);
})();

以上这篇基于js的变量提升和函数提升(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

js变量提升深入理解

JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部:

'use strict';

function foo() {
  var x = 'Hello, ' + y;
  alert(x);
  var y = 'Bob';
}
foo();

虽然是strict模式,但语句var x = 'Hello, ' + y;并不报错,原因是变量y在稍后申明了。但是alert显示Hello, undefined,说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明,但不会提升变量y的赋值。

对于上述foo()函数,JavaScript引擎看到的代码相当于:

function foo() {
  var y; // 提升变量y的申明
  var x = 'Hello, ' + y;
  alert(x);
  y = 'Bob';
}

由于JavaScript的这一怪异的“特性”,我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量:

function foo() {
  var
    x = 1, // x初始化为1
    y = x + 1, // y初始化为2
    z, i; // z和i为undefined
  // 其他语句:
  for (i=0; i<100; i++) {
    ...
  }
}

以上这篇js变量提升深入理解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到spring+springmvc+mybatis整合注、 vue项目中使用md5加密以及、 详解vue axios封装请求状态、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:js上传文件功能的实例讲解

下一篇:JavaScript高级程序设计笔记分享

展开 +

收起 -

学习笔记
网友NO.909280

JS温故而知新之变量提升和时间死区

前言 开始执行脚本时,执行脚本的第一步是编译代码,然后再开始执行代码,如图 另外,在编译优化方面来说,最开始时也并不是全部编译好脚本,而是当函数执行时,才会先编译,再执行脚本,如图 编译阶段:经历了词法分析,语法分析生成AST,以及代码生成。并且在此阶段,它只会扫描并且抽出环境中的声明变量,声明函数以便准备分配内存,所有的函数声明和变量声明都会被添加到名为Lexical Environment的JavaScript内部数据结构内的内存中。因此,它们可以在源代码中实际声明之前使用。但是,Javascript只会存储函数声明和变量声明在内存,并不会存储他们的值 执行阶段:给变量x赋值,首先询问内存你这有变量x吗,如果有,则给变量x赋值,如果没有则创建变量x并且给它赋值。 变量提升 如下图,左边灰色块区域,是演示函数执行前的编译阶段,先抽出所有声明变量和声明函数,并进行内存分配。然后再开始执行代码,在执行第一行代码的时候,若是变量a存在于内存中,则直接给变量a赋值。而执行到第二行时,变量b并没有在内存中,则会创建变量b并给它赋值。 Lexical enviroment是一种包含标识符变量映射的数据结构 LexicalEnviroment = { Identifier: value, Indentifier: function object} 简而言之,Lexical enviroment就是程序执行过程中变量……

网友NO.114639

详解js中let与var声明变量的区别

ES6 新增了let命令,用来声明局部变量,所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束。 1.ES6可以用let定义块级作用域变量 代码如下: function f1(){ { var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // Uncaught ReferenceError: b is not defined } f1(); 说明:在ES6之前只有全局作用域和函数作用域,在ES6中新增了块级作用域,用{}花括号表示。var 声明的变量a在花括号外面仍然是会起作用的,但是let声明的变量b只有在花括号里面才会起作用的,在块级作用域内。 2.let配合for循环的独特应用 代码如下: function f2(){ var i = 5; for(var i=0;i=10;i++){ } console.log(i); // 11 var j = 5; for(let j=0;j=10;j++){ } console.log(j); // 5 } f2(); 说明:let非常适合用于for循环内部的块级作用域,在for循环当中,每一次的执行都是一个全新的独立的块级作用域。使用let声明的变量在for循环当中不会受到循环体外面的影响,不会受到变量污染,不会发生改变。对于var声明的变量i会受到for循环的影响,受到变量污染,而let声明的变量j不会受到for循环的影响。 3.let没有变量提升与暂时性死区 代码如下: function f3(){ // 变量提升 function f31(){ console.log(a); // undefined var a = 10; console.log(b); // Uncaught ReferenceError: b is not defined let b = 10; } f31(); 说明:在ES6中,如果区块中存……

网友NO.432720

详谈js的变量提升以及使用方法

介绍 变量提升Hoisting是人们对JavaScript执行上下文工作方式的一种认识,并不是官方给出的改变 从字面上理解,变量提升的意思是变量和函数的声明会在物理层移动到作用域的最前面。但是这样理解并不准确,效果是相同的,但是实际的实现方式是JavaScript的变量和函数的声明会在编译阶段放入内存 这意味着使用者在正式声明一个函数或者变量之前就能够使用它 函数的提升 在JavaScript中,在声明一个函数前,我们就能够使用它,大家应该都体验过,像这样: test(); function test() { // do something} 在正常的使用情况下,应该需要先声明函数才能调用,但是这种方法仍然能够运行,这是因为JavaScript自动将函数声明事先存入了内存的原因,看起来就像JavaScript自动把函数声明提升到了最前面 变量的提升 对于变量,JavaScript使用类似的方法,但是要注意一点的是,对于变量的提升,JavaScript只会将变量声明提升,但是不会把初始化提升,如果在变量初始化之前使用,则会得到undefined // undefinedconsole.log(a);// ReferenceError: b is not definedconsole.log(b);var a = 10; // undefinedconsole.log(num);num = 6;// 6console.log(num);num += 7;// 13console.log(num);var num; // undefinedconsole.log(num);num = 1;// 1console.log(num);var num = 2;// 2console.log(num); 这里要注意,JavaScript的变量提升是针对var的,而……

网友NO.194427

JS块级作用域和私有变量实例分析

本文实例讲述了JS块级作用域和私有变量。分享给大家供大家参考,具体如下: 块级作用域 (function(){ //这里是块级作用域})() 例如: (function(){ for(var i=0;i5;i++){ alert(i);//0,1,2,3,4 }})();alert(i);//error 上例中,定义了一个块级作用域,变量i在块级作用域中可见的,但是在块级作用域外部则无法访问。 这种技术经常在全局作用域中被用在函数外部,从而限制向全局作用域中添加过多的变量和函数。 私有变量 任何在函数中定义的变量,都可以认为是私有变量。因为不能在函数的外部访问这些变量。私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。 我们把有权访问私有变量和私有函数的公有方法称为特权方法: function MyObject(){//私有变量和私有函数 var privateVariable = 10; function privateFunction(){ return false; } //特权方法,特权方法作为闭包有权访问在构造函数中定义的所有变量和函数 this.publicMethod = function (){ privateVariable++; return privateFunction(); };}var obj = new MyObject();obj.publicMethod();// 原型模式定义共有方法: (function(){ //私有变量和私有函数 var privateVariable = 10; function privateFunction(){ return false; } //构造函数 MyObject = function(){ }; //公有/特权方法 MyObject.prototype.publicMethod = function(){ privateVariable++; return privateFunction(); };})(); 模块模式: v……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明