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
果然,隔了很长时间都没有来博客园上逛了...... 前一段时间一直在忙我们参加的一个比赛,转眼已经好久没有来逛过博客园了,果然还是很难坚持的...... 今天总算还是想起来要过来冒个泡,强行刷一波存在 ...
随机推荐
- [题解]第十一届北航程序设计竞赛预赛——A.模式
题目描述 输入一个学号,判断是计算机系or软件学院or其他院系. 解题思路 水题,直接判断or除以10000都可以.不废话,直接上代码. 1 #include <iostream> 2 # ...
- 【信而泰】网络损伤仿真,为5G应用保驾护航
5G,绝对是今年最热门的话题!2019年6月6日,工信部正式向中国电信.中国移动.中国联通.中国广电发放5G商用牌照,中国正式进入5G商用元年.5G不仅仅是一次通信技术的升级,更是开启了一个新的时代. ...
- 只有PC端的报表工具使用太不方便了!有没有好用的手机报表app?
马上到年底了,签订的销售合同需尽快回款,销售经理此时正在下午出差的出租车上,通过手中的手机他查看了一下今天的回款报表 项目已经进行到了关键期,项目经理正在奔赴项目城市的高铁列车上,项目今天的进度报表已 ...
- 【C# .Net GC】强制垃圾回收 和System GC
属性 GC.MaxGeneration:获取系统当前支持的最大代数. 方法 GC.GetTotalMemory(bool forceFullCollection) 方法 true表示该方法先做垃圾收 ...
- centos7 配置nginx
安装是需要的环境 一. gcc 安装安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装: yum install gcc-c++ 二. PCR ...
- Java课程设计---数据库工具类
接下来看看传统的查询方式(一个完整的查询) package com.java.mysql; import java.sql.Connection; import java.sql.DriverMana ...
- ConvertHelper
DataTable 转Json using Newtonsoft.Json; public static string DataTableToJson(DataTable dt) { varJsonS ...
- thinkPHP ajax 状态修改(上架修改为下架)
<td> {if $v.status==1} <span class="top{$v.id}" name="0" onclick=" ...
- 浅浅的聊一下 WebSocket
第一次看到 ws:// 和 wss:// 时候,感觉好高级啊,还有这种协议. Websocket 历史 WebSocket是在2008年6月诞生的1.经由IEFT标准化后,2009年chrome 4第 ...
- 解决 MySQL 的 Table is marked as crashed and should be repaired 问题
解决方法: 找到mysql的安装目录的bin/myisamchk工具,在命令行中输入: myisamchk -c -r ../data/mysql/user.MYI 然后myisamchk 工具会帮助 ...