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 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
javascript实现tab切换特效
Nov 12 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
JS实现提示框跟随鼠标移动
Aug 27 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与SQL注入攻击[二]
2007/04/17 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python处理大日志文件
2019/07/23 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
咖啡店自主创业商业计划书
2014/01/22 职场文书
暑期研修感言
2014/02/17 职场文书
银行贷款承诺书
2014/03/29 职场文书
安全员岗位职责
2015/02/10 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技