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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
js实现简单点赞操作
Mar 17 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
详解关于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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
js select option对象小结
2013/12/20 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
浅谈js中的bind
2019/03/18 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python with (as)语句实例详解
2020/02/04 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
小学生安全保证书
2014/02/01 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
学习十八大宣传标语
2014/10/09 职场文书
乐山大佛导游词
2015/02/02 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
同学会演讲稿
2019/04/02 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server