<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <button>按钮</button>

    <script>

        // this指向问题

        var that;

        var _that;

        class Fa {

        //constructor 里面的this指向的是 创建的实例对象(ff)

            constructor(x, y){

                that = this;

                this.x = x;

                this.y = y;

                this.btn = document.querySelector('button');

                this.btn.onclick = this.sing;

            }

            sing(){

                // this指向的是 btn这个按钮 因为这个按钮调用了这个函数

                console.log("11111111111");

                console.log(that.x);

                // that 里面存储的是constructor里面的this

                // console.log(this.x);

            }

            sum(){

            //这个sum 里面的this指向的是实例对象ff 因为ff调用了这个函数(this指向sum方法的调用者ff)

                _that = this;

                console.log(this.x + this.y);

            }

        }

        var ff = new Fa(1,2);

        console.log(that === ff); // true

        // console.log(ff);

        // // Fa {x: 1, y: 2}

        ff.sum();

        console.log(_that === ff); // true

    </script>

</body>

</html>

JavaScript、ES6中类的this指向问题的更多相关文章

  1. [转]JavaScript ES6 class指南

    [转]JavaScript ES6 class指南 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...

  2. ES6 箭头函数 this 指向

    ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...

  3. JavaScript ES6中export及export default的区别

    相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函 ...

  4. JavaScript ES6 新特性详解

    JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const ,  let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...

  5. JavaScript ES6 核心功能一览

    JavaScript 在过去几年里发生了很大的变化.这里介绍 12 个你马上就能用的新功能. JavaScript 历史 新的语言规范被称作 ECMAScript 6.也称为 ES6 或 ES2015 ...

  6. JavaScript ES6中export及export default的区别以及import的用法

    本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632,未经博主允许不得转载. 相信很多人都使用过export.e ...

  7. JavaScript ES6 核心功能一览（转）

    原文地址:Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+) 原文作者:Adrian Mejia 译文出自:掘金翻 ...

  8. JavaScript ES6 promiss的理解。

    本着互联网的分享精神,我将我对promise的理解分享给大家. JavaScript ES6的promise方法主要应用在处理异步函数返回的结果,注意他不是将异步函数转换为同步函数,而是等异步函数有结 ...

  9. JavaScript es6 class类的理解。

    本着互联网的分享精神,在本篇文章我将会把我对JavaScript  es6 class类的理解分享给大家. JavaScript 类主要是 JavaScript 现有的基于原型的继承的语法糖. 类语法 ...

随机推荐

  1. ubantu apache2.4.6 apache https配置

    [root@VM_58_118_centos dbback]# a2enmod ssl [root@VM_58_118_centos dbback]# service apache2 restart ...

  2. php命令行工具

    https://jingyan.baidu.com/article/37bce2beb6e5681002f3a20f.html

  3. Qt 中文问题

    Qt windows/linux跨平台中文编码解决 系统环境:windows8.1 / ubuntu 14.04Qt5.4.2 QtCreator 3.4.1 编码设置:QtCreator:工具/选项 ...

  4. 安装JDK ，提示 错误1316 指定的账户已存在

    基于情况: 安装了一个JDK 后,在文件目录中删除了相关文件,之后再次安装,提示  错误1316 指定的账户已存在 造成原因:安装JDK,相当于安装了一个软件,要使用系统的软件卸载功能卸载,不能只删除 ...

  5. Oracle In子句

    Oracle In子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,您将学习如何使用Oracle IN运算符来确定值是否与列表或子查询中的任 ...

  6. multipages-generator今日发布?！妈妈再也不用担心移动端h5网站搭建了！

    本文适合的读者?‍?‍?‍? 现在在手淘,京东,今日头条,美柚等过亿用户的手机app中的,都常见h5网页,他们有更新快,灵活,便于分享和传播的特性.这里有他们中的几个h5的例子:(手淘,美柚).这些a ...

  7. 微信小程序、SSL证书、开启服务器TSL1.0、TSL1.1、TSL1.2服务

    微信小程序.SSL证书.开启服务器TSL1.0.TSL1.1.TSL1.2服务 https://blog.csdn.net/qq_32933615/article/details/70143105

  8. RAC容灾演练

    RAC容灾演练:在节点一进行验证:步骤 操作命令关闭步骤 检测RAC集群资源状态 crsctl status resource -t 关闭监听 srvctl stop listener -n < ...

  9. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_01 Collection集合_5_迭代器的代码实现

    迭代器的类型和collection一样.都是String类型的 判断集合内是不是有元素 取出第一个元素 多次next获取所有的值 没有元素,再去取就会抛出异常. 适应while for循环的格式了解一 ...

  10. 红米note2 刷机 注意问题：

    其他的百度都有,用刷线宝刷 红米note2 刷机   注意问题: 关机状态线下,链接电脑,按着音量下键不松手,按电源键开机后松开,即进入刷机模式. 其中,红米,红米1s移动,红米note移动3g/联通 ...