js中close方法有疑问，已附上在线执行代码地址

贴简化版代码,为什么我可以show()打开窗口，但close无法关闭窗口，close方法根本没执行
但是如果把：

<a href="##" onclick="close()">关闭窗口</a>
换成
<a href="##" onclick="doclose()">关闭窗口</a>
就又可以了，为什么

附上在线代码：http://codepen.io/karlw/pen/R...


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #windows{
            height:100px;
            width: 100%;
            background-color: #999;
            display: none;
        }
    </style>
</head>
<body>
        <a href="##" onclick="show()">打开窗口</a>
    <div id="windows">
        <a href="##" onclick="close()">关闭窗口</a>
    </div>
    <script src="jquery-1.12.3.js "></script>
    <script>
    var show = function(){
        $('#windows').show();
    };
    var close = function(){
        $('#windows').hide();
    };
    </script>
</body>
</html>

jquery javascript html

阅读 5.1k

2 个回答

scort

我试了一下，确实不能执行。但是我发现你把close函数名称改变一下就可以正常执行了。

<a href="##" onclick="show()">打开窗口</a>
<a href="##" onclick="doclose()">关闭窗口</a>
var doclose = function(){
        $('#windows').hide();
};

原因猜测一下就知道了，肯定是`close`方法是已经存在的方法，并没有执行你重写的`close`方法。而`show`方法并不存在，所以调用了你的`show`方法。
首先我猜测是不是`window.close`是无法重写的，所以我查了一下：
Object.getOwnPropertyDescriptor(window,'close')
Object {writable: true, enumerable: true, configurable: true}
发现`window.close`的`writable`是`true`，可以复写。
后来我发现`document.close`方法也是存在的，我猜测可能是以`<a href="##" onclick="doclose()">关闭窗口</a>`形式绑定的事件，查找顺序是`document->window`，所以问题就清楚了。