Question

我＆＃34;扭曲＆＃34; d3在类中拖动代码，当我尝试在不同的类方法中使用类字段时，this出现问题。

这是一段代码：

'use strict';

class D3DragHandler {

    constructor(link, datas) {
        this.drag = null;
        this.links = link;
        this.datas = datas;
        this.zadragged = null;
        //        console.log(this.link);
    }

    saveNodePosition() {

        var postData = {};
        var adragged = this.zadragged; //ERROR HERE

        postData.id = datas[adragged].id;
        postData.x = datas[adragged].dx + datas[adragged].x;
        postData.y = datas[adragged].dy + datas[adragged].y;

        d3.xhr('/index.php?option=com_myrod&task=ajax.save&format=json&raw=true&token=' + token + "&data=" + JSON.stringify({
                "data": postData
            }))
        .header("Content-Type", "application/json")
        .post("",
            function (err, rawData) {
            var data = JSON.parse(rawData);
            console.log("got response", data);
        });

    }

    setDragged(value) {
        console.log(value);
        this.zadragged = value; //ERROR HERE
        //var v = this.zadragged;
    }

    init() {
        var link = this.links;
        var datas = this.datas;
        var saveFunc = this.saveNodePosition;

        var draggedKeyFunc = this.setDragged;

        // Define drag beavior
        this.drag = d3.behavior.drag()
            .on("drag", function (d) {
                var x = d3.event.x;
                var y = d3.event.y;

                d3.select(this).attr("transform", "translate(" + x + "," + y + ")");

                //adragged = d.key;
                draggedKeyFunc(d.key);

                datas[d.key].dx = d3.event.x;
                datas[d.key].dy = d3.event.y;
                link.update();

            })
            .origin(function () {
                var t = d3.transform(d3.select(this).attr("transform"));

                svg.select("text.position").text(function (d) {
                    return Math.round(d.value.x) + ":" + Math.round(d.value.y);
                })

                return {
                    x: t.translate[0],
                    y: t.translate[1]
                };

            })
            .on("dragend", function () {
                var d = d3.event.sourceEvent;

                console.log(d);

                saveFunc(d);
            });
        return this.drag;
    }

}

我在代码中发表评论以显示我遇到错误的位置，这很奇怪，因为我在其他方法中使用this并且它工作得很好。但是在这个字符串中我得到错误：

TypeError: this is undefined

这很奇怪，我希望所有代码必须以相同的方式工作，但也许我在这里错过了什么？

setDragged(value)方法是类方法所以我希望this是类本身。

Answer 1

你的问题是类方法没有绑定到任何特定的对象，所以this指的是它们被称为方法的任何对象，所以当你这样做时：

var draggedKeyFunc = this.setDragged;

// ... 

draggedKeyFunc(d.key);

该对象关联消失，this在严格模式下为undefined，或在严格模式之外为全局对象。

选项包括将对象作为方法调用：

var dragHandler = this;

// ... 

dragHandler.draggedKeyFunc(d.key);

或创建绑定功能：

var draggedKeyFunc = this.setDragged.bind(this);

// ... 

draggedKeyFunc(d.key);

Answer 2

如果在构建过程中包含babel插件，则可以使用如下所示的类属性

setDragged = (value) => {
    console.log(value);
    this.zadragged = value; //ERROR HERE
}

JavaScript`his`在不同的类方法中有所不同

2 个答案: