Question

这有效：

<div id="result"></div>

<script type="text/javascript">
var Base64Encode = window.btoa || CryptoJS.enc.Base64.stringify;

document.getElementById('result').innerHTML = Base64Encode("Please work.");
</script>

但是，这个：

<div id="result"></div>

<script type="text/javascript">
var Test = {
    Base64Encode: window.btoa || CryptoJS.enc.Base64.stringify
};

document.getElementById('result').innerHTML = Test.Base64Encode("Please work.");
</script>

生成一个错误“TypeError：'btoa'调用一个没有实现接口Window的对象。”

小提琴：

http://jsfiddle.net/kAGU2/

为什么第一个示例有效但第二个示例发出错误？修复此特定错误的正确方法是什么？

Answer 1

为什么第一个例子有效但第二个例子发出错误？

当该函数被调用为Base64Encode()时，this context会隐式设置为window。但是，当您在Test.Base64Encode()上将其称为方法时，this会引用Test和btoa grumps。

解决此特定错误的正确方法是什么？

您需要bind到预期的背景：

Base64Encode = window.btoa
  ? window.btoa.bind(window)
  : CryptoJS.enc.Base64.stringify;

Answer 2

使用.bind()：

var Test = {
    Base64Encode: function() {
      if (window.btoa)
        return window.btoa.bind(window);

      return CryptoJS.enc.Base64.stringify;
    }()
};

您收到错误是因为您通过该对象属性引用调用了该函数。执行此操作时，this的值将设置为对所涉及对象的引用。 btoa()函数不喜欢（因为谁知道是什么原因），但.bind()为您创建了一个包装函数，以确保正确的this。

Answer 3

看来btoa函数是Window类的成员函数。因此必须使用此设置调用window。

为了在您的设置中工作，您应该这样称呼它：

Test.Base64Encode.call(window,"Please work.");

如何在Javascript对象中正确定义（函数||函数）？

3 个答案: