<!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. webkit内核的浏览器常见7种分别是..

    Google Chrome Safari 遨游浏览器 3.x 搜狗浏览器 阿里云浏览器 QQ浏览器 360浏览器 ...

  2. 转：HTML5 History API 详解

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  3. asp.net上传超大文件

    HTML部分 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx. ...

  4. Leetcode 14. Longest Common Prefix(水)

    14. Longest Common Prefix Easy Write a function to find the longest common prefix string amongst an ...

  5. python之assert

    作用 assert用来验证一个表达式是否正确,如果正确则程序向下执行,如果错误则报错,其中报错信息可以自定义. 例子 表达式没有错误的情况 >>> assert mul(2, 3) ...

  6. 你的MySQL服务器开启SSL了吗？（转载）

    最近,准备升级一组MySQL到5.7版本,在安装完MySQL5.7后,在其data目录下发现多了很多.pem类型的文件,然后通过查阅相关资料,才知这些文件是MySQL5.7使用SSL加密连接的.本篇主 ...

  7. Centos7 yum安装OpenLDAP(普通用户可以更改密码)

    环境 系统版本:centos7.4 openldap版本2.4 安装和配置 安装并启动服务 安装: yum install openldap openldap-servers openldap-cli ...

  8. Linux下修改mysql root密码

    1.修改MySQL的配置文件(默认为/etc/my.cnf),在[mysqld]下添加一行skip-grant-tables 2.保存配置文件后,重启MySQL服务 service mysqld re ...

  9. 高通camera基本代码架构【转】

    本文转载自:http://blog.sina.com.cn/s/blog_c0de2be70102vyn1.html 1  camera基本代码架构 高通平台对于camera的代码组织,大体上还是遵循 ...

  10. C# winform 键盘全局事件

    本文转载自:http://www.cnblogs.com/yukaizhao/archive/2010/12/14/winform_keyup.html 在winform程序中给form添加了keyu ...