Home > Article > Web Front-end > What will happen if a method with the same name appears in JavaScript?
If two JS methods with the same name and the same parameters are in the same code segment, the last loaded method will overwrite the previous one. On the contrary, if the corresponding method can be found in the current code segment, it will be called immediately. .
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
In JS, if there is a method with the same name and the same parameters, which one will it call first? Let’s look at two examples first:
Example 1:
<html>
<head>
<title></title>
<script type="text/javascript">
function btnTest() {
$f1();
$f2();
}
function A() {
alert(1);
}
var $f1 = A;
</script>
<script type="text/javascript">
function A() {
alert(2);
}
var $f2 = A;
</script>
</head>
<body>
<form>
<div>
<input type="button" name="Testing" οnclick="btnTest();" value="TEST" />
</div>
</form>
</body>
</html>The result will pop up: 1 2
Example 2:
<html>
<head>
<title></title>
<script type="text/javascript">
function btnTest() {
$f1();
$f2();
}
function A() {
alert(1);
}
var $f1 = A;
function A() {
alert(2);
}
var $f2 = A;
</script>
</head>
<body>
<form>
<div>
<input type="button" name="Testing" onclick="btnTest();" value="TEST" />
</div>
</form>
</body>
</html>The result will pop up: 2 2
This has a lot to do with the current code segment. If there are two JS methods with the same name and parameters in the same code segment, the last loaded method will overwrite the previous one. , on the contrary, if the corresponding method can be found in the current code segment, it will be called immediately.
In JS, if there are methods with the same name and different parameters, which one will it call first? Let’s look at two more examples:
Example 1:
<html>
<head>
<title></title>
<script type="text/javascript">
function btnTest() {
var val = document.getElementById("txtVal").value;
if (val > 10) {
A();
}
else {
A(val);
}
}
function A() {
alert(1);
}
function A(val) {
alert(2);
alert(val);
}
</script>
</head>
<body>
<form>
<div>
Input Value(INT):<input type="text" id="txtVal"/><br>
<input type="button" name="Testing" onclick="btnTest();" value="TEST" />
</div>
</form>
</body>
</html>Example 2:
<html>
<head>
<title></title>
<script type="text/javascript">
function btnTest() {
var val = document.getElementById("txtVal").value;
if (val > 10) {
A();
}
else {
A(val);
}
}
function A() {
alert(1);
}
</script>
<script type="text/javascript">
function A(val) {
alert(2);
alert(val);
}
</script>
</head>
<body>
<form>
<div>
Input Value(INT):<input type="text" id="txtVal"/><br>
<input type="button" name="Testing" onclick="btnTest();" value="TEST" />
</div>
</form>
</body>
</html>Test results: Methods with the same name and different parameters will use the method loaded last. Overwrite the previous one!
[Recommended learning: javascript advanced tutorial]
The above is the detailed content of What will happen if a method with the same name appears in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!