let

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。

还是那个经典的问题:创建5个li,点击不同的li能够打印出当前li的序号。

如果在for循环中使用**var**来声明变量i的话,将总是打印出 Item 5 is Clicked

使用let的方式来解决

var liList = document.querySelectorAll('li') // 共5个li
for( let i=0; i<liList.length; i++){
 liList[i].onclick = function(){
   console.log(i)
}
}

而在MDN上是这样写的

var list = document.getElementById("list");

for (let i = 1; i <= 5; i++) {
 var item = document.createElement("LI");
 item.appendChild(document.createTextNode("Item " + i));

 let j = i;
 item.onclick = function (ev) {
   console.log("Item " + j + " is clicked.");
};
 list.appendChild(item);
}

所以,可以这样理解,在for( let i = 0; i< 5; i++) 这句话的圆括号之间,有一个隐藏的作用域。

var liList = document.querySelectorAll('li') // 共5个li
for( let i=0; i<liList.length; i++){
 let i = 隐藏作用域中的i // 看这里看这里看这里
 liList[i].onclick = function(){
   console.log(i)
}
}

而通过阅读以上的代码,我们可以理解为:JS默认为我们添加了 let i = 隐藏作用域中的i这行代码。

从而让我们可以直接在for循环中的{}获取到()中的变量i,进而解决使用var带来的一些弊端。

如果你还想对let有更深入的了解,可以看看这个。https://zhuanlan.zhihu.com/p/28140450

let x = x

关于let还有一个小问题

let x = x ,然后接下来就无法使用x变量了,无论是赋值,取值,还是声明,都不行。

x现在处于一种 既被定义了,又没被定义的 中间状态

如果你还想更深入了解这个问题,可以看看这个。https://www.zhihu.com/question/62966713

箭头函数

特点:

  • 由于 箭头函数没有自己的this指针,通过 call() apply() 方法调用一个函数时,只能传递参数,他们的第一个参数会被忽略。

  • 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this

  • 箭头函数不能用作构造器,和 new一起用会抛出错误。

  • 箭头函数没有prototype属性。

  • yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。

箭头函数没有自己的this指针,如果在箭头函数中想要使用this,需要自己设置。

注意:使用Vue有时依赖this获取自身数据,但箭头函数没有自身this,会指向window。需要注意一下。

this指向问题

在调用函数每次都会向函数内部传递一个隐含的参数,这个隐含的参数就是this,this,指向的是一个对象。

这个对象我们称为函数执行的上下文对象

根据函数的调用方式不同,this会指向不同对象

  1. 以函数的形式调用时,this指向window

  2. 以方法的形式调用时,this指向调用方法的那个对象

  3. 以构造函数形式调用时,this就是新创建的那个对象

  4. shiyongcall和apply调用时,this是指定的那个对象

this是一个指针,永远指向其所在函数所有者,如果没有所有者,则指向全局变量window

let object = {
name: 'obj',
hi: function(this, p1, p2) {
console.log(this.name)
}
}
object.h1(1, 2)
object.h1.call(object, 1, 2)

上面的代码是用来帮助理解的,希望可以对你有所帮助。

ES6——>let,箭头函数,this指向小记的更多相关文章

  1. es6箭头函数 this 指向问题

    es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...

  2. ES6 箭头函数 this 指向

    ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...

  3. ES6 箭头函数this指向问题

    var name = "window"; var person1 = { name: "person1", show1: function() { consol ...

  4. ES6中箭头函数的作用

    我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...

  5. es6的箭头函数和es5的function函数区别

    一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...

  6. 箭头函数this指向问题

    this指向本质 箭头函数this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this.正是因为它没有this ...

  7. Es6中箭头函数与普通函数的区别

    Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...

  8. 关于ES6 用箭头函数后的 this 指向问题

    最近写完小程序后, 开始学习React, 因为有编译器, 就直接用ES6 新语法了, 中间自然离不开  () => { console.log('箭头函数的this是指向哪的问题')}; var ...

  9. 进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题

    首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数  函数 ...

  10. ES6 箭头函数this指向

    箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使 ...

随机推荐

  1. Part 32 AngularJS controller as syntax

    So far in this video series we have been using $scope to expose the members from the controller to t ...

  2. UE4中C++编程(一)

    一: C++工程和Gameplay框架 GameInstance 它适合放置独立于关卡的信息,比如说显示UI. GameMode 表示游戏玩法, 包含游戏进行的规则和胜利条件等等信息,游戏模式是和关卡 ...

  3. Salesforce Consumer Goods Cloud 浅谈篇四之店内拜访的创建和执行

    本篇参考: https://v.qq.com/x/page/f0772toebhd.html https://v.qq.com/x/page/e0772tsmtek.html https://v.qq ...

  4. SpringCloud升级之路2020.0.x版-40. spock 单元测试封装的 WebClient(上)

    本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 我们来测试下前面封装好的 WebClient,这里开始,我们使用 spock 编写 gro ...

  5. [loj2461]完美的队列

    参考论文,这里一共写了论文中的3种做法,第一种做法为强制在线时的做法,第二种为时间复杂度略高的做法(前两种都无法通过),第三种为本题正解,并给出了一种理论复杂度更优的做法 1.做法1 情况1 $\fo ...

  6. [loj3175]排列鞋子

    贪心与最近的鞋子匹配(大小相同且方向相反),记$a_{x}$表示第x双鞋子的左位置,$b_{x}$表示右位置 若$a_{x}>b_{x}$,那么可以交换这两双鞋子并令答案+1,所以不妨设$a_{ ...

  7. 深度学习,机器学习神器,白嫖免费GPU

    深度学习,机器学习神器,白嫖免费GPU! 最近在学习计算机视觉,自己的小本本没有那么高的算力,层级尝试过Google的Colab,以及移动云的GPU算力,都不算理想.如果数据集比较小,可以试试Cola ...

  8. docker版本演变,安装,基本命令

    1.docker 版本信息 Docker CE在17.03版本之前叫Docker Engine,版本号从0.1.0(2013-03-23)~1.13.1(2017-02-08),详见https://d ...

  9. No 'Access-Control-Allow-Origin' header: 跨域问题踩坑记录

    前言 前两周在服务器上部署一个系统时,遇到了跨域问题,这也不是第一次遇到跨域问题了,本来以为解决起来会很顺利,没想到解决过程中遇到了很多坑,所以觉得有必要写一篇博客记录一下这个坑. 问题产生原因 本来 ...

  10. Swift-技巧(九)CGImage To CVPixelBuffer

    摘要 iOS 中图像的表现形式不只是 Image,还有更加底层的方式,比如 CVPixelBuffer 像素缓存形式,那么 CGImage 就可以转换为像素缓存的方式也是需要了解的. CGImage ...