js中常见的错误,例如Uncaught TypeError: x is not a function

其原因除了函数本身有错之外,还有一种很奇怪的情况:函数本身没有错,但是运行时就是不能正常运行。这种情况与javascript的特性有关变量与函数声明前置的优先级。

总结:

js有声明前置,函数和变量的声明都会前置,即会在整个js代码的最开始,不管声明部分在什么位置。

js中函数的声明优先于同名变量的声明,不管先后顺序如何。

函数的声明会在整段js代码的最前面,不管function() 函数在js的什么位置。

当先声明了名为x()的函数,再声明名为var x的变量时,变量名会覆盖函数,使得在同名变量定义之后,函数变得未定义,即同名变量定义之后 调用同名函数会报错,即 x is not a function。

当有两个同名变量和两个同名函数一起定义时,四个量的名字相同,那么后一个函数或者变量会覆盖掉前一个对应的量(函数/变量)且四个中最后一个定义量之后在引用此量,该量的类型(变量/函数)是最后一次定义此名量时的类型(变量/函数)。

1-4点解释如下:

首先看代码:

console.log(x)
console.log(x());
var x=1;
function x(){
console.log(5);
}
console.log(x)
console.log(x());//此时x变成了一个变量

输出结果:

function x(){
                console.log(5);
 }

5

1
 Uncaught TypeError: x is not a function

----------------------------

js解释器在对其上下文进行解释执行时分为三个阶段来进行:声明阶段、初始化阶段、执行阶段。

针对js上下文,首先会进行声明阶段,声明阶段中的特点是声明前置;声明又会包括变量声明前置和函数声明前置,鉴于以上代码的输出结果,我们可以得出函数声明前置优先于变量声明前置的特点,并且如果变量名和函数名冲突会忽略变量的声明,因此声明过得变量名或函数名不会重复声明,这样也可以很好地解释为什么第一次输出的是函数而不是undefined。根据js的这些特点我们可以将以上代码解析成如下:

//声明阶段
function x(){//函数声明
console.log(5);
}
var x;//变量声明,因为x已经声明过了,此处不进行声明(忽略)
//执行阶段
console.log(x);
console.log(x());
x=1;
console.log(x);
console.log(x());

如上代码所述,js将变量和函数的声明前置,然后再执行代码。

  • 第二次输出时,因为声明阶段已经声明过名为x的函数,所以在执行阶段中调用x函数,会执行函数体中的内容。
  • 第三次输出时,输出1,因为x被赋值为1.
  • 第四次输出时,因为x此时是一个变量而不是一个函数,所以js无法解释“变量()”这样的格式,就会提示“x is not a function”。

第5点解释如下:当有两个同名变量和两个同名函数一起定义时,四个量的名字相同,那么后一个函数或者变量会覆盖掉前一个对应的量(函数/变量)。

js中声明过得变量名或函数名不会重复声明,如果js代码中有同名的函数或同名的变量时,程序如何运行,如下代码:

console.log(x)
console.log(x());
var x=1;
var x=100;
function x(){
console.log(5);
}
function x(){
console.log(500);
}
console.log(x)
console.log(x());//此时x变

根据js解析代码的特点,将代码解析成如下:

//声明阶段
function x(){//函数声明
//console.log(5);此句会被下句代码覆盖
console.log(500);
}
var x;//变量声明,因为x已经声明过了,此处不进行声明(忽略)
//执行阶段
console.log(x);
console.log(x());
x=1;
x=100;//x的值被覆盖
console.log(x);
console.log(x());//此时x变成了一个变量

所以输出的结果就是:

function x(){
                console.log(500);
 }

500

100
 Uncaught TypeError: x is not a function

----------------------------

所以:如果声明了同名的函数其定义会被后者覆盖,声明了同名的变量其值也会被后者覆盖

JS:JS中常见的 “函数名 is not a function” 错误的更多相关文章

  1. JS循环中使用bind函数的参数传递问题

    JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...

  2. vue 组件名和方法名 重名了,报function错误

    vue 组件名和方法名 重名了,报function错误

  3. js中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...

  4. 破解 Rith's CrackMe #1(对比IDA查看动态分析中的MFC函数名)

    系统 : Windows xp 程序 : Rith's CrackMe #1 程序下载地址 :http://pan.baidu.com/s/1gecW9Qr 要求 : 注册机编写 使用工具 : IDA ...

  5. 【转】《深入理解计算机系统》C程序中常见的内存操作有关的典型编程错误

    原文地址:http://blog.csdn.net/slvher/article/details/9150597 对C/C++程序员来说,内存管理是个不小的挑战,绝对值得慎之又慎,否则让由上万行代码构 ...

  6. 错误内存【读书笔记】C程序中常见的内存操作有关的典型编程错误

    题记:写这篇博客要主是加深自己对错误内存的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢. 对C/C++程序员来讲,内存管理是个不小的挑战,绝对值得慎之又慎,否则让由上万行代码构成的 ...

  7. 《深入理解计算机系统》C程序中常见的内存操作有关的典型编程错误

    对C/C++程序员来说,内存管理是个不小的挑战,绝对值得慎之又慎,否则让由上万行代码构成的模块跑起来后才出现内存崩溃,是很让人痛苦的.因为崩溃的位置在时间和空间上,通常是在距真正的错误源一段距离之后才 ...

  8. JS 调试中常见的报错的解决办法

    报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) ...

  9. js对象中的回调函数

    假设一个页面new多个同类型的对象,且该对象内部含异步请求的回调,很有可能回调函数中的this指向最后一次new的对象. 解决该问题的办法是,异步请求使用$.ajax并制定其context为this, ...

随机推荐

  1. Mysql事务结合spring管理

    spring事务相关问题记录 遇到情况: 在本地单体应用调试代码时,发现在一个加了@transaction注解的方法里进行先更新后查询的操作,查询的结果是可以看到更新的内容的.而在微服务环境中同样的代 ...

  2. 3、实战:OutOfMemoryError异常

    目的:第一,通过代码验证Java虚拟机规范中描述的各个运行时区域存储的内容:第二,工作中遇到实际的内存溢出异常时,能根据异常的信息快速判断是哪个区域的内存溢出,知道什么样的代码可能会导致这些区域内存溢 ...

  3. shell脚本 inotify + rsync 同步脚本

    1.这是很简单的一个 文件监控+触发同步脚本 监控一台服务器下的一个文件夹,发生改变则向另一个个文件夹进行同步. 具体的inotify命令  rsync命令  可以看linux分类下的介绍 inoti ...

  4. zabbix性能问题

    在我们的zabbixserver端主机数量过多时,如果由server端去收集数据,zabbix会出现严重的性能问题,主要的表现有: 1.当被监控端达到一个量级的时候,web操作会卡,容易出现502 2 ...

  5. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  6. 西门子S7comm协议解析 —— 利用Wireshark对报文逐字节进行解析详细解析S7comm所含功能码以及UserData功能

    又一次成为懒蛋了,标题就这么改了改又是一篇新文章. 网上也有很多S7comm协议的解析,但还是如同我上一篇一样我只是做报文的解析对于S7comm的原理并进行阐述. 有些地方有错误的地方尽请大家指出,共 ...

  7. ASP.NET Core MVC 网站学习笔记

    ASP.NET Core MVC 网站学习笔记 魏刘宏 2020 年 2 月 17 日 最近因为” 新冠” 疫情在家办公,学习了 ASP.NET Core MVC 网站的一些知识,记录如下. 一.新建 ...

  8. RxHttp 让你眼前一亮的Http请求框架

    1.前言 RxHttp在今年4月份一经推出,就受到了广大Android 开发者的喜爱,截止本文发表在github上已有1100+star,为此,我自己也建个RxHttp&RxLife 的群(群 ...

  9. mysql必知必会-创建高级联结

    使用表别名 使用别名引用被检索的表列 别名除了用于列名和计算字段外,SQL还允许给表名起别名.这样做 有两个主要理由: 缩短SQL语句: 允许在单条 SELECT 语句中多次使用相同的表. 可以看到, ...

  10. 这个 Python 代码自动补全神器搞得我卧槽卧槽的

    是时候跟你说说这个能让你撸代码撸得舒服得不要不要的神器了——kite. ​!   ​ 简单来说,它是一款 IDE 的插件,能做到代码自动补全,可能你会说了,这有什么牛逼的?一般的编辑器不都有这个功能么 ...