首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在ES6中,为什么不使用这个就不能引用同级方法呢?

在ES6之前,JavaScript中的函数声明会被提升到当前作用域的顶部,因此可以在函数声明之前调用函数。然而,在ES6中引入了块级作用域和箭头函数,这导致了函数声明的行为发生了变化。

在ES6中,使用关键字letconst声明的变量和常量会受到块级作用域的限制,只能在声明之后才能被访问。这意味着在块级作用域内部声明的函数,只能在声明之后才能被调用。

例如,考虑以下代码:

代码语言:javascript
复制
{
  foo(); // 报错:ReferenceError: foo is not defined

  let foo = function() {
    console.log("Hello");
  };
}

在上面的代码中,由于使用了let声明了foo函数,所以在函数声明之前调用foo会导致引用错误。这是因为foo只在块级作用域内部存在,而在声明之前访问它会超出其作用域。

这种行为的改变是为了提高代码的可读性和可维护性。在ES6之前,由于函数声明会被提升,可能会导致代码中的函数调用出现在函数声明之前,这样的代码会让人困惑。通过在块级作用域内部声明函数,并在声明之后调用,可以更清晰地表达代码的意图。

总结起来,ES6中不使用这个来引用同级方法是因为在块级作用域内部声明的函数只能在声明之后才能被调用,这是为了提高代码的可读性和可维护性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Tree-Shaking性能优化实践 - 原理篇

具体来说, webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况,虽然依赖了某个模块,但其实只使用其中的某些功能。...无用代码消除广泛存在于传统的编程语言编译器,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为DCE(dead code elimination)。...所谓静态分析就是执行代码,从字面量上对代码进行分析,ES6之前的模块化,比如我们可以动态require一个模块,只有执行后才知道引用的什么模块,这个就不能通过静态分析去做优化。...这是 ES6 modules 设计时的一个重要考量,也是为什么没有直接采用 CommonJS,正是基于这个基础上,才使得 tree-shaking 成为可能,这也是为什么 rollup 和 webpack...方法没有被使用到,我们期望的是get方法最终被消除。

16110

读懂CommonJS的模块加载

nodejs我们就可以直接使用require和exports这两个关键词来实现模块的导入和导出。...NodejsCommomJS模块的实现 require 导入,代码很简单,let {count,addCount}=require("./utils")就可以了。那么导入的时候发生了些什么??...ES6,如果大家想要在浏览器测试,可以用以下代码: //utils.js const x = 1; export default x 复制代码 ...ES6模块导入的几个问题: 相同的模块只能引入一次,比如x已经导入了,就不能再从utils中导入x 不同的模块引入相同的模块,这个模块只会在首次import执行。...引入的模块就是一个值的引用,并且是动态的,改变之后其他的相关值也会变化 引入的对象不可随意斩断链接,比如我引入的count我就不能修改他的值,因为这个是导入进来的,想要修改只能在count所在的模块修改

