JavaScript表达式知识详解[图]

各位JS的技术猿们好！打击在面试的时候，遇到了表达式的相关问题的时候，是怎么回答呢？接下来清风小编就来给大家介绍一下这方面的知识，希望能给各位一些参考：

 

数据类型总结了一下JavaScript数据类型几转换的相关知识，买了书后对数据类型啊、运算符啊、语句啊都是扫两眼或直接略过的，自己为搞定原型、闭包、作用域链就可以秒杀JavaScript笔试题，结果一次次死在毫不起眼的基础知识上，看似平淡无奇实则暗流涌动，一不小心就会栽倒。

神马是表达式

表达式是由数字、运算符、数字分组符号（如括号）、自由变量和约束变量等以能求得数值的有意义排列方法所得的组合。~~约束变量在表达式中已被指定数值，而自由变量则可以在表达式之外另行指定数值。一个表达式代表一个函数，其输入为自由变量的定值，而其输出则为表达式因之后所产生出的数值。

看起来很不接地气的赶脚，表达式是JavaScript中的一个短语，JavaScript会将其计算出一个结果，常量如1、"hello"、null这些都是表达式；变量名也是表达式，JavaScript计算出的结果就是赋值给变量的值，这些都是简单的表达式，几个简单的表达式可以组合为复杂的表达式，[3,4,5,6]这也是一个表达式，计算结果是数组，我们也可以通过运算符将简单表达式组合位复杂表达式，8+9这样,JavaScript表达式有几种形式

原始表达式

常量、变量、保留字

对象、数组初始化表达式

var obj={a:1,b:2};
var a=[1,2,3];

函数定义表达式

var fn=function(){}

属性访问表达式

Math.abs

调用表达式

alert('hello');

对象创建表达式

new object();

函数定义

我们想使用一个函数的时候通常有几种做法

函数表达式

函数表达式中函数名称并不是必需的，所以我们经常这么使用
var fn=function(n) { console.log(n) };

函数声明

更常见的做法是这样 function fn(n){ console.log(n);}

使用Function构造函数

偶尔也会这样 var fn=new Function('n',"console.log(n);");

这几种做法都很好理解，但是如果函数表达式使用了名字呢，我们看个题目

?

123	varf =functiong(){ console.log(g);};f();//function g(){ console.log(g);};typeofg();//g is not defined

不知道结果和同学们的预期是否一致，但看起来这种结果似乎互相矛盾，当我们使用函数声明的方式定义一个函数的时候，实际上声明了一个变量，在上面例子中就是f，并把函数赋值给这个变量，普通的函数表达式没有创建该变量，也就是我们所说的创建了一个匿名函数，但是如果函数表达式包含名称，也就是上面例子的g，那么函数的局部作用域将包含将包含该名称，并且把创建的函数绑定到该名称上，在上面例子中g变成了函数的局部变量，变量指向函数本身，所以我们调用f的时候会把其本身打印出来。但是g只作为函数的局部变量存在，我们在外部调用g的时候就会报错了。

看个题目?

12345

varx=1;if(functionf(){}){    x+=typeoff;}console.log(f);//'1undefined'

是不是觉得自然就能想到答案了

立即执行函数

初学JavaScript的同学很容易被类似这样的东西唬住

?

1	(function(){})();

其实我们了解了表达式就能很清楚的看明白这是什么结构了

(函数定义表达式)函数调用表达式

也就是说先创建了一个匿名函数，然后不传入参数调用它，这就变成了“立即执行函数”，知道了这些看个传入参数调用的立即执行函数题目

?

123	(functionf(f){    returntypeoff();// "number"})(function(){return1;});

这个题目事实上还涉及了一些其它的知识，立即执行函数不再是以空括号()来调用了，同事传入了一个function作为参数传入调用。再一个疑惑就是typeof f() 中的f究竟指谁，这个知识我们后面会介绍道，简单说一下，当函数执行有命名冲突的时候，函数依次填入 变量＝》函数＝》参数，所以最后被填入的参数f会覆盖函数定义f，typeof f()是对参数的调用，参数是立即执行函数传入的function参数，返回数字1，typeof 1是 "number"。

表达式返回值

表达式看明白了，我们却经常忽略其计算结果，也就是我们常说的返回值，对于原始表达式、对象数组初始化表达式、属性访问表达式很简单不会有什么问题。

函数定义表达式返回的是函数对象本身，我们在调用alert或者console.log的时候会调用其toString方法

console.log(function(){alert('a');}) //function (){alert('a');}

函数调用表达式自然是返回函数的return结果，但在JavaScript中并不是所有的函数都有return语句，对于没有return语句的function，其调用表达式返回undefined，对于只写个return的坑爹做法同样也是返回undefined?

12	(function(){})();//undefined(function(){return;})();//undefined

对象创建表达式本来也应该很简单，返回new的对象就可以了

?

1	typeofnewDate();//"object"

但是总有特殊的，看个题目

?

123456

functionTest(){    returnnewDate();}vartest=newTest();console.log(testinstanceofTest);//falseconsole.log(test);//Sat Jan 18 2014 14:57:08 GMT+0800 (CST)

很奇怪啊，new Test()没有返回Test的实例对象，返回的却是Date对象，这是为什么呢？是不是有返回值的function使用构造函数的时候就会返回return指令的结果呢？看个例子

?

12345678

functionTest(){    returnnewDate();}functionTest2(){    return2;}typeofnewTest();newTest2()instanceofTest2;//true，竟然是true

刚才的推测明显不正确，Test2有返回值，new test2() 返回的是Test2的实例，但是我们已经可以看出一丝端倪了

当使用function的构造函数创建对象（new XXX）的时候，如果函数return基本类型或者没有return（其实就是return undefined）的时候， new 返回的是对象的实例；如果 函数return的是一个对象，那么new 将返回这个对象而不是函数实例。