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系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
Nov 28 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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的memcached客户端memcached
2011/06/14 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
浅谈python中set使用
2016/06/30 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
中学教师岗位职责
2013/11/26 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
学校教代会开幕词
2016/03/04 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
JavaScript ES6的函数拓展
2022/01/18 Javascript