JS的箭头函数this作用域
name="小刚";
let student={
name:"小明",
printLog:function(){
// 这里绑定了顶层作用域,可以使用变量与方法
console.log(this)
},
printArrowLog:()=>{
// 这里不知道绑定的是哪个作用域,有知道的大咖请回答下
console.log(this)
}
} student.printLog();
/*
{ name: '小明',
printLog: [Function: printLog],
printArrowLog: [Function: printArrowLog]
}
*/
student.printArrowLog();
/*
{}
这里返回了空对象,说明this不是指向window全局对象,也不是指向student对象。奇葩
*/
name="小刚";
let student={
name:"小明",
printLog:function(){
// 这里绑定了顶层作用域,可以使用变量与方法
return ()=>{
console.log("printLog Arrow:"+this)
}
},
printLog1:function(){
// 这里绑定了全局作用域,可以使用window对象的属性
return function(){
console.log("printLog1:"+this)
}
},
printLog2:function(){
// 这里绑定了全局作用域,可以使用window对象的属性
(function(){
console.log("printLog2:"+this)
})()
}
} sayhello=student.printLog();
sayhello1=student.printLog1(); sayhello();
/*
printLog Arrow:小明
this指向:printLog Arrow:[object Object]
从这里我们可以看出这里使用的是student对象里的顶层属性,没有说明问题
*/ sayhello1();
/*
printLog1:小刚
this指向:printLog1:[object global]
从打印的结果来看,我们可以看到打印的name值为小刚,是我在全局进行生命的name属性,说明在外部进行调用,this指向window全局对象 */ student.printLog2();
/*
printLog2:小刚
this指向:printLog1:[object global]
从打印的结果来看,我们可以看到打印的name值为小刚,是我在全局进行生命的name属性,说明生命调用写在一起,this指向window全局对象
*/
name="小刚";
let student={
name:"小明",
functions:{
name:"小飞",
printLog:function(){
// 这里绑定了functions对象作用域,可以使用内部的变量与方法
return ()=>{
console.log("printLog:"+this.name)
}
},
printLog1:function(){
// 这里绑定了顶层作用域,可以使用window的变量与方法
return function(){
console.log("printLog1:"+this.name)
}
}
}
} var pl=student.functions.printLog();
pl();
/*
printLog:小飞 */ var pl1=student.functions.printLog1();
pl1();
/*
printLog1:小刚
*/ /*总结:根据name的值不同,可以查到使用的是哪个作用域的值,进而可以知道this的指向*/
function方法调用call和apply的使用方式:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call
JS的箭头函数this作用域的更多相关文章
- js 之 箭头函数 (未学完)
js之箭头函数表达式 箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不 ...
- js中箭头函数和普通函数this的区别
最近在学习angularJs的时候由于里面涉及到了箭头函数,箭头函数除了声明上有点区别以外,和普通函数最主要的区别还是在this的问题上. Js中函数中嵌套的函数this不会 “继承”.比如说以下代码 ...
- => js 中箭头函数使用总结
箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展 ...
- js之箭头函数
原文 ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: ...
- 【js】箭头函数与普通函数的异同
普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用es5写法. 普通函数大家知道: 形式基本一致 来看看箭头函数: 开发时根据实际情况可以省略一些东西 单条处理可以省略ret ...
- js中箭头函数 及 针对箭头函数this指向问题引出的单体模式
ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数, ...
- [译]ES6箭头函数和它的作用域
原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ 在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值 ...
- ES6箭头函数和它的作用域
原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ http://es6rocks.com/2014/10/arrow- ...
- ES6箭头函数Arrow Function
果然,隔了很长时间都没有来博客园上逛了...... 前一段时间一直在忙我们参加的一个比赛,转眼已经好久没有来逛过博客园了,果然还是很难坚持的...... 今天总算还是想起来要过来冒个泡,强行刷一波存在 ...
随机推荐
- 【C# 反射】使用 Activator 类 -激活器
创建类的实例: //需要添加对Education.dll的引用才能正确执行 object CreateInstanceKind1 = Activator.CreateInstance("Ed ...
- PyTorch深度学习实践——处理多维特征的输入
处理多维特征的输入 课程来源:PyTorch深度学习实践--河北工业大学 <PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili 这一讲介绍输入为多维数据时的分类. 一个数据集 ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- Qt:QJsonObject
0.说明 QJsonObject在逻辑上就是一个Map或Dict!记住这一点对理解它的方法.说明很有帮助. QJsonObject类封装了JSON Object. JSON Object是一个Key- ...
- 为什么 Vue3.js / Element+ 组件属性前面有的需要添加冒号,有的不需要?
背景 使用 Element+ Layout 布局: <el-row> <el-col :span="12"><div class="grid ...
- LeetCode-094-二叉树的中序遍历
二叉树的中序遍历 题目描述:给定一个二叉树的根节点 root ,返回它的 中序 遍历. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:https://leetcode-cn ...
- Atom 初识
Atom记录 Git Atom默认自带Git,命令行启动,需要自己添加环境变量,同时默认安装的其他命令行工具很丰富,唯独缺少ssh-keygen,需要自己下载 Git:C:\Users\zhuyulo ...
- Jmeter---压力模式
需求 下面有3个场景,思考一下在jmeter里面如何设计 场景1:有一个项目,500用户同时登录,响应时间能达到多少场景2:考勤打卡,最大吞吐量能达到多少(每秒最大能完成多少笔打卡业务)场景3:银行业 ...
- 2022年官网下安装Logstash最全版与官网查阅方法(8.1.0最新安装)
一.环境整合 构建工具(参考工具部署方式) 软件名称 版本 相关文章推荐 NodeJS 16.0.0 https://www.cnblogs.com/liuyangfirst/p/15998172.h ...
- [C++]C风格、C++风格和C++11特性的线程池
线程池概念 假设完成一项任务需要的时间=创建线程时间T1+线程执行任务时间T2+销毁线程时间T3,如果T1+T3的时间远大于T2,通常就可以考虑采取线程池来提高服务器的性能 thread pool就是 ...