理解es6 中 arrow function的this
箭头函数相当于定义时候,普通函数.bind(this)
箭头函数根本没有自己的this,导致内部的this就是定义时候的外层代码块中的this。
外层代码块中的this,则取决于执行时候环境上下文context中的this
并不是所有的{}都可以代表是上下文环境或者代码块,例如 {x:1,y:2} ,就是简简单单的对象。
但是function () {
这里是代码块,有上下文context环境,例如参数,属性,变量等
}
还有就是context为window(global)的情况。
通过实例来分析箭头函数的this。
var name = 'nnmm'
var obj = {
name: 'name1',
func: () => { //不推荐这样的方式(使用对象字面量的时候,最好不要在其定义的方法里使用箭头函数)
console.log(this.name)
},
func1: function (){
console.log(this.name)
},
son: {
name: 'name-son',
func: function(){
console.log(this.name)
},
func1: ()=>{
console.log(this.name)
}
}
}
obj.func()
obj.func1()
obj.son.func()
obj.son.func1()
obj.func为箭头函数,定义它的this为外层上下文的this,即为window(global)。
var obj1={
num:4,
fn:function(){
var f=() => {
console.log("hello----->",this); //此处的this取决与外层代码fn函数的执行环境
setTimeout(() => {
console.log("world----->",this); //此处的this取决与外层代码fn函数的执行环境
});
}
f();
}
}
obj1.fn();
var f = obj1.fn;
f();
理解es6 中 arrow function的this的更多相关文章
- 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理
理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...
- [ES6] 06. Arrow Function =>
ES6 arrow function is somehow like CoffeeScirpt. CoffeeScript: //function call coffee = -> coffee ...
- 理解ES6中的Iterator
一.为什么使用Iterator 我们知道,在ES6中新增了很多的特性,包括Map,Set等新的数据结构,算上数组和对象已经有四种数据集合了,就像数组可以使用forEach,对象可以使用for...in ...
- 理解ES6中的Symbol
一.为什么ES6引入Symbol 有时候我们在项目开发的过程中可能会遇到这样的问题,我写了一个对象,而另外的同时则在这个对象里面添加了一个属性或是方法,倘若添加的这个属性或是方法是原本的对象中本来就有 ...
- 【JS】325- 深度理解ES6中的解构赋值
点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...
- 深入理解 ES6中的 Reflect
阅读目录 一:Reflect.get(target, name, receiver) 二:Reflect.set(target,name,value,receiver) 三:Reflect.apply ...
- 理解ES6中的Promise
一.Promise的作用 在ajax请求数据的过程中,我们可以异步拿到我们想要的数据,然后在回调中做相应的数据处理. 这样做看上去并没有什么麻烦,但是如果这个时候,我们还需要做另外一个ajax请求,这 ...
- 深入理解javascript中的Function.prototye.bind
函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...
- 理解javascript中的Function.prototype.bind
在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如 ...
随机推荐
- iOS app内打开safari完成google的OAuth2认证
最近使用google的oauth认证,发现不再允许使用UIWebview进行认证了,必须使用系统游览器,使用游览器也不一定要在app之间跳转,ios使用SFSafariViewController就可 ...
- Python--subprocess
本节内容 os与commands模块 subprocess模块 subprocess.Popen类 总结 我们几乎可以在任何操作系统上通过命令行指令与操作系统进行交互,比如Linux平台下的shell ...
- background-image属性
background-image 属性 实例,设置body元素的背景图像: body { background-image: url('paper.gif'); background-color: # ...
- 使用 wordcloud 构建词云图
from wordcloud import WordCloudfrom matplotlib import pyplot as pltfrom PIL import Imageimport numpy ...
- ELK统一日志系统的应用
收集和分析日志是应用开发中至关重要的一环,互联网大规模.分布式的特性决定了日志的源头越来越分散, 产生的速度越来越快,传统的手段和工具显得日益力不从心.在规模化场景下,grep.awk 无法快速发挥作 ...
- 百度上传插件---webuploader的使用
需求:朋友让找一个兼容IE8的上传插件,卧槽,IE8,我当时是崩溃的,然后就搜到了这个百度的插件,官网是这样描述的 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HT ...
- Codeforces 840D Expected diameter of a tree 分块思想
Expected diameter of a tree 我们先两次dfs计算出每个点能到达最远点的距离. 暴力计算两棵树x, y连边直径的期望很好求, 我们假设SZ(x) < SZ(y) 我们枚 ...
- WRITE T AFTER ADVANCING 2 LINES
WRITE T AFTER ADVANCING 2 LINES 意思是“在前进两行之后打印T记录内容” (ADVANCING 和 LINE 字可省略) WRITE T BEFORE ADVANCIN ...
- .net程序员面试小结(内附一些面试题和答案)
今天下午去面试,面试官和HR小姐姐都很好,没有做面试题,用聊天的方式来交流技术,整个过程很轻松,从中也学到了很多知识. 下面就来总结一下面试过程. 一.深刻了解自己的简历 无论是HR还是技术面试人,首 ...
- Java菜鸟浅谈OCR
什么是OCR? 粗暴点说就是图片文本识别!正规点的说法就是:(Optical Character Recognition,光学电子识别) 最近公司开展新项目,考虑到实名认证这方面,然后还要上传身份证正 ...