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 相关文章推荐
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
axios 封装上传文件的请求方法
Sep 26 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
Vue双向绑定实现原理与方法详解
May 07 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
Move.js入门
2017/02/08 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
Django URL传递参数的方法总结
2016/08/28 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
基于python 凸包问题的解决
2020/04/16 Python
Python实现一个论文下载器的过程
2021/01/18 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
英文求职信写作小建议
2014/02/16 职场文书
假期安全教育广播稿
2014/10/04 职场文书
简单租房协议书
2014/10/21 职场文书
大学班干部竞选稿
2015/11/20 职场文书