意外的令牌 JavaScript

Question

它在iPhone，iMac，Windows上运行良好，但是当我在Android设备上运行时，控制台中会显示以下错误。

未捕获的语法错误意外标记，指向"window.onload = () =>{"这行代码。

/*
* Simple DOM test that collects the value from a textbox,
* and applies it to the header element by changing its color.
*/
window.onload= () =>{
const myheading = document.getElementById('header');
const myButton = document.getElementById('myButton');
const bgColor = document.getElementById('bgColor');
const textColor = document.getElementById('textColor');
myButton.addEventListener('click', () => {
myheading.style.color = 'black';
bgColor.style.color = bgColor.value;
textColor.style.color = textColor.value;
if (bgColor.value === '' || textColor.value === '') {
alert('Please enter color value');
myButton.style.backgroundColor= "#f00";
myButton.style.color = '#fff';
myButton.innerHTML = 'Enter Color Name';
setInterval(function() { 
myButton.innerHTML = 'Change heading color';
myButton.style.backgroundColor= "#dcdcdc";
myButton.style.color = "black";
}, 5000);
} else {
myheading.innerHTML = "You changed me into <u>" + textColor.value + "</u> with  a <u>"  + bgColor.value + "</u> background!";
Object.assign(myheading.style, {
padding: "10px",
color: textColor.value,
backgroundColor: bgColor.value
});
myButton.style.backgroundColor= "#fd1";
myButton.innerHTML = 'Colors applied Success!';    
}
});
}

Answer 1

将每个()=>{替换为function(){。该代码将具有相同的功能，并且可以在尚未实现箭头功能的浏览器上运行。

由于您没有在 onload 函数中使用this关键字，因此功能上不会有区别(因为箭头函数不会改变范围，而普通函数会改变范围)。有关普通函数和箭头函数之间差异的更多详细信息，请参阅此堆栈溢出问题。

Answer 2

问题不在于环境，而在于浏览器支持的Javascript版本。箭头函数是Javascript Ecmascript 6中可用的功能，某些浏览器没有实现它，具体取决于其版本。

在这种情况下，你可以只使用 Ecmascript 5 (ES5)，用function(){}替换() =>{}。

如果你在 ES5 浏览器上需要 ES6 功能，你可以考虑使用编译器/polyfill。

箭头函数在 2015 版 ECMA-262 规范中定义。