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不同指向问题的更多相关文章

  1. js原型浅谈理解

    之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享 ...

  2. 浅谈js的类数组对象arguments

    类数组对象:arguments总所周知,js是一门相当灵活的语言.当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的 ...

  3. (C++)浅谈多态基类析构函数声明为虚函数

    主要内容: 1.C++类继承中的构造函数和析构函数 2.C++多态性中的静态绑定和动态绑定 3.C++多态性中析构函数声明为虚函数 1.C++类继承中的构造函数和析构函数 在C++的类继承中, 建立对 ...

  4. 浅谈Perl的类、包、模块与面对对象编程

    http://blog.chinaunix.net/uid-27464093-id-3308003.html Perl面向对象 Perl面向对象学习例子实例代码教程 - 在我们了解perl的面向对象的 ...

  5. 【JAVA】浅谈java枚举类

    一.什么情况下使用枚举类? 有的时候一个类的对象是有限且固定的,这种情况下我们使用枚举类就比较方便? 二.为什么不用静态常量来替代枚举类呢? public static final int SEASO ...

  6. 浅谈Java工具类CommonUtils的使用

    package com.xushouwei.cn; import java.util.HashMap; import java.util.Map; import org.junit.Test; imp ...

  7. 浅谈java枚举类

    一.什么情况下使用枚举类? 有的时候一个类的对象是有限且固定的,这种情况下我们使用枚举类就比较方便? 二.为什么不用静态常量来替代枚举类呢? public static final int SEASO ...

  8. 线程池+同步io和异步io(浅谈)

    线程池+同步io和异步io(浅谈) 来自于知乎大佬的一个评论 我们的系统代码从同步方式+线程池改成异步化之后压测发现性能提高了一倍,不再有大量的空闲线程,但是CPU的消耗太大,几乎打满,后来改成协程化 ...

  9. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

随机推荐

  1. 普利姆算法(prim)

    普利姆算法(prim)求最小生成树(MST)过程详解 (原网址) 1 2 3 4 5 6 7 分步阅读 生活中最小生成树的应用十分广泛,比如:要连通n个城市需要n-1条边线路,那么怎么样建设才能使工程 ...

  2. 树形DP 学习笔记

    树形DP学习笔记 ps: 本文内容与蓝书一致 树的重心 概念: 一颗树中的一个节点其最大子树的节点树最小 解法:对与每个节点求他儿子的\(size\) ,上方子树的节点个数为\(n-size_u\) ...

  3. 【题解】 [GZOI2017]小z玩游戏

    题目戳我 \(\text{Solution:}\) 考虑建图.操作可以看作对\(1\)进行的操作,于是有以下运行过程: \(1\to w[i]\to e[i]\to...\) 考虑倍数,一个数可以走到 ...

  4. aptitude命令

    命令 作用 aptitude update 更新可用的包列表 aptitude upgrade 升级可用的包 aptitude dist-upgrade 将系统升级到新的发行版 aptitude in ...

  5. Spring Boot第七弹,别再问我拦截器如何配置了!!!

    持续原创输出,点击上方蓝字关注我吧 前言 上篇文章讲了Spring Boot的WEB开发基础内容,相信读者朋友们已经有了初步的了解,知道如何写一个接口. 今天这篇文章来介绍一下拦截器在Spring B ...

  6. 用vscode写python,from引用本地文件的时候老是有红色波浪线,很不爽

    前言 出于一些原因,国际关系等等,最近想把开发工具切换到一些免费开源的工具上面,先尝试了在vscode上搭建python环境,总体还是很简单的, 网上教程很多,vscode本身的插件也很丰富,可惜了国 ...

  7. mysql5.7.23 解压版 密码忘记了咋办??

    mysql 5.7.23  err文件: 查看log中保存的 密码 记下密码,重新启动MySQL服务,并进入CMD命令行,在此使用mysql -u root -p登陆,键入密码 进入数据库后,使用se ...

  8. kali linux 换国内源

    输入命令 vim /etc/apt/sources.list 添加国内源 #中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-f ...

  9. selenium等待机制学习笔记

    转载至: https://blog.csdn.net/huilan_same/article/details/52544521 1. 强制等待 第一种也是最简单粗暴的一种办法就是强制等待sleep(x ...

  10. 自动化遍历-appcrawler

    下载appclawler 下载地址:https://pan.baidu.com/s/1dE0JDCH#list/path=%2F 查看帮助文档: java -jar appcrawler-2.4.0- ...