通俗易懂浅谈理解ES6类this不同指向问题
1. class Btn{ //定义的一个类
constructor(id){
// constructor是一个构造函数,是一个默认方法,通过 new
命令创建对象实例时,自动调用该方法。一个类必须有 constructor
方法,如果没有显式定义,一个默认的 consructor
方法会被默认添加。
this.btn = document.querySelector(id); //这里的this指向了实例对象btn
}
click(){
console.log(this); //因为this是指向了实例对象btn,所以输出的是传进的参数input
}
}
var btn = new Btn('input');
2.class Btn{
constructor(id){
this.btn = document.querySelector(id); //指向的是实例对象
this.btn.onclick = this.click;
}
click(){
console.log(this);
//这里不点击btn的情况下输出的是div,因为这个this也被第二个实例对象div给调用了,谁调用this就指向谁。
当你点击btn事这里的this指向btn,因为在构造函数里面btn调用了click这个方法,点击btn输出的是input
}
}
var btn = new Btn('input');
var div = new Btn('div'); //这是第二个实例对象
div.click(); //调用div的这个实例对象
3. class Btn{
constructor(x,y){
this.x = x;
this.y = y;
this.btn = document.querySelector('input');//指向的实例对象
this.btn.onclick = this.click;
}
click(){
console.log(this);
//这里的this指向的是btn,在构造函数btn调用了click这个方法
console.log(this.x+this.y);
//这里输出的是NaN,因为这里的this被btn调用,btn里没有x和y
}
}
var bbn = new Btn(10,2);
var that;
4. class Btn{
constructor(x,y){
that = this;
this.x = x;
this.y = y;
this.btn=document.querySelecctor('input');
this.btn.onclick = this.click;
}
click(){
console.log(this);
//这里的this指向的是btn,在构造函数btn调用了click这个方法
console.log(that.x+that.y); //这里会输出12
//因为这里this指向了btn,所以需要用到constructor里面的this,如果用this会输出NaN,用that声明一个全局变量,这里就用that代替this
}
}
var bbn = new Btn(10,2);
通俗易懂浅谈理解ES6类this不同指向问题的更多相关文章
- js原型浅谈理解
之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享 ...
- 浅谈js的类数组对象arguments
类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...
- (C++)浅谈多态基类析构函数声明为虚函数
主要内容: 1.C++类继承中的构造函数和析构函数 2.C++多态性中的静态绑定和动态绑定 3.C++多态性中析构函数声明为虚函数 1.C++类继承中的构造函数和析构函数 在C++的类继承中, 建立对 ...
- 浅谈Perl的类、包、模块与面对对象编程
http://blog.chinaunix.net/uid-27464093-id-3308003.html Perl面向对象 Perl面向对象学习例子实例代码教程 - 在我们了解perl的面向对象的 ...
- 【JAVA】浅谈java枚举类
一.什么情况下使用枚举类? 有的时候一个类的对象是有限且固定的,这种情况下我们使用枚举类就比较方便? 二.为什么不用静态常量来替代枚举类呢? public static final int SEASO ...
- 浅谈Java工具类CommonUtils的使用
package com.xushouwei.cn; import java.util.HashMap; import java.util.Map; import org.junit.Test; imp ...
- 浅谈java枚举类
一.什么情况下使用枚举类? 有的时候一个类的对象是有限且固定的,这种情况下我们使用枚举类就比较方便? 二.为什么不用静态常量来替代枚举类呢? public static final int SEASO ...
- 线程池+同步io和异步io(浅谈)
线程池+同步io和异步io(浅谈) 来自于知乎大佬的一个评论 我们的系统代码从同步方式+线程池改成异步化之后压测发现性能提高了一倍,不再有大量的空闲线程,但是CPU的消耗太大,几乎打满,后来改成协程化 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
随机推荐
- 普利姆算法(prim)
普利姆算法(prim)求最小生成树(MST)过程详解 (原网址) 1 2 3 4 5 6 7 分步阅读 生活中最小生成树的应用十分广泛,比如:要连通n个城市需要n-1条边线路,那么怎么样建设才能使工程 ...
- 树形DP 学习笔记
树形DP学习笔记 ps: 本文内容与蓝书一致 树的重心 概念: 一颗树中的一个节点其最大子树的节点树最小 解法:对与每个节点求他儿子的\(size\) ,上方子树的节点个数为\(n-size_u\) ...
- 【题解】 [GZOI2017]小z玩游戏
题目戳我 \(\text{Solution:}\) 考虑建图.操作可以看作对\(1\)进行的操作,于是有以下运行过程: \(1\to w[i]\to e[i]\to...\) 考虑倍数,一个数可以走到 ...
- aptitude命令
命令 作用 aptitude update 更新可用的包列表 aptitude upgrade 升级可用的包 aptitude dist-upgrade 将系统升级到新的发行版 aptitude in ...
- Spring Boot第七弹,别再问我拦截器如何配置了!!!
持续原创输出,点击上方蓝字关注我吧 前言 上篇文章讲了Spring Boot的WEB开发基础内容,相信读者朋友们已经有了初步的了解,知道如何写一个接口. 今天这篇文章来介绍一下拦截器在Spring B ...
- 用vscode写python,from引用本地文件的时候老是有红色波浪线,很不爽
前言 出于一些原因,国际关系等等,最近想把开发工具切换到一些免费开源的工具上面,先尝试了在vscode上搭建python环境,总体还是很简单的, 网上教程很多,vscode本身的插件也很丰富,可惜了国 ...
- mysql5.7.23 解压版 密码忘记了咋办??
mysql 5.7.23 err文件: 查看log中保存的 密码 记下密码,重新启动MySQL服务,并进入CMD命令行,在此使用mysql -u root -p登陆,键入密码 进入数据库后,使用se ...
- kali linux 换国内源
输入命令 vim /etc/apt/sources.list 添加国内源 #中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-f ...
- selenium等待机制学习笔记
转载至: https://blog.csdn.net/huilan_same/article/details/52544521 1. 强制等待 第一种也是最简单粗暴的一种办法就是强制等待sleep(x ...
- 自动化遍历-appcrawler
下载appclawler 下载地址:https://pan.baidu.com/s/1dE0JDCH#list/path=%2F 查看帮助文档: java -jar appcrawler-2.4.0- ...