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
果然,隔了很长时间都没有来博客园上逛了...... 前一段时间一直在忙我们参加的一个比赛,转眼已经好久没有来逛过博客园了,果然还是很难坚持的...... 今天总算还是想起来要过来冒个泡,强行刷一波存在 ...
随机推荐
- Wireshark教程之界面介绍
实验目的 1.工具介绍 2.主要应用 实验原理 1.网络管理员用来解决网络问题 2.网络安全工程师用来检测安全隐患 3.开发人员用来测试执行情况 4.学习网络协议 实验内容 1.菜单栏选项介绍 2.快 ...
- 金融行业BI可视化报表,直观体验数据的价值
现在,数据已成为非常重要的资产.之前,人们只是把它当作一种附属品,由客户来办理业务,在系统中产生了这样的附属品.但如今,发现在客户办理业务这一信息中,蕴藏着一些客户的需求,积聚成千条这种信息,可以洞察 ...
- 号外!号外!这个敏捷高效的大数据bi看板可以免费使用啦!
随着信息革命的深入推进,数据已经成为国家基础性战略资源,各个行业开始重视数据分析,企业不同,数据分析需求当然不一样,如销售行业需要对商品进行销售分析:网站运营需要进行用户.渠道.流量等信息分析:制造行 ...
- c# 导出Excel模板(在项目中有现成的Excel模板)
在项目中会有导出模板功能,把现成的Excel模板导出去填写之后再进行导入,这里说说怎么导出模板: 模板存放位置: 点击导出模板按钮: private string currentPath = Pat ...
- vue项目部署到IIS服务器上
前端Vue项目需要部署到IIS服务器上: 准备工作: 1:部署IIS服务器 2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹 开始部署: 1:复制文件 ...
- 公司内部一次关于OOM故障复盘分享
最近笔者有点忙,这次OOM事故发生过去两周前,记得笔者那天正带着家人在外地玩,正中午跟友人吃饭的时候,钉钉连续告警爆表,接着就是钉钉电话(显示广东抬头)一看就知道BBQ了,又一次故障发生了,今天把那次 ...
- 二级py--day6数据库设计基础
二级py-- 数据库设计基础 1.数据定义语言(DDL):该语言负责数据的模式定义与数据的物理存取构建 2.数据操纵语言(DML):该语言负责数据的操纵,包括查询及总删改等操作 3.数据控制语言(DC ...
- 【转载】SQL实例大全
from:http://blog.csdn.net/basycia/article/details/52134279 OR from:http://www.cnblogs.com/yubinfeng/ ...
- x86-4-任务(task)
x86-4-任务(task) 4.1 任务: CPU将一整段正在运行的代码称作任务,可以类比操作系统的线程.比如说:你在Windows写了个程序进行运行,这个程序的运行在操作系统层面上来说就是进程里的 ...
- egg中使用sequelize事务,实现原子性
let transaction; try { // 建立事务对象 transaction = await this.ctx.model.transaction(); const house = awa ...