javascript - 如何在 Javascript 对象中正确定义 (function || function)？

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' called on an object that doesn't implement interface Window.”

fiddle :

http://jsfiddle.net/kAGU2/

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

Answer 1

Why does the first example work but the second one emit that error?

当函数被调用为 Base64Encode() 时，this context隐式设置为 window。但是，当您将其作为 Test.Base64Encode() 上的方法调用时，this 将引用 Test 和 btoa 对此提示不已。

What's the correct way to fix this particular error?

您需要 bind它到预期的上下文:

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