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 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
Vue之Watcher源码解析(2)
Jul 19 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP与javascript对多项选择的处理
2006/10/09 PHP
Get或Post提交值的非法数据处理
2006/10/09 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jquery对dom的操作常用方法整理
2013/06/25 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python redis 删除key脚本的实例
2019/02/19 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python实现堆排序的实例讲解
2020/02/21 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
淘宝好评语大全
2014/05/05 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
身边的榜样活动方案
2014/08/20 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
秋季运动会加油词
2015/07/18 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
JavaScript数组 几个常用方法总结
2021/11/11 Javascript