1.3K30
  • 新人自学前端,如何快速打好前端开发基础?

    这个问题也不止一个同学问过我,怎么样能快速学好前端?Js学到什么程度可以?其实这类问题都有一个共同的点,就是【前端开发真正重要的技术是什么?】...我个人主观看来,前端开发技术体系的核心技术有且只有一个,就是JavaScirpt。不深入掌握JavaScirpt,就不可能深入理解整个前端技术体系。为什么这么说?...掌握JavaSciprt,就不能透过现象看本质。什么意思?...es6的constructor的supers()其实就是下面这三行代码, function a(){} function b(){} b.prototype = new a(); 4、如果不懂js的闭包...为什么?因为JavaScirpt是基于对象的脚本语言。所以,学明白JavaScript的首要条件就是,从对象的角度来看待Js,【对象是按引用传递的】。

    50330

    必知必会的JavaScript前端面试题篇(二),不看后悔!

    • 其余数据类型可分为 原始数据类型 和 引用数据类型 • 原始数据类型存在栈(stack) ,占据空间小,大小固定,属于被频繁使用的数据 • 引用数据类型存在堆(heap) ,占据空间大, 大小固定...,引用数据类型存储了指针,该指针指向数据的内存地址。...当解释器寻找引用的值时,会首先检索当前数据的地址,获取地址后然后从堆获取数据。...• 存储方式不同:基本数据类型存在栈(stack),而引用数据类型存在堆(heap) • 复制方式不同:将一个基本数据类型变量赋值给另一个变量时,会复制这个值的副本,而引用类型变量赋值给另一个变量时...对 JavaScript 来说,这个值通常为 2-52, ES6 ,提供了Number.EPSILON属性,而它的值就是 2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON

    10110

    一小时的时间,上手 Webpack

    为什么要用构建工具?如果你只会js+css+html,最多再加上jquery,那么当你听到构建工具这个说法是不是蒙的?...为什么需要构建或者说编译?因为像es6、less及sass、模板语法、vue指令及jsx浏览器是无法直接执行的,必须经过构建这一个操作才能保证项目运行,所以前端构建打包很重要。...至于为什么选择webpack,因为这个工具配置非常灵活,支持插件化扩展,社区生态很丰富,官方迭代更新速度快,作为程序员,这是一个靠谱的选择。...里面用到的import是es6方法,有的浏览器并不支持es6,如果直接用webpack打包在这浏览器上是会出错的,但是刚才已经安装并配置了babel-loader,可以实现解析es6方法,babel还可以解析...这就尴尬了,虽然图片是打包过来了,问题是我每次还在拷贝复制一下名称再引用,这很不科学。 ? 有没有更好的办法加载图片?答案是肯定的!

    80320

    ES6常用新特性学习1-let和const

    简介 ES6以前,变量的声明都是使用var关键字,且会进行变量声明提升。另外,我们曾经讲过,JS是没有块级作用域的,这一点也带来了很多的不便。ES6 新增了let和var两个关键字,用来声明变量。...这明显不是我们希望的结果,那么js能否也使用块级作用域,我们生命的变量可否只块级作用域中生效ES6给我们提供了let。...这个很好理解。但如果此时该变量块作用域外部也被声明了?是否此时的引用是对外部该变量的引用?...其实,ES6 明确规定,如果区块存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是声明之前就使用这些变量,就会报错。...2.3 不允许重复声明 let不允许相同作用域内(指的是ES5规定的作用域,包含块级作用域)重复声明一个变量,不管是使用var还是let。

    45820

    JS数据类型_JS数据类型之引用数据类型

    ES5的时候,我们认知的数据类型确实是 6种:Number、String、Boolean、undefined、object、Null。 ES6 中新增了一种 Symbol 。...JS数据类型:Object 包含了哪几种类型? 其中包含了Data、function、Array等。这三种是常规用的。 JS数据类型:JS的基本类型和引用类型有哪些?...引用类型:object。里面包含的 function、Array、Date。 基本类型的实例: 引用类型的实例: JS数据类型:JS typeof 输出分别是什么?...期间我一直纠结 Number(‘as’) 输出 NaN ?NaN == NaN 为什么是 false。其实 js 规定的NaN 不等于NaN。...使用var 声明变量但未对其加初始化时,这个变量就是undefined。 2、Null 类型 只有一个值。

    5.9K31

    你真的懂let和const吗?

    块级作用域 ES6之前我们脑海里应该只存在全局作用域和函数级作用域,没有块级作用域。那么为什么要引入块级作用域?...(false) { var str = 'world'; } } d();//undefined 相信很多刚入门的同学看到上述代码会有所不解,其实在全局作用域str变量已经被声明且复制,为什么我函数里面访问不到...(str[i]); } console.log(i); // 5 es6的let和const声明符,是不存在变量提升的;同时也只块级作用域生效。...那就听我娓娓道来,如果说我们使用了let和const命令,作用域内会对这些命令声明的变量,它的声明周期内形成一种封闭作用域。这在语法上,称为“暂时性死区”。...tmp = 123; console.log(tmp); // 123 } 因为let和const声明是不会被提升的,所以为了保障声明的有效性,js的解释引擎会对变量所处的块级作用域形成一种保护,因此声明之前使用会有语法错误

    71960

    你真的懂let和const吗?

    块级作用域 ES6之前我们脑海里应该只存在全局作用域和函数级作用域,没有块级作用域。那么为什么要引入块级作用域?...(false) {    var str = 'world';  } } d();//undefined 相信很多刚入门的同学看到上述代码会有所不解,其实在全局作用域str变量已经被声明且复制,为什么我函数里面访问不到...(str[i]); } console.log(i); // 5 es6的let和const声明符,是不存在变量提升的;同时也只块级作用域生效。...那就听我娓娓道来,如果说我们使用了let和const命令,作用域内会对这些命令声明的变量,它的声明周期内形成一种封闭作用域。这在语法上,称为“暂时性死区”。...tmp = 123;  console.log(tmp); // 123 } 因为let和const声明是不会被提升的,所以为了保障声明的有效性,js的解释引擎会对变量所处的块级作用域形成一种保护,因此声明之前使用会有语法错误

    845110

    ES6之let和const命令

    var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError let tmp; } ES6 明确规定,如果区块存在let和const命令...凡是声明之前就使用这些变量,就会报错。 暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。...一旦声明,常量的值就不能改变。 本质 const限定的是赋值行为。...也就是说 const a = 1; a = 2;//报错 const arr = []; arr.push(1) //[1] //声明引用型数据为常量时,const保存的是变量的指针,只要保证指针不变就不会保存...为了解决这个问题,es6引入的let 、const和class声明的全局变量不再属于顶层对象的属性。

    32020

    ES6基础入门之let、const

    file 作者 | Jeskson 来源 | 达达前端小酒馆 01 首先?欢迎大家来学习ES6入门基础let,const的基础知识内容。初始ECMA Script6。...file 一旦声明常量,就不能再改变?...常量为引用类型的时候,不能保证不可变 解决引用类型,不可保证不可变 const只能保证地址的指向不改变,但是不能保证地址上的值不能改变 file 怎么去防止常量去引用类型的时候能被修改的情况 Object.freeze...,或者修改一个对象的现有属性, 并返回这个对象。...那我告诉你 2、为什么学习JavaScript设计模式,因为它是核心 3、一篇文章把你带入到JavaScript的闭包与高级函数 4、大厂HR面试ES6的深入浅出面试题知识点 5、一篇JavaScript

    47820

    grunt集成Babel 实现ES6转ES5

    grunt集成Babel 实现ES6转ES5 背景:原来前端项目使用ES5开发,后来有个小伙伴使用ES6的高级语言,导致项目无法通过grunt压缩。...使用grunt 集成babel,实现ES6转ES5,主要有一下几个步骤: 1. 配置package.json devDependencies里面是开发依赖,dependencies里面是项目依赖。...一个是声明了一个变量叫interface,但interface是ES6的保留字,导致转化时报错,这个问题到文件里去把变量名改掉就行。 第二个问题是,变量没有声明就直接引用。...这个问题在编译时不会报错,但是严格模式下会导致项目运行不正常,比如下面的c_start和c_end。解决办法是给变量加上声明。...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    60840

    ES6基础】const介绍

    开篇 ES6之前,JavaScript被其他编程语言诟病没有定义常量的能力,甚至大多数企业的开发文档,对于常量的定义都使用var。一般经常会使用所有字母大写和下划线组成的变量名。...作用域范围 如何选择var/let/const 本篇文章阅读时间预计10分钟 01 const介绍 使用const语法定义变量,一旦定义初始化,我们就不能改变他们的值,因此这就称为常量。...a变量是引用值类型,对象地址是不能改变的,但是这个对象本身的属性是可以改变的。...03 如何让对象的属性值不可变 上一小节,我们了解了,使用const定义对象变量时,对象变量的属性是可以更改的,如何让其不能更改,其实只要配合ES5的Object.freeze()方法,便可以获得一个第一层属性...从工程化的角度来说,我们应从ES6开始遵从以下三原则: 一般情况下,使用const定义常量。 只有明确值会被改变时,我们才使用let定义变量。 不在使用var。

    45720

    ES6基础】const介绍

    const.png ES6之前,JavaScript被其他编程语言诟病没有定义常量的能力,甚至大多数企业的开发文档,对于常量的定义都使用var。...如下图所示: 变量-内存.png ES6在对变量的引用进行读取时,会从该变量当前所对应的内存地址所指向内存空间中读取内容。...a变量是引用值类型,对象地址是不能改变的,但是这个对象本身的属性是可以改变的。...上一小节,我们了解了,使用const定义变量时,变量的属性是可以更改的,如何让其不能更改,其实只要配合ES5的Object.freeze()方法,便可以获得一个第一层属性(首层)不可变的对象。...从工程化的角度来说,我们应从ES6后遵从以下三原则: 一般情况下,使用const定义常量。 只有明确值会被改变时,我们才使用let定义变量。 不再使用var。

    48470

    【Vue 响应式数据原理】数据双向绑定原理

    1.2 数组数据响应式原理 vue 对JavaScript数组的方法进行了二次封装(重写)来劫持这些方法原有操作数据的基础上,添加了将数据响应到页面的功能。...为什么监听不到?...Vue 出于对性能的考虑,数组没有使用Object.defineProperty对属性添加setter和getter bject.defineProperty()是可以对数组实现监听操作的,但是vue并没有实现这个功能...但是注意:数组的元素是引用类型时是会被监听的 解决方案: 添加数据:this....2.2 新的代理方式 Proxy Proxy,字面意思是代理,是ES6提供的一个新的API,用于修改某些操作的默认行为,可以理解为目标对象之前做一层拦截,外部所有的访问都必须通过这层拦截,通过这层拦截可以做很多事情

    43320

    JS 继承的7种方法,你学会了吗?

    前言 在上一篇文章我们讲解了原型链的机制以及原型相关的一些属性,而与原型链息息相关的就是继承了,为什么这么说?...可想而知,原型链继承起着至关重要的主要 全文开始之前,不妨先来看看本文纲要 息息相关的 6 种继承方式 ES6 到来之前,基于 ES5 实现的继承,每一代中都优化了上一代带来的问题,这也是...基本思想 为了想要实现引用值共享的问题,我们就不能给子类直接使用原型对象上的引用值。 因此,可以子类构造函数调用父类构造函数。...重新声明父类所定义的方法,无法复用。 三、组合继承 在前面两种方法,都存在着一定的缺陷,所以很少会将它们单独使用。...避免生成了不必要的属性 缺点: 子类原型被重写 以上就是介绍的ES5的6种继承方式 ES6 的继承 由于 ES6 之前的继承过于复杂,代码太多,再 ES6 引入了一种新的继承方式 extends

    36440

    JS 继承的7种方法,你学会了吗?

    前言 在上一篇文章我们讲解了原型链的机制以及原型相关的一些属性,而与原型链息息相关的就是继承了,为什么这么说?...可想而知,原型链继承起着至关重要的主要 全文开始之前,不妨先来看看本文纲要 息息相关的 6 种继承方式 ES6 到来之前,基于 ES5 实现的继承,每一代中都优化了上一代带来的问题,这也是...基本思想 为了想要实现引用值共享的问题,我们就不能给子类直接使用原型对象上的引用值。 因此,可以子类构造函数调用父类构造函数。...重新声明父类所定义的方法,无法复用。 三、组合继承 在前面两种方法,都存在着一定的缺陷,所以很少会将它们单独使用。...避免生成了不必要的属性 缺点: 子类原型被重写 以上就是介绍的ES5的6种继承方式 ES6 的继承 由于 ES6 之前的继承过于复杂,代码太多,再 ES6 引入了一种新的继承方式 extends

    69530

    前端必会react面试题合集2

    doWork 方法,React 会执行一遍 updateQueue 方法,以获得新的节点。然后对比新旧节点,为老节点打上 更新、插入、替换 等 Tag。...开发过程,我们需要保证某个元素的 key 在其同级元素具有唯一性。...指出(组件)生命周期方法的不同componentWillMount -- 多用于根组件的应用程序配置componentDidMount -- 在这可以完成所有没有 DOM 就不能做的所有配置,并开始获取所有你需要的数据...构造函数调用 super 并将 props 作为参数传入的作用在调用 super() 方法之前,子类构造函数无法使用this引用ES6 子类也是如此。... 有课前端网 前端技术学习平台;//建议使用如下方式,在这个案例中会抛出错误。

    2.2K70

    谈谈ES6语法(汇总上篇)

    背景 嗯~ES6的语法有什么好谈的,无聊了吧? 确实,语法糖的东西真的是学起来如嚼蜡 -- 淡无味;但是要用别人的东西来开发的,你学还是学? 所以,还是简单谈下吧......ES6声明的变量不会挂在顶层对象 嗯~ES6变量的声明是指哪些声明? 指let, const, import, class声明。 而var, function声明是ES6之前的。...) 字符串扩展 针对字符串扩展这个,个人感觉模版字符串使用的频率比较高。...复制代码 箭头函数适合处理简单的计算,如果有复杂的函数体或读写操纵建议使用,这样可以提高代码的可读性。...意外~ 参考和后话 阮一峰的ES6教程 codepen 代码验证 本次的ES6语法的汇总总共分为上、、下三篇,本篇文章为上篇。

    71120

    JavaScript高级(10)

    过去我们要打印出一个对象的属性,需要重复声明,然后才能打印↓ 如果我们使用对象结构↓ 就会节省很多时间 另外,如果我们不喜欢对象原来的属性名,我们也可以使用别名,用法就是解构的原属性名后面加上冒号...: 再跟上我们想要的别名↓ 此时就不能使用原来的属性名了....箭头函数 ES6新增的定义函数的方式 ( 形参 ) => { 函数体 } 一般我们会将这个函数赋值给一个常量 函数体只有一句代码,且代码的执行结果就是返回值,可以省略大括号;如果形参只有一个...箭头函数的this指向问题 箭头函数绑定this关键字,箭头函数的this,指向的是函数定义位置的上下文的this.箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象...下面我们再来学习箭头函数this的指向 这个很好理解,谁调用了这个函数this就指向谁 下面看箭头函数的this: 为什么打印的是window而不是A?

    31010
    领券