js函数中的this指向
写代码的时候遇到这个问题了,在这里复习一下
- 非箭头函数
非箭头函数的this指向比较好理解,就是调用这个函数的对象,举个栗子:
var obj = {
foo: {
bar: 3,
foo:{
bar: 4,
foo: function a() { console.log(this.bar) },
},
},
bar: 2
};
var foo = obj.foo.foo.foo;
var bar = 1;
obj.foo.foo.foo(); //由obj.foo.foo调用,所以此时this指向它,所以打印的this.a为4
foo(); //由window调用,所以this指向window,打印1
- 箭头函数
箭头函数的this指向,网上看到有一种说话是:箭头函数的this指向定义他的对象,这样理解是错误的。。。
严格来讲应该是:箭头函数的this指向定义它的上下文对象,更通俗一点来说就是指向定义箭头函数的那个形成函数作用域的函数所在对象(个人理解,有疑问的话可以在评论区讨论一下)
举个栗子
var obj = {
foo: {
bar: 3,
foo() {
var bar = 4;
return () => { console.log(this.bar) };
},
},
bar: 2
};
var foo = obj.foo.foo;
var bar = 1;
obj.foo.foo()() // 此时this指向obj.foo对象,打印3
foo()() // 此时this指向window,打印1
需要注意的是,执行函数的时候箭头函数才被定义,所以下面这个栗子打印结果才会不一样
下面这段代码最后打印出来都是3
var obj = {
foo: {
bar: 3,
foo() {
var bar = 4;
return () => { console.log(this.bar) };
},
},
bar: 2
};
var foo = obj.foo.foo(); // 改了这里
var bar = 1;
obj.foo.foo()() // 3
foo() // 3
最后,看一下把箭头函数换成普通函数的写法
var obj = {
foo: {
bar: 3,
foo() {
var bar = 4;
return function() { console.log(this.bar) };
},
},
bar: 2
};
var foo = obj.foo.foo;
var bar = 1;
obj.foo.foo()() // 1
foo()() // 1
总之就是,使用箭头函数的this需要考虑它被定义的时候所在函数作用域的this,使用普通函数只用看谁调用了它。
js函数中的this指向的更多相关文章
- js函数中this的指向
本文是我个人对this指向的一些理解,如有不足之处,还望大家可以批评指正,在此先谢过了! 首先,我们来回顾一下ES5里函数的几种调用方式: 1⃣️直接调用 foo(); 2⃣️方法调用 obj.foo ...
- 深入理解JS函数中this指针的指向
函数在执行时,会在函数体内部自动生成一个this指针.谁直接调用产生这个this指针的函数,this就指向谁. 怎么理解指向呢,我认为指向就是等于.例如直接在js中输入下面的等式: console.l ...
- js闭包中的this(匿名函数中的this指向的是windows)
js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...
- JS回调函数中的this指向(详细)
首先先说下正常的this指向问题 什么是this:自动引用正在调用当前方法的.前的对象. this指向的三种情况 1. obj.fun() fun中的this->obj,自动指向.前的对 ...
- JS的一些总结(函数声明和函数表达式的区别,函数中的this指向的问题,函数不同的调用方式,函数也是对象,数组中的函数调用)
一.函数声明和函数表达式的区别: 函数声明放在if——else语句中,在IE8中会出现问题 函数表达式则不会 <script> if(true){ function f1(){ conso ...
- Javascript回调函数中的this指向问题
使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var ob ...
- 改变函数中的 this 指向——神奇的call,apply和bind及其应用
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...
- 在JS函数中执行C#中的函数、字段
1.调用字段 cs文件的代码: ; protected void Page_Load(object sender, EventArgs e) { id = ; } js页面的代码: function ...
- React之函数中的this指向
我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管 ...
- js函数中获得当前被点击元素
问题描述:在html页面中点击<a>或者’按钮‘,进入js中的函数,在js函数中获得被点击那个<a>或‘按钮’元素 解决方法:方法一: html中: <a>标签:& ...
随机推荐
- Burpsuite系列1--自动扫描
第一章 简述 Burpsuite是基于Java的用于web安全的工具,能够进行爬虫.代理.编码.密码爆破等任务,并支持对XSS漏洞.文件包含等漏洞的主动扫描或被动扫描.burpsuite2.0 ...
- docker清空网络配置
docker 网络 故障 相同的 ip 绑定给了 两个 网卡, 需要 清空 网络 ip addr | grep 10.79 inet 10.79.106.1/24 brd 10.79.106.255 ...
- Go语言核心36讲48
你真的很棒,已经跟着我一起从最开始初识Go语言,一步一步地走到了这里. 在这之前的几十篇文章中,我向你一点一点地介绍了很多Go语言的核心知识,以及一些最最基础的标准库代码包.我想,你已经完全有能力独立 ...
- psutil.AccessDenied: psutil.AccessDenied
解决办法 import psutil for proc in psutil.process_iter(): try: print(proc.name()) except (psutil.NoSuchP ...
- SSH(一)架包的引入
一年多未使用了,有些东西真的会忘. 一.ssh的图形化记忆运作流程 二.Struts2.hibernate.spring需要引用的jar包 Struts2: 基本开发:struts-2.3.32\ap ...
- 第2-4-8章 规则引擎Drools实战(1)-个人所得税计算器
目录 9. Drools实战 9.1 个人所得税计算器 9.1.1 名词解释 9.1.2 计算规则 9.1.2.1 新税制主要有哪些变化? 9.1.2.2 资较高人员本次个税较少,可能到年底扣税增加? ...
- 在Cloudreve网盘系统中集成kkFileView在线预览(暂时)
服务器:WindowsServer 2016 Cloudreve 需求方想整一个在小团队内部使用的网盘系统,最终在千挑万选之下选中了Cloudreve. Github地址:https://github ...
- 学生管理系统Python
student1=[ {1:'lucy','age':17,'sex':'n','Pnum':1111111}, {2:'tom','age':17,'sex':'m','Pnum':2222222} ...
- 【离线数仓】Day04-即席查询(Ad Hoc):Presto链接不同数据源查询、Druid建多维表、Kylin使用cube快速查询
一.Presto 1.简介 概念:大数据量.秒级.分布式SQL查询engine[解析SQL但不是数据库] 架构 不同worker对应不同的数据源(各数据源有对应的connector连接适配器) 优缺点 ...
- Go 快速入门指南 - 序言
这本书是写什么的? 这是一本 Go 语言快速入门手册,目标读者是有任一编程语言基础,希望以最快的时间 (比如一个周末) 入门 Go 语言. 这本书应该怎么读? 书中几乎没有较长篇幅的理论知识,更多的是 ...