Question

我对javascript的语法不太熟悉，但我想定义一个类，但关键字不能按我的意愿行事。我想知道原因，谢谢！ javascript代码如下：

var GameUI = function(){
        this.ctx = this.ctx || null;
        this.canvas = document.getElementById('canvas');
        this.chessToMove = {x : -1, y :-1};
        this.style = 'stype_1';
        //this.drawBeginX = 4;
        //this.drawBeginY = 17;
        this.boardStyle = {
            stype_1 : {
                beginX : 4,
                beginY : 17,
                intervalX : 35,
                intervalY : 36,
            },
            stype_2 : {
                beginX : 4,
                beginY : 17,
                intervalX : 10,
                intervalY : 10,
            },
        };

        this.init = function(){
            if(this.canvas && this.canvas.getContext('2d')){
                this.ctx = this.canvas.getContext('2d');

                this.loadImgs();
                //set listeners
                this.canvas.addEventListener('click', this.canvasClick, false);

                return true;
            }

            return false;
        };

        this.setStyle= function(style){
            this.style = style;
        };

        this.canvasClick = function(e){
            //

            let x = e.clientX - this.offsetLeft, y = e.clientY - this.offsetTop;
            //alert('Canvas is clicked! X: '  + x + ",Y: " + y);

            //why this is a canvas obj not a GameUI obj
            console.log(/*'in canvasClick: ' + */this);
        };
    };

Html代码：

<html>

<head>
<title> js test </title>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="ui.js"></script>

<style type="text/css">
    .main{
      margin:0 auto;
      width: 80%;
    }
    #canvas{
      border:1px solid black;
    }

 </style>
</head>

<body>

<div class='main'>
<canvas id='canvas' width='800' height='600'> Your browser is not supported for canvas element </canvas>
</div>
<button> new game </button>
</body>

</html>

如你所见，我定义了一个画布所在的GameUI类，其中有一个名为canvasClick的点击函数。但是，在click函数中，关键字this是一个画布对象而不是GameUI对象，我测试它是由一个日志。这让我很困惑！

Answer 1

事件处理程序在触发元素的上下文中运行，除非被告知采取其他行动。

这可以通过bind进行更改，告诉它在其他一些环境中运行。

this.canvas.addEventListener('click', this.canvasClick.bind(this), false);

现在，在您的点击回调中，this将指向类实例。

Answer 2

萨吕，

PardéfautlaméthodeaddEventListenner，lorsque l'evenementseradeclenché，le contexte（this）de ta fonctionappeléseral'élémenturlequel tuasadtactél'evenement。

Si tuveuxretrouvétonobjet gameUi il tefautdéclarertonévénementdelafaçonsuivante

data[2]

Test et fais moi un retour

javascript中的类定义，关键字“this”不引用该类

2 个答案: