javascript对象原型属性未更新

Question

我是javascript新手，因此在创建对象时遇到一些问题，然后通过原型更改其属性。

这是我的代码：

function test() {
    this.xCssClass = "placeholder";
    this.init = function () {
        var btn = document.createElement("div");
        btn.className = this._CssClass;
        this.Node = btn;
    }
    this.Node;
    this.CreateInterface = function () {
        var btn = document.createElement("div");
        this.Node = btn;
    }
    this.init();
}
test.prototype.CssClass = {
    get CssClass() {
        return this._CssClass;
    },
    set CssClass(arg){
        this.xCssClass = arg;
        this.className = "args";
    }
}
var x = new test();
document.body.appendChild(x.Node);

x.xCssClass="GHR"
Debug.WriteLine(x.xCssClass);

当我尝试重新定义cssclass时，它会重新定义，但不会更新添加到Dom中的对象。 我希望能够去： x.xCssClass="some css class"并在javascript和dom中都更新x对象。 现在，它仅在javascript中更新。 我做错了什么？ 我会混淆实例吗？ 任何帮助，将不胜感激。 谢谢

Answer 1

将其追加到DOM后，您需要手动对其进行更新。

您可以执行以下操作：

function test() {
    this.xCssClass = function(class){
      this.Node.className += ' '+ class;
    };
    this.init = function () {
        var btn = document.createElement("div");
        btn.className = this._CssClass;
        this.Node = btn;
    }
    this.Node;
    this.CreateInterface = function () {
        var btn = document.createElement("div");
        this.Node = btn;
    }
    this.init();
}

现在，您可以执行以下操作：

x.xCssClass("GHR");

Answer 2

当属性引用出现在分配的左侧（作为l值 ）时，则总是直接对涉及的对象而不是其原型进行属性更新。 原型对象上是否已经有一个类似名称的属性，这无关紧要。

Answer 3

要更新Element，您需要创建一个类似Test.prototype.setCssClass的函数，并在该函数中设置this.btn的类。 最后的链接中说明了它的值。

您可以将所有函数移至Test.prototype，并应具有以大写字母开头的构造函数（Test而不是test）

更多有关构造函数和原型的信息。 原型继承-写出来

Answer 4

让我们逐行...

// Okay cool a constructor function
function test() {
    // Setting your class
    this.xCssClass = "placeholder";
    // Hmmmm why do you have an init here ... okay sure w/e.
    this.init = function () {
        // create div element
        var btn = document.createElement("div");
        btn.className = this._CssClass;
        // Okay you set it as a property node.
        this.Node = btn;
    }
    this.Node;
    // Uh what's this for
    this.CreateInterface = function () {
        var btn = document.createElement("div");
        this.Node = btn;
    }
    // Ok
    this.init();
}
// Setting a property on a prototype! Okay.
test.prototype.CssClass = {
    // Wtf? This is weird.
    get CssClass() {
        return this._CssClass;
    },
    // Wtf? Also weird. 
    set CssClass(arg){
        this.xCssClass = arg;
        this.className = "args";
    }
}
var x = new test();
document.body.appendChild(x.Node);

// Uh xCssClass isn't even a property in x's prototype ...
x.xCssClass="GHR"
Debug.WriteLine(x.xCssClass);

我建议阅读有关JavaScript原型的文章。 我认为您想要的是：

test.prototype.getCssClass = function() {
  ...
};

test.prototype.setCssClass = function(arg){
  ...
};

Answer 5

我通过使用Object.defineProperty原型方法解决了它。 以下是摘录了工作按钮对象的代码。 谢谢您的帮助：)

function Button() {
    this.Node;
    this.Target;
    this._CssClass;
    this._ID = "";
    this._OnClick = "";
    this._Text = "";
    this._data = "";
    this._IsEnable =true;//Can be set to false
    this._Visible = true;//Can be set to false
    this._ToolTip = "";
    this.NodeCreate = function () {
        Debug.WriteLine("node created");
        var btn = document.createElement("div");
        this.Node = btn;
    }
    this.NodeCreate();
}
Object.defineProperty(Button.prototype,"CssClass",{//Sets and gets the css class
    get: function () {
        return this._CssClass;
    },
    set:function(args){
        Debug.WriteLine("set");
        this._CssClass = args;
        this.Node.className = args;
    }
});
Object.defineProperty(Button.prototype, "ToolTip", {//Sets and gets the ToolTip
    get: function () {
        return this._ToolTip;
    },
    set: function (args) {
        this._ToolTip = args;
        this.Node.title = args;
    }
});
Object.defineProperty(Button.prototype, "ID", {//Sets the css ID
    get: function () {
        return this._ID;
    },
    set: function (args) {
        this._ID = args;
        this.Node.id = args;
    }
});
//Mouse and Touch Event Handlers
Object.defineProperty(Button.prototype, "OnClick", {//Sets the onclick behavior
    set: function (args) {
        this.Node.onclick = args;
    }
});
Object.defineProperty(Button.prototype, "OnMouseUp", {//Sets the mousedown behavior
    set: function (func) {
        this.Node.onmouseup =func;
    }
});
Object.defineProperty(Button.prototype, "OnMouseDown", {//Sets the mousedown behavior
    set: function (func) {
        this.Node.onmousedown = func;
    }
});
Object.defineProperty(Button.prototype, "OnMouseEnter", {//Sets the mousedown behavior
    set: function (func) {
        this.Node.onmouseover = func;
    }
});
Object.defineProperty(Button.prototype, "OnMouseLeave", {//Sets the mousedown behavior
    set: function (func) {
        this.Node.onmouseout = func;
    }
});
Object.defineProperty(Button.prototype, "OnMouseWheel", {//Sets the mousedown behavior !Currently broken!
    set: function (func) {
        this.Node.addEventListener("mousewheel", func, false);//IE9, Chrome, Safari, Opera
        this.Node.addEventListener("DOMMouseScroll", func, false);//Firefox
    }
});

var x = new Button();
document.body.appendChild(x.Node);
x.CssClass = "productBtn";
x.ToolTip = "I am a tooltip";
x.ID = "Product ID";
Debug.WriteLine("x.cssClass: " + x.CssClass);
x.OnMouseUp =new System.EventHandler(clickTest);
x.OnMouseEnter = new System.EventHandler(clickTest);