在JavaScript中，`alert()`函数是内置的一种弹窗机制，用于向用户显示简短的提示信息。然而，这个默认的`alert()`对话框样式固定，功能单一，有时不能满足开发者自定义界面的需求。因此，对`alert()`进行重写可以实现更个性化的交互体验。本文将详细介绍一个适合新手学习的JavaScript重写`alert()`控件的过程。
创建一个名为`alertObj`的对象，它包含了`generalStyle`、`txtStyle`和`btnStyle`三个属性，分别对应弹窗的通用样式、文本样式和按钮样式。这些样式属性包括了边框、背景色、定位等，便于自定义弹窗外观。
```javascript
var alertObj = new Object();
var generalStyle = {...}
var txtStyle = {...}
var btnStyle = {...}
```
接着，定义`alertObj`对象的方法`createComponent`，这个方法用于创建HTML元素并根据传入的样式参数设置元素样式。它接受两个参数：要创建的元素类型和样式对象。通过遍历样式对象并尝试设置元素样式，如果设置失败则捕获异常。
```javascript
alertObj.createComponent = function() {
var component = document.createElement(arguments[0]);
var styles = arguments[1];
for (var property in styles) {
if (styles[property] != null) {
try{
component.style[property] = styles[property];
}catch(err){
document.write(err.name+":"+property+"<br/>");
}
}
}
return component;
}
```
然后，定义`alertObj.show`方法来实现弹窗的显示。此方法首先检查是否已存在弹窗，如果不存在，则创建一个新的弹窗。它会修改`body`元素的`zIndex`和背景色，创建一个包含文本和按钮的`div`元素，并将其添加到`body`中。当点击按钮时，恢复`body`的样式并移除弹窗。
```javascript
alertObj.show = function() {
if(!this.isExist){
this.isExist = true;
...
var divObj = this.createComponent("div", this.generalSet);
var txtObj = this.createComponent("p", this.txtSet);
txtObj.innerHTML = arguments[0];
var btnObj = this.createComponent("button", this.btnSet);
btnObj.innerHTML = this.btnSet.innerHTML;
btnObj.onclick = function() {
...
}
divObj.appendChild(txtObj);
divObj.appendChild(btnObj);
bodyObj.appendChild(divObj);
}
}
```
创建一个简单的触发器`show(s)`，用于调用`alertObj.show`方法显示自定义的弹窗。在HTML中，当点击`<p>`标签时，会执行`show('inner test')`，从而展示出带有“inner test”文本的弹窗。
```javascript
function show(s) {
alertObj.show(s);
}
```
这个例子展示了如何使用JavaScript自定义`alert()`控件，通过对HTML元素的动态创建和样式设置，实现了一个具有基础功能的弹窗。这个过程对于新手来说，既锻炼了DOM操作，又了解了对象和方法的使用，有助于提升JavaScript编程技能。
