Uncaught TypeError: extender.hasOwnProperty is not a function

 

bug出處: 前端 js 

background:在使用jquery擴展datables時出現錯誤.

 

瀏覽器報錯信息

 

jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:6529                                Uncaught TypeError: extender.hasOwnProperty is not a function
at _fnExtend (jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:6529)
at HTMLTableElement.<anonymous> (jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:985)
at Function.each (jquery.min-e40ec2161fe7993196f23c8a07346306.js:2)
at n.fn.init.each (jquery.min-e40ec2161fe7993196f23c8a07346306.js:2)
at n.fn.init.DataTable [as dataTable] (jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:869)
at n.fn.init.$.fn.DataTable (jquery.dataTables-28e78e8c1897d5a8bcf7e18b2f2ba0b6.js:15070)
at initializePage (p0001.min-279739700a0ee06427801b7d4adb7219.js:61)
at onPageLoad (p0001.min-279739700a0ee06427801b7d4adb7219.js:96)
at HTMLDocument.<anonymous> (p0001.min-279739700a0ee06427801b7d4adb7219.js:101)
at j (jquery.min-e40ec2161fe7993196f23c8a07346306.js:2)

報錯截圖:

 

 涉及代碼:

jquery.dataTables.js

_fnExtend( out, extender, breakRefs ) 中 參數extender 即options出錯

　　　　　function _fnExtend( out, extender, breakRefs )
	{
		var val;
	
		for ( var prop in extender ) {
			if ( extender.hasOwnProperty(prop) ) {
				val = extender[prop];
	
				if ( $.isPlainObject( val ) ) {
					if ( ! $.isPlainObject( out[prop] ) ) {
						out[prop] = {};
					}
					$.extend( true, out[prop], val );
				}
				else if ( breakRefs && prop !== 'data' && prop !== 'aaData' && $.isArray(val) ) {
					out[prop] = val.slice();
				}
				else {
					out[prop] = val;
				}
			}
		}
	
		return out;
	}

 

_fnExtend 函數的使用處

oInit = _fnExtend( $.extend( true, {}, defaults ), oInit );

var oInit = len > 1 ? // optimisation for single table case
_fnExtend( o, options, true ) :
options;

　　

 p0001.js  

        var oDataTableOption = _.DATATABLES_OPTIONS;
        oDataTableOption.ajax = {
            url : sContextPath + '/api/personPage',
            data : function(oData) {
                // 過濾模態參數
                $.extend(oData, $('#app').serializeObject());
            }
        };
        //省略
        oDataTable = $('#persons').DataTable(oDataTableOption); 

　　

相對應 公司框架中 option 的創建方式為 Object.create(null)

前端框架  

   /**
   * A method that creates default options for jQuery DataTables Plugin.
   * 
   * @returns {Object} The default options for DataTables.
   * @example
   * 
   * _.DATATABLES_OPTIONS
   * // => Object {autoWidth: false, ordering: false, processing: true, serverSide: true, stateSave: false…}
   */
  function getDataTablesOptions() {
    springfield.require('getMessage');
    var getMessage = springfield.getMessage;

    return Object.create(null, {
      // features
      'autoWidth': {
        value: false,
        enumerable: true,
        writable: true,
      }
     //省略部分代碼
  }

 

修改方式為兩種:

1.將jqeury框架中代碼修改成

 Object.property.hasOwnProperty.call(extender,prop)

//詳細知識點參看原型鏈 及 call (apply) 函數的使用

 

2.將公司框架修改為

Object,create(Object.property)