JS匿名函数内部this指向问题详析


Posted in Javascript onMay 10, 2019

前言

网上看到一句话,匿名函数的执行是具有全局性的,那怎么具有的全局性呢?

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象

1.案例中,第一个say打出来的是Alan,而第二个则是window

var name = 'window'
 var person = {
 name :'Alan',
 sayOne:function () {
  console.log(this.name)
 },
 sayTwo:function () {
  return function () {
  console.log(this.name)
  }
 }
 }
 person.sayOne()//Alan
 person.sayTwo()() // window

2.原因

  1. 函数内部的this指向调用者
  2. sayOne调用者是person对象,所以this指向person;
  3. sayTwo的调用者虽然也是person对象,但是区别在于这次调用并没有打出this而是在全局返回了一个匿名函数
  4. 而这个匿名函数不是作为某个对象的方法来调用执行,是在全局执行

3.我们也可以更改this指向,这里应用JS高级编程的案例

var name = "global";

var foo = {
 name: "foo",
 getName : function(){
 console.log(this.name);
 }
}

var bar = {
 name: "bar",
 getName : function(){
 return (function(){
  console.log(this.name);
 })();
 }
}

foo.getName(); //foo
foo.getName.call(bar); //bar
foo.getName.call(this); //global
foo.getName.call(window); //global

(function(){

 console.log(this.name)

}.bind(bar))(); //bar

(function(){

 console.log(this.name)

}.bind())(); //global

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
js常用DOM方法详解
Feb 04 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 #Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 #Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 #Javascript
jsonp实现百度下拉框功能的方法分析
May 10 #Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 #Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 #Javascript
Angular4.0动画操作实例详解
May 10 #Javascript
You might like
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
决策树的python实现方法
2014/11/18 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
JavaScript中reduce()的用法
2022/05/11 Javascript