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-value ）时，属性更新总是直接对所涉及的对象进行，而不是其原型。原型对象上是否存在类似命名的属性并不重要。

Answer 3

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

您可以将所有函数移动到Test.prototype，并且应该有一个构造函数start with a capital（Test而不是test）

有关构造函数和原型的更多信息，请访问Prototypical inheritance - writing up

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);

javascript对象原型属性不更新

5 个答案: