防止覆盖 Javascript 函数

Question

我在 JavaScript 中使用模块化模式。我想知道我们是否可以防止公共模块被覆盖。 比如下面的代码中function1、function2、function3和function4可以在外面访问但是我不想覆盖。如果这些函数被覆盖，那么我希望编译器生成错误消息

"use strict";

var $ = (function(){
return{
      function1 : function(){
          alert("this is Function1");
      },
      function2 : function(){
          alert("this is Function2");
      },
      function3 : function(){
          alert("this is Function3");
      },
      function4 : function(){
          alert("this is Function4");
      }
    };
}());


$.function1(); //will alert - this is Function1
$.function2(); //will alert - this is Function2

/* 
  I don't want to do this, If I do, then I want the compiler to generate an   
  error message
*/
$.function3=function(){
    alert('function 3 is overridden');

};
$.function3(); //will alert - function 3 is overridden

Answer 1

使用Object.defineProperty，您可以将该属性声明为只读。

// Make sure an error is thrown when attempting to overwrite it
// Without strict-mode, re-assigning will fail silently
'use strict';

var API = {};
Object.defineProperty(API, 'function1', {
  writable: false,
  value: function() {
    console.log('Called function1');
  }
});

API.function1();
API.function1 = null;

Answer 2

是的，可以通过使用 Object.defineProperty 方法来防止它。只需将 writable 和 configurable 属性设置为 false。你可以找到更多关于here的信息

在你的情况下，它应该是这样的：

var $ = (function(){

var newObject = {};

Object.defineProperty (newObject, "function1", {value: function() {  alert("this is Function1");}, writable:false, configurable:false});

// etc.

return object;
}());

请注意，将 writable 和 configurable 属性设置为 false 只会防止 function1 属性被覆盖。但是，由于 JavaScript 中的每个函数都是 Function 对象，因此该函数对象不受 writable:false 的保护。因此，例如，function1 的原型仍然可以更改。

如果你想完全避免以任何方式修改你的函数，你应该使用 Object.freeze 方法。请阅读this 非常有用的文章。

Answer 3

您可以使用Object.freeze(obj) 将整个返回的对象设置为不可变。此外，请注意，您可以使用const 而不是var 来避免重新分配对象。

'use strict';

const $ = (function() {
  return Object.freeze({
    function1: function() {
      alert('this is Function1');
    },
    function2: function() {
      alert('this is Function2');
    },
    function3: function() {
      alert('this is Function3');
    },
    function4: function() {
      alert('this is Function4');
    }
  });
})();


$.function1(); //will alert - this is Function1
$.function2(); //will alert - this is Function2

// This will now error
$.function3 = function() {
  alert('function 3 is overridden');
};
$.function3(); // will not run

Answer 4

有几种方法可以做到这一点。如果要在覆盖时处理消息，可以使用getter和setter：

var $ = (function(){
  var obj = {
      function1 : function(){
          alert("this is Function1");
      },
      function2 : function(){
          alert("this is Function2");
      },
      get function3() {
      	  alert("this is Function3");
      },
      set function3(value) {
      	  console.warn('You cannot override this function');
      },
      function4 : function(){
          alert("this is Function4");
      }
  };
  
  return obj
}());

// throw warning
$.function3 = 'foo';

由于您使用的是 IIFE，因此您可以在属性内容之外定义源并引用它。

ES6 语法示例：

let $ = (function () {
  let func3 = function () {
    alert('this is Function3');
  };

  class $ {
    static set function3(value) {
      return func3;
    }
    static get function3() {
      return func3;
    }
  }
  
  return $;
}());

$.function3 = 'foo';
$.function3();