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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
解析vue中的$mount
Dec 21 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
JavaScript实现星级评价效果
May 17 Javascript
js实现页面图片消除效果
Mar 24 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
js获取页面description的方法
2015/05/21 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
判断单链表中是否存在环
2012/07/16 面试题
博士研究生自我鉴定范文
2013/12/04 职场文书
护士思想汇报
2014/01/12 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
运动会广播稿20字
2014/02/18 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
个人务虚会发言材料
2014/10/20 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL