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作用域的更多相关文章

  1. js 之 箭头函数 (未学完)

    js之箭头函数表达式 箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不 ...

  2. js中箭头函数和普通函数this的区别

    最近在学习angularJs的时候由于里面涉及到了箭头函数,箭头函数除了声明上有点区别以外,和普通函数最主要的区别还是在this的问题上. Js中函数中嵌套的函数this不会 “继承”.比如说以下代码 ...

  3. => js 中箭头函数使用总结

    箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展 ...

  4. js之箭头函数

    原文 ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: ...

  5. 【js】箭头函数与普通函数的异同

    普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用es5写法. 普通函数大家知道: 形式基本一致 来看看箭头函数: 开发时根据实际情况可以省略一些东西 单条处理可以省略ret ...

  6. js中箭头函数 及 针对箭头函数this指向问题引出的单体模式

    ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数, ...

  7. [译]ES6箭头函数和它的作用域

    原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ 在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值 ...

  8. ES6箭头函数和它的作用域

    原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ http://es6rocks.com/2014/10/arrow- ...

  9. ES6箭头函数Arrow Function

    果然,隔了很长时间都没有来博客园上逛了...... 前一段时间一直在忙我们参加的一个比赛,转眼已经好久没有来逛过博客园了,果然还是很难坚持的...... 今天总算还是想起来要过来冒个泡,强行刷一波存在 ...

随机推荐

  1. Wireshark教程之界面介绍

    实验目的 1.工具介绍 2.主要应用 实验原理 1.网络管理员用来解决网络问题 2.网络安全工程师用来检测安全隐患 3.开发人员用来测试执行情况 4.学习网络协议 实验内容 1.菜单栏选项介绍 2.快 ...

  2. 金融行业BI可视化报表,直观体验数据的价值

    现在,数据已成为非常重要的资产.之前,人们只是把它当作一种附属品,由客户来办理业务,在系统中产生了这样的附属品.但如今,发现在客户办理业务这一信息中,蕴藏着一些客户的需求,积聚成千条这种信息,可以洞察 ...

  3. 号外!号外!这个敏捷高效的大数据bi看板可以免费使用啦!

    随着信息革命的深入推进,数据已经成为国家基础性战略资源,各个行业开始重视数据分析,企业不同,数据分析需求当然不一样,如销售行业需要对商品进行销售分析:网站运营需要进行用户.渠道.流量等信息分析:制造行 ...

  4. c# 导出Excel模板(在项目中有现成的Excel模板)

    在项目中会有导出模板功能,把现成的Excel模板导出去填写之后再进行导入,这里说说怎么导出模板: 模板存放位置: 点击导出模板按钮:  private string currentPath = Pat ...

  5. vue项目部署到IIS服务器上

    前端Vue项目需要部署到IIS服务器上: 准备工作: 1:部署IIS服务器 2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹 开始部署: 1:复制文件 ...

  6. 公司内部一次关于OOM故障复盘分享

    最近笔者有点忙,这次OOM事故发生过去两周前,记得笔者那天正带着家人在外地玩,正中午跟友人吃饭的时候,钉钉连续告警爆表,接着就是钉钉电话(显示广东抬头)一看就知道BBQ了,又一次故障发生了,今天把那次 ...

  7. 二级py--day6数据库设计基础

    二级py-- 数据库设计基础 1.数据定义语言(DDL):该语言负责数据的模式定义与数据的物理存取构建 2.数据操纵语言(DML):该语言负责数据的操纵,包括查询及总删改等操作 3.数据控制语言(DC ...

  8. 【转载】SQL实例大全

    from:http://blog.csdn.net/basycia/article/details/52134279 OR from:http://www.cnblogs.com/yubinfeng/ ...

  9. x86-4-任务(task)

    x86-4-任务(task) 4.1 任务: CPU将一整段正在运行的代码称作任务,可以类比操作系统的线程.比如说:你在Windows写了个程序进行运行,这个程序的运行在操作系统层面上来说就是进程里的 ...

  10. egg中使用sequelize事务,实现原子性

    let transaction; try { // 建立事务对象 transaction = await this.ctx.model.transaction(); const house = awa ...