对于我一个从事IT好几年的了人，心血来潮想写写前端，困难大大的，最近就碰到了JS引用类型指针的问题，网上各种找资料、看书，总算对这个类型的指针有了一定理解，遂赶紧记录下来巩固一下理解，先看一段简单代码，引用网友的代码块
<script>
var a = {n:1};
var b = a;
a.x = a = {n:2};
console.log(a.x);// --> undefined
console.log(b.x);// --> [object Object]
</script>
最初看到这个代码块以及所注释的输出打印我不会了，由于掌握的知识太少，下意识的觉得这个输出是错误的，在拷贝到开发者工具中测试后，输出是对的，那么是我哪里没有掌握？还是哪里理解错误呢？
首先我对这段代码分析了一下，虽然不算输出就短短3行代码，可也有几个知识点要掌握
- 变量声明
- 对象引用
- 指针
- js赋值以及运算符优先级
从上面4点我们说一下这个输出结果的过程：
第一行 var a = {n:1}; 声明变量 a 并将 {n:1} 对象赋值给 a，
第二行 var b = a; 声明变量 b 并将 a 赋值给 b，此时 b 是 a 的引用，
也就是我们看到上图中
a 与 b 都指向到对象A，也就是 a 的所有属性 b 都可以使用，第三行
a.x = a = {n:2};，从这行代码来看按照从右到左的顺序执行时没有问题的，但这里面有 a.x ，其中的.运算级别在这里是最高的，所以代码在执行过程中应该是下面这种情况：
a.x //undefined 先执行a.x值为undefined，此时的a.x是指向上图中的对象A，也就是b是可以用x属性的
此时 a 与 b 的状态是下面这样的：
接下来就是赋值运算符
= 的执行了
a.x = a = {n:2};//进行从右到左的赋值操作
首先将 {n:2} 赋值给 a，此时的 a 已经不再指向对象A了，而是值为 {n:2} 的新对象B，
接下来将
a 也就是对象B赋值给 a.x ，上面讲到由于 a.x 最先执行后所指向是对象A，也就是说当前 x 与对象B没有关系
所以当执行完打印输出语句后得到的结果就是
a 所指对象B并没有 x 属性
console.log(a.x);// --> undefined
console.log(b.x);// --> [object Object]
下面两个表格是常用的算术运算符以及赋值运算符
JavaScript 算术运算符
算术运算符用于执行变量与/或值之间的算术运算。
给定 y=5，下面的表格解释了这些算术运算符：
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 取余 | x=y%2 | x=1 |
| ++ | 递加 | x=++y,x=y++ | x=6,x=5 |
| -- | 递减 | x=--y,x=y-- | x=4,x=5 |
| - | 负号 | x=-y | x= -5 |
| + | 正号 | x=+y | x= 5 |
| ** | 幂 | x**y | x= NaN |
JavaScript 赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
运算符优先级表格
| 运算符 | 描述 |
|---|---|
| . [] () | 字段访问、数组下表、函数调用以及表达式分组 |
| ++ -- + - ~ ！delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值等 |
| * / % | 乘法、除法、取模 |
| + - + | 加法、减法、字符串连接 |
| << >> >>> | 常用于二进制移位（位移运算只对整数有效，即使对浮点型数值进行位移运算，也只会对整数部分进行移位运算） |
| == != === !== | 等于、不等于、严格相等（值与类型都相等）、非严格相等 |
| & | 按位与 |
| ^ | 按位异或 |
| l | 按位或 |
| && | 逻辑与 |
| 1、&&左右都是布尔值 a&&b 只有前后都是true的时候才返回true，否则返回false。 2、&&两侧非全部是布尔值 ①只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值； ②只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值。 |
|
| ll | 逻辑或 |
| 1、II两侧都是布尔值 aIIb只有前后都是false的时候才返回false，否则返回true。 2、II两侧非全部是布尔值 ①只要“II”前面为false,不管“II”后面是true还是false，都返回“II”后面的值； ②只要“II”前面为true,不管“II”后面是true还是false，都返回“II”前面的值。 注：JS中 0、""(空字符)、null、false、undefined、NaN都会判为false，其他都为true，这个一定要记住，不然应用II和&&就会出现问题。 |
|
| ?: | 条件，三目运算，a？b：c |
| = op = | 赋值，运算赋值（包含上面赋值运算符表格全部） |
| , | 多重求值，var a=2,b=3; |
网友评论