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. Codeforces 1197E Count The Rectangles(树状数组+扫描线)

    题意: 给你n条平行于坐标轴的线,问你能组成多少个矩形,坐标绝对值均小于5000 保证线之间不会重合或者退化 思路: 从下到上扫描每一条纵坐标为y的水平的线,然后扫描所有竖直的线并标记与它相交的线,保 ...

  2. layui父子页面方法互调

    父级页面调用子页面方法 layer.open({ type: 2, content: 'test/iframe.html', success: function(layero, index){ var ...

  3. num13---外观模式/过程模式

    假设家庭影院有一系列设备,每个设备都有各种开闭等功能性方法,使用家庭影院功能的时候,需要进行各个设备的一系列操作,繁琐麻烦. 现在提供一个外观类,在里面定义操作流程,客户端只需要和外观类进行接口交互即 ...

  4. Go语言实现:【剑指offer】字符串的排列

    该题目来源于牛客网<剑指offer>专题. 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,b ...

  5. 罗德里格斯旋转公式(Rodrigues' rotation formula)推导

    本文综合了几个相关的维基百科,加了点自己的理解,从比较基础的向量投影和叉积讲起,推导出罗德里格斯旋转公式.公式比较繁杂,如有错误,欢迎评论区指出. 对于向量的三维旋转问题,给定旋转轴和旋转角度,用罗德 ...

  6. Vue路由(vue-router)

    一.介绍 1.vue-router安装 官方文档:https://router.vuejs.org/zh/installation.html下载地址:https://unpkg.com/vue-rou ...

  7. CentOS7.3yum安装MariaDB报错[Errno 256]

    在yum安装MariaDB时出现下面这个错误提示,然后着手排查,先检查了/etc/yum.repo.d/下的配置文件,没有错误. failure: repodata/repomd.xml from m ...

  8. Unity5.5.6 升级到 2018.4.1 打包出现的问题 : Gradle version 2.10 is required. Current version is 5.1.1

    起因:最近要在googleplay上架新游戏,而谷歌要求新上架的应用要支持64位,鉴于老版本的unity不支持打包64位apk,所以决定升级unity版本到2018.4.1, 但打包过程中出现了几个问 ...

  9. pycharm创建Django项目时报 AttributeError:'module' object has no attrbute 'main' 错误或者创建了就只有venv一个目录

    这是因为创建项目时候没有选择合适的项目环境. 所以在创建项目的时候选择一下项目的环境,比如选择python的运行环境 这时候创建的项目就不再报 AttributeError:'module' obje ...

  10. 一起了解 .Net Foundation 项目 No.6

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. .NET Micro Fr ...