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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
js实现筛选功能
Nov 24 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
php源码的安装方法和实例
2019/09/26 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
js操作checkbox遇到的问题解决
2013/06/29 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python切片索引用法示例
2018/05/15 Python
Python 函数返回值的示例代码
2019/03/11 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Python socket服务常用操作代码实例
2020/06/22 Python
用python对oracle进行简单性能测试
2020/12/05 Python
东方红海科技面试题软件测试方面
2012/02/08 面试题
小学教师师德反思
2014/02/03 职场文书
关于建议书的格式范文
2014/05/20 职场文书
求职信标题怎么写
2014/05/26 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
活动总结模板大全
2015/05/11 职场文书
军事博物馆观后感
2015/06/05 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS