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 toFixed() 方法
Apr 15 Javascript
firefox下input type="file"的size是多大
Oct 24 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
Vue三层嵌套路由的示例代码
May 05 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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
Yii实现复选框批量操作实例代码
2017/03/15 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
php register_shutdown_function函数详解
2017/07/23 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
javascript解析json格式的数据方法详解
2020/08/07 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
详解Django之auth模块(用户认证)
2018/04/17 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
财务主管的岗位职责
2013/12/30 职场文书
中学生检讨书1000字
2014/10/28 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
食品卫生管理制度
2015/08/06 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL