JavaScript、ES6中类的this指向问题

Stella981
• 阅读 689
<!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>
点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
vue 2.0 第一个坑,组件不显示的问题
<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<titleappcomponent</title</head<body<ol<todoitem</todoit
Easter79 Easter79
3年前
svg自适应写法
svg自适应写法<pre<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<titleDocument</title</head<body<divstyle"width:30%;height:3.6rem;"<svg
Wesley13 Wesley13
3年前
JS高级
<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<title</title</head<body<script//为内置对象添加原型方法//实例中的方
Stella981 Stella981
3年前
JavaScript DOM操作案例自定义属性的设置跟获取
<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<title</title<styleli{liststyletype:none;
Stella981 Stella981
3年前
JavaScript DOM操作案例点击按钮显示图片
1<!DOCTYPEhtml2<htmllang"en"3<head4<metacharset"UTF8"5<title</title6</head7<body8<inputtype"button"v
Wesley13 Wesley13
3年前
HTML5 基础知识(二)
<!DOCTYPEhtml<htmllang"en"<head<metacharset"utf8"/<title</title</head<body</body</html<!DOCTYPEhtml
Stella981 Stella981
3年前
ES6中this的三种用法
<!DOCTYPEhtml<htmllang"en"<head   <metacharset"UTF8"   <titleDocument</title</head<body<scripttype"text/javascript"varobj{   a:5,
Stella981 Stella981
3年前
JavaScript设置倒计时效果
<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<title倒计时效果</title</head<body<formname"myForm"<inputtype"t
Stella981 Stella981
3年前
Highcharts教程
1.html页面写法<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<title第一个Highcharts图表</title<!引入jquery.js<scrip
Stella981 Stella981
3年前
JavaScript语法基础
字符串<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<title字符串语法</title</head<body<scripttype"text/javascrip