Question

发布一个带有原型的 javascript 对象

2015-12-01

771

javascript jquery ajax oop

要求：

我将创建一个具有方法和属性的 javascript 对象。
我将发布此对象。

我的代码：

        var SessionManager = (function (my) {
            function addUrl(urlHistory) {
                if (!urlHistory) throw new TypeError('"urlHistory" is null or not defined');
                if (!(urlHistory instanceof UrlHistory)) throw new TypeError('"urlHistory" is not an "UrlHistory" object');

                $.ajax({
                    url: '/CollateralManagement/Session/AddUrl',
                    type: 'POST',
                    success: function (result) {
                    },
                    data: { __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(), model: urlHistory }
                });
            }

        my.addUrl = addUrl;

        return my;
        })(SessionManager || {});

        var UrlHistory = function (area, controller, view, params) {
            if (params && !Array.isArray(params)) throw new TypeError('The variable "params" is not null and not an array');

            var me = this;

            me.Area = area;
            me.Controller = controller;
            me.View = view;
            me.Params = Array.isArray(params) ? params : [];
        };

        UrlHistory.prototype.coucou = function () {
            console.log(this);
        };

        UrlHistory.prototype.AddParam = function (key, value) {
            this.Params.push({ "Key": key, "Value": value });

            return this;
        };

        //I run the code with this exemple:
        var uh = new UrlHistory("toto", "tata", "titi");
        uh.AddParam("z", "z").AddParam("a", "a");
        SessionManager.addUrl(uh);

我的对象看起来很棒： UrlHistory {Area：“toto”，Controller：“tata”，View：“titi”，Params：Array[2]

但是当我输入 ajax 方法时，我遇到了此错误：

未捕获的 TypeError：无法读取未定义的属性“push”

我尝试过相同的调用 ajax 而不添加原型，一切正常。

运行 ajax 函数时，会调用我的 2 个方法，但“this”是“Window”而不是“UrlHistory”。

问题：

为什么在发布时调用方法做了吗？
如何发布我的对象？

谢谢

Answer 1

以下代码将调用函数 something

var Test = function(){
  this.name="Hello World";
}
Test.prototype.something = function(){
  console.log(".... something has been called",this);
  throw new Error("what is the stack?");
}

jQuery.post("",Object.create(new Test()))

这是因为 jQuery 代码中的以下行检查您的对象成员是否为函数，如果是，它将调用该函数并使用结果值。

jQuery 使用 jQuery.param 将对象序列化为 http post 或获取参数，因此 jQuery.param(new Test()) 会抛出相同的错误。

您想阻止 jQuery 调用该函数，但我在文档中找不到任何可以覆盖序列化函数的内容，但您可以向 urlHistory 类型添加一个函数以转换为数据：

var urlHistory = function(){
  this.name="Hello World";
}
urlHistory.prototype.something = function(){
  console.log(".... something has been called",this);
  throw new Error("what is the stack?");
};
urlHistory.prototype.toData =  function(){
    var ret = {};
    //this works in your example but if nested objects have functions
    //  it may still fail
    for ( prefix in this ) {
        if(typeof this[ prefix ] !== "function" ){
          ret[ prefix ] = this[ prefix ];
        }
    }
    return ret;
}

console.log("..... working:",jQuery.param((new urlHistory()).toData()))

在您的情况下可以将 toData 添加到 urlHistory，然后在 ajax 调用中执行： model: urlHistory.getData()

Answer 2

我知道这个问题很老了，但是这对我帮助很大，希望它能帮助别人。

当通过 ajax 发送数据时，我首先对其进行了编码和解码

var object //this is your object with a prototype
var send_data = $.parseJSON(JSON.stringify(object)); //this encodes and decodes 

$.ajax({
     url: '/someurl',
     type: 'post',
     data: send_data
})