为什么这个JavaScript原型函数破坏了jQuery?

本文介绍了为什么这个JavaScript原型函数破坏了jQuery?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题:

将以下代码添加到html页面后，我得到:

As soon as I add the below code to my html page, I get:

Line: 4
Error: Object doesn't support the property or method "exec".

这是导致错误的原型:

    Object.prototype.allKeys = function () {
        var keys = [];
        for (var key in this)
        {
            // Very important to check for dictionary.hasOwnProperty(key)
            // otherwise you may end up with methods from the prototype chain..
            if (this.hasOwnProperty(key))
            {
                keys.push(key);
                //alert(key);
            } // End if (dict.hasOwnProperty(key))

        } // Next key

        keys.sort();
        return keys;
    }; // End Extension Function allKeys

这是重现该错误所需的最低代码(正在浏览的浏览器:IE9):

And this is the minimum code required to reproduce the error (Browser in question: IE9):

<!DOCTYPE html>
<html>
<head>
    <title>TestPage</title>

    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>


    <script type="text/javascript">
        /*
        Object.prototype.getName111 = function () {
            var funcNameRegex = /function (.{1,})\(/;
            var results = (funcNameRegex).exec((this).constructor.toString());
            return (results && results.length > 1) ? results[1] : "";
        }; // End Function getName
        */

        Object.prototype.allKeys = function () {
            var keys = [];
            for (var key in this)
            {
                // Very important to check for dictionary.hasOwnProperty(key)
                // otherwise you may end up with methods from the prototype chain..
                if (this.hasOwnProperty(key))
                {
                    keys.push(key);
                    //alert(key);
                } // End if (dict.hasOwnProperty(key))

            } // Next key

            keys.sort();
            return keys;
        }; // End Extension Function allKeys

    </script>

</head>
<body>

    <select id="selLayers" name="myddl">
      <option value="1">One</option>
      <option value="2">Twooo</option>
      <option value="3">Three</option>
      <option value="4">Text1</option>
      <option value="5">Text2</option>
    </select>


    <script type="text/javascript">

        //var dict = { "de": { "Text1": "Ersetzung 1", "Text2": "Ersetzung 2" }, "fr": { "Text1": "Replacement 1", "Text2": "Réplacement 2" }, "it": { "Text1": "Replacemente 1", "Text2": "Replacemente 2" }, "en": { "Text1": "Replacement 1", "Text2": "Replacement 2"} };
        /*
        var languages = dict.allKeys();


        for (var j = 0; j < languages.length; ++j)
        {
            var strCurrentLanguage = languages[j];
            var dictReplacements = dict[strCurrentLanguage]
            var keys = dictReplacements.allKeys();

            //alert(JSON.stringify(dictReplacements));
            //alert(JSON.stringify(keys));


            for (var i = 0; i < keys.length; ++i) {
                var strKey = keys[i];
                var strReplacement = dictReplacements[strKey];

                alert(strKey + " ==> " + strReplacement);
                //alert('#selLayers option:contains("' + strKey + '")');
                //$('#selLayers option:contains("' + strKey + '")').html(strReplacement);
                //$('#selLayers option:contains("Text1")').html("foobar");


            }
        }
        */


        $('#selLayers option:contains("Twooo")').text('Fish');


        //alert(dict.allKeys());
        //alert(dict["de"]["abc"]);




        /*

        $('#selLayers option[value=2]').text('Fish');
        $('#selLayers option:contains("Twooo")').text('Fish');
        $('#selLayers option:contains("Twooo")').html('&Eacute;tage');
        // http://stackoverflow.com/questions/7344220/jquery-selector-contains-to-equals

        $("#list option[value=2]").text();

        $("#list option:selected").each(function () {
            alert($(this).text());
        });

        $("#list").change(function() {
            alert($(this).find("option:selected").text()+' clicked!');
        });

        */

    </script>

</body>
</html>

我尝试重命名原型函数，以防万一它与任何jquery原型冲突，但这根本无济于事.

I tried renaming the prototype function, just in case it conflicts with any jquery prototype, but that doesn't help at all.

推荐答案

因为这将为每个对象添加一个可枚举的项目. Sizzle(jQuery使用的)使用对象文字来配置其选择器解析.当它循环这些配置对象以获取所有令牌时，它并不需要您的功能.在这种情况下，它可能试图将您的函数用作RegExp.

Because this is going to add an enumerable item to every single object. Sizzle (which jQuery uses) uses object literals to configure their selector parsing. When it loops these config objects to get all tokens, it doesn't expect your function. In this case, it's probably trying to use your function as a RegExp.

想象一下这种情况:

var obj = { a: 1, b: 2, c: 3 };
var result = 0;
for (var prop in obj) {
  // On one of these iterations, `prop` will be "allKeys".
  // In this case, `obj[prop]` will be a function instead of a number.
  result += obj[prop] * 2;
}
console.log(result);

如果您在Object的原型中添加了不能用作数字的任何内容，您将获得NaN作为结果.

If you have added anything to Object's prototype that can't be used as a number, you will get NaN for your result.

此问题的一个好的解决方案是将allKeys函数添加到Object而不是Object.prototype.这模仿了 Object.keys :

A good solution to this problem is to add the allKeys function to Object instead of Object.prototype. This mimics Object.keys:

Object.allKeys = function (obj) {
    var keys = [];
    for (var key in obj)
    {
        // Very important to check for dictionary.hasOwnProperty(key)
        // otherwise you may end up with methods from the prototype chain..
        if (obj.hasOwnProperty(key))
        {
            keys.push(key);
            //alert(key);
        } // End if (dict.hasOwnProperty(key))

    } // Next key

    keys.sort();
    return keys;
}; // End Extension Function allKeys

这篇关于为什么这个JavaScript原型函数破坏了jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

sizzle