JavaScript中的this绑定丢失及解决方法
经常犯的错误:混淆了this绑定规则。
代码如下:
var obj = {
id: 'vexekefo',
cool() {
console.log(this.id);
}
};
var id = 'someone';
obj.cool(); // vexekefo
setTimeout(obj.cool, 100); // someone
为什么是这种输出结果?
setTimeout
内置函数让this绑定丢失了,不再是obj对象中的id值。因此输出全局作用域下的id值而不是obj.id
。
2种解决方法:箭头函数和bind()
箭头函数的原理是:用当前的词法作用域覆盖了this 本来的值。
bind则是:函数的this被bind的第一个参数指定。
// 箭头函数
var obj = {
id: 'vexekefo',
cool() {
console.log(this.id);
}
};
var id = 'someone';
obj.cool();
setTimeout(() => {obj.cool()}, 100);
// bind()
var obj = {
id: 'vexekefo',
cool: function(){
console.log(this.id);
}
};
var id = 'someone';
obj.cool();
setTimeout(obj.cool.bind(obj), 100);
JavaScript中的this绑定丢失及解决方法的更多相关文章
- element-ui 中 switch 开关绑定number 的解决方法
虽然element-ui 的文档中说明 v-model的值可以是 boolean / string / number 三种类型 , (文档在此)https://element.eleme.cn/#/z ...
- Linux系统在启动过程中grub引导文件丢失的解决方法
在/boot/grub2目录下有一个grub.cfg文件:该文件主要是用来自动地引导系统启动内核程序和系统的初始化程序. 问题一:当系统在启动的情况下,我们不小心删除/boot/grub2/grub. ...
- iis7中session丢失的解决方法小结
这篇文章主要介绍了在windows server 2008系统中,session丢失的解决方法,供大家学习参考 问题描述: Windows Server 2008 +IIS +ASP.net +SQL ...
- JavaScript中this的绑定规则
JavaScript中this的绑定规则 前言 我们知道浏览器运行环境下在全局作用域下的this是指向window的,但是开发中却很少在全局作用域下去使用this,通常都是在函数中进行使用,而函数使用 ...
- javascript常见的20个问题与解决方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [讨论] 这几天来封装Win7用户配置文件丢失的解决方法个人心得
[讨论] 这几天来封装Win7用户配置文件丢失的解决方法个人心得 prerouting 发表于 2010-5-9 16:50:46 https://www.itsk.com/thread-36634- ...
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- 记一次SpringBoot 开发中所遇到的坑和解决方法
记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型出现空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Inte ...
- 编程中遇到的Python错误和解决方法汇总整理
这篇文章主要介绍了自己编程中遇到的Python错误和解决方法汇总整理,本文收集整理了较多的案例,需要的朋友可以参考下 开个贴,用于记录平时经常碰到的Python的错误同时对导致错误的原因进行分析, ...
随机推荐
- DevExpress的LookUpEdit怎样不显示列名
场景 DevExpress的下拉框控件LookUpEdit的使用.添加item选项值.修改默认显示值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/articl ...
- .net core控制台程序中使用原生依赖注入
如果要在程序中使用DbContext,则需要先在Nuget中安装Microsoft.EntityFrameworkCore.SqlServer using ConsoleApp1.EntityFram ...
- centos安装与配置keepalived+nginx高可用
一.安装启动keepalived 1.下载keepalived 在centos系统中,用wget下载最新版本: mkdir tool cd tool wget https://www.keepaliv ...
- javascript for循环+异步请求导致请求顺序不一致
工作中遇到一个问题 for循环,再把循环出来的ID再进行二次请求 这就导致一个问题 请求结果返回顺序不一致 原因:异步请求会把回调事件放入微任务事件队列,宏任务执行完毕再执行微任务,具体参考事件队列机 ...
- Java之缓冲流(字节/字符缓冲流)
概述 缓冲流,也叫高效流,是对4个基本的 FileXxx 流的增强,所以也是4个流,按照数据类型分类: 字节缓冲流: BufferedInputStream , BufferedOutputStrea ...
- 在Mac上安装JDK1.8及环境变量配置
今天我们来讲一讲,在Mac上的JDK安装. 第一步,打开终端输入 java -version 看看是否本地已经安装了JDK,如果未安装,OK,继续- 第二步,到官网下载JDK.勾选“Accept Li ...
- Java DAO 模式
转载自https://www.runoob.com/note/27029 DAO 模式 DAO (DataAccessobjects 数据存取对象)是指位于业务逻辑和持久化数据之间实现对持久化数据的访 ...
- netcore 2.2 使用 AutoMapper 实现实体之间映射
一.什么是AutoMapper? AutoMapper是一个简单的对象映射框架(OOM),将一个对象映射到另一个对象. 二.AutoMapper的好处 以前的时候我们将DTO对象转换为Model对象时 ...
- MySQL的数据库定义语法
创建数据库 在MySQL中,使用 CREATE DATABASE 或 CREATE SCHEMA 语句创建数据库 语法结构: CREATE {DATABASE|SCHEMA}[IF NOT EXIST ...
- [document.cookie]为什么cookie不在window下的呢.奇怪了[未完待续]
什么是cookie,怎么就叫cookis,它能干嘛 我猜吧,就是登录页面的时候传值,二次登录的时候可以给你说句'hello xxx'; 下面这堆比较啰嗦,随意看吧 //cookie 用户储存在用户本地 ...