JavaScript中重名的函数与对象示例详析

 更新时间:2017年09月28日 11:53:35   作者:司马懿字仲达  
最近同事问了一个问题,说在js中如果函数与对象重名了会怎么样?仔细详细这个问题值得讨论一下,所以便有了这篇文章,这篇文章主要给大家介绍了关于JavaScript中重名的函数与对象的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧啊。

前言

本文主要给大家介绍了关于JavaScript中重名的函数与对象的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

JavaScript 允许重复声明变量,后声明的覆盖之前的。

var a = 1;
var a = 'x';
console.log(a);
//输出'x'

JavaScript允许重复定义函数。

JavaScript没有重载这个概念,它仅依据函数名来区分函数。

后定义的同名函数覆盖之前的,与参数无关。

function test() {
 console.log("test");
}
test(); //输出 "test arg0 + undefined"

function test(arg1) {
 console.log("test arg" + arguments.length + " + " + arg1);
}
test(1,2); //输出 "test arg2 + 1"

实参个数如果比形参少,那么剩下的默认赋值为undefined;如果实参传的比形参数量多,那么是全部都会被传进去的,只不过没有对应的形参可以引用(但可以用arguments来获取剩下的参数)

function test(arg1) {
 for(var i=0; i<arguments.length; i++) {
 console.log(arguments[i]);
 }
}
test(1,2); //输出 1 2

变量与函数重名的时候,变量生效

这涉及到了变量和函数的预解析:

- 变量声明会被顶置,函数声明也会被顶置且比变量更先声明。

- 变量的声明和赋值语句一起写时,JS引擎在解析时,会将其拆成声明和赋值2部分,声明置顶,赋值保留在原来位置。

- 声明过的变量不会再重复声明。

var a = 100;
function a() {
 return "function";
}
console.log(a); //输出 100
console.log(a()); 
/*
报错
Uncaught TypeError: a is not a function
 (anonymous function) @test.html:9
*/

JS中有两种函数,一种是普通函数,一种是函数对象。下面的这种就是“函数对象”,它实际上是声明一个匿名函数,然后将该函数的init方法赋值给该变量。

var a = 100;
var a = function() {
 return "function";
}
console.log(a);
/* 
输出
function() {
 return "function";
}
*/
console.log(a()); //输出 "function"

函数与内部变量重名

定义普通函数,即在window变量下,定义一个key,它的名字为该函数名,值为该函数的地址。函数内部的this指向window对象。

function a() {
 console.log(this); //输出 window{...}
 this.a = 1;  //即 window.a = 1,此时window下的function a已经被该变量覆盖了。
 var a = 5;  //下面的这几个变量都是局部变量,仅在花括号范围内有效。 
 a = 10;
 var v = "value"
 return "function";
}
console.log(a);  //输出 function a {...}
console.log(a()); //输出 "function"
console.log(a);  //输出 1
console.log(v);
/*
输出
Uncaught ReferenceError: v is not defined
 (anonymous function) @ mycolor.html:15
*/

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • 基于mpvue小程序使用echarts画折线图的方法示例

    基于mpvue小程序使用echarts画折线图的方法示例

    这篇文章主要介绍了基于mpvue小程序使用echarts画折线图的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • WordPress中利用AJAX异步获取评论用户头像的方法

    WordPress中利用AJAX异步获取评论用户头像的方法

    这篇文章主要介绍了WordPress中利用AJAX异步获取评论用户头像的方法,文中的例子是输入邮箱即可获取头像,需要的朋友可以参考下
    2016-01-01
  • JavaScript实现审核流程状态的动态显示进度条

    JavaScript实现审核流程状态的动态显示进度条

    对于有很多流程的东西,我们希望能够根据不同的阶段,用流程条对应地进行显示,非常直观,给用户带来极好的用户体验,下面小编给大家分享JavaScript实现审核流程状态的动态显示进度条功能,需要的的朋友参考下
    2017-03-03
  • 深入浅出理解JavaScript闭包的功能与用法

    深入浅出理解JavaScript闭包的功能与用法

    这篇文章主要介绍了深入浅出理解JavaScript闭包的功能与用法,结合实例形式从变量、函数的内部属性与作用域链分析了javascript闭包的相关概念、功能与使用技巧,需要的朋友可以参考下
    2018-08-08
  • JS动态加载当前时间的方法

    JS动态加载当前时间的方法

    这篇文章主要介绍了JS动态加载当前时间的方法,涉及html的onload方法及javascript操作时间的技巧,需要的朋友可以参考下
    2015-02-02
  • javascript 进度条的几种方法

    javascript 进度条的几种方法

    在实际项目中,进度条的用处还是非常大的。这篇文章主要是要介绍几种制作进度条的方法。通过学习,你也能制作属于自己的进度条了。
    2009-05-05
  • 多种方法实现load加载完成后把图片一次性显示出来

    多种方法实现load加载完成后把图片一次性显示出来

    如何一个load 加载完成后把图片一次性显示出来,下面有个不错的方法,希望对大家有所帮助
    2014-02-02
  • js实现延时加载Flash的方法

    js实现延时加载Flash的方法

    这篇文章主要介绍了js实现延时加载Flash的方法,较为详细的分析了通过元素替换实现JavaScript延时加载flash的相关原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 微信小程序通过js实现瀑布流布局详解

    微信小程序通过js实现瀑布流布局详解

    这篇文章主要介绍了微信小程序通过js实现瀑布流布局详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • location.search在客户端获取Url参数的方法

    location.search在客户端获取Url参数的方法

    最近一直在写html,刚接触到,感觉挺复杂的。。比如传参,在.net里可以直接用Request接受,而在html中还要经过处理,找了一些资料,写了个方法。
    2010-06-06

最新评论