理解Javascritp中的"引用"

Author: bugall
Wechat: bugallF
Email: 769088641@qq.com
Github: https://github.com/bugall

一： 函数中的引用传递

咱们看下下面的代码的正确输出是什么

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num); // 10
console.log(obj1.item); // changed    
console.log(obj2.item); // unchanged

在javascript中除了基础类型采用的是值(值类型有哪些)传递，而对象采用是引用传递。这就好理解为何a的值没有被修改。

那为何obj1的值修改了，可是obj2的值却没有被覆盖？当咱们调用changeStuff函数的时候，参数b，c的值分别是obj1，obj2的引用。

当咱们去修改的b的值的时候，由于b->obj1的引用关系没有变，因此实际修改的是obj1的值。可是参数c的状况就不一样了，由于咱们在函数中对c进行了引用的从新绑定，c = {item: "changed"} 这时候的c中的对象引用已经改变，这里要清楚引用和指针的关系。

二： 逻辑判断中的引用

一般咱们会把==理解为值相同，把===理解为值相同且类型相同。

可是这种理解不是彻底准确的。0=='' //true，直观理解上0怎么会等于''空字符串呢？由于在作==逻辑判断的时候js会把==两边的值作类型转换，而后再比较。

另外在javascript中比较奇葩的就是关于null，我很难理解为何null支持比较呢？好比在SQL中咱们是不能对null值直接比较的，一般都会使用is null or is not null来作判断。

若是咱们把===理解为值相同，且类型相同那么就没法理解[1] === [1] // false的状况，由于[1]值相同，类型也相同。

咱们应该怎么理解===

===不会判断值是否相同，只会判断===左右两边的变量保存的引用地址是否相同，咱们一块儿看下例子

var a = [1,2,3];
var b = [1,2,3];
var c = a;

var ab_eq = (a === b); // false 由于a,b的引用不一样，
// 或者理解为a,b引用的对象在堆上不是同一个对象。

var ac_eq = (a === c); // true 由于a保存了一份对象的引用，
// `c=a` c会把a的值copy一份，这是a,c的值(保存对象的引用)相同。 

其实对于一个变量来讲，包含了`左值`和`右值` 后面我会整理文章

相似的例子

var a = { x: 1, y: 2 };
var b = { x: 1, y: 2 };
var c = a;

var ab_eq = (a === b); // false type)
var ac_eq = (a === c); // true

var a = { };
var b = { };
var c = a;

var ab_eq = (a === b); // false 
var ac_eq = (a === c); // true

总结===的三种状况

对于整型 (numbers):
a === b // 若是值相同返回true

对于引用类型来讲:
a === b // 若是a,b保存的是同一个对象的引用返回true

对字符串来讲:
a === b // 左右两边的字符相同返回true

var1 == var2 结果图

三： const中的引用

咱们首先看下官方的定义：

constant cannot change through re-assignment
constant cannot be re-declared

简单翻译就是：const定义的变量不能被从新定义，不能被从新赋值。
const 只能确保定义的变量的引用地址不会被改变。可是若是引用指向的
是一个对象的话，你是能够对对象里的值进行修改的，由于没有改变对象
自身的地址。

const x = {};
x = {foo: 'bar'}; // error - re-assigning

const y = ['foo'];
const y = ['bar']; // error - re-declaring

const foo = 'bar'; 
foo = 'bar2';       // error - can not re-assign
var foo = 'bar3';   // error - already declared
function foo() {};  // error - already declared

可是对于值的修改是容许的

const x = {};

x.foo = 'bar';

console.log(x); // {foo : 'bar'}

const y = [];

y.push('foo');

console.log(y); // ['foo'];