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帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
OpenLayers3实现对地图的基本操作
Sep 28 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
jquery的ajax简单结构示例代码
2014/02/17 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
import的本质解析
2017/10/30 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
护理职业应聘自荐书
2013/09/29 职场文书
毕业生多媒体设计求职信
2013/10/12 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
心理健康活动总结
2014/04/30 职场文书
学习十八大的心得体会
2014/09/01 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
承租经营合作者协议书
2014/10/01 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
2015大学迎新标语
2015/07/16 职场文书