关于javascript引用变量赋值问题

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：410

#### 引用变量赋值

- 2个或2个以上的引用变量指向同一个对象, 通过一个变量修改对象内部数据, 其他变量看到的是修改之后的数据
```
var obj1 = {name: 'Tom'}
var obj2 = obj1
obj2.age = 12
console.log(obj1.age) // 12
function fn (obj) { obj.name = 'A' }
fn(obj1)
console.log(obj2.name) //A
// obj1、obj2两个引用变量指向同一个对象({name: 'Tom'})；
// 通过obj2.age = 12修改对象数据，那obj1自然也看到的是修改之后的数据。
```

- 2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象
```
var a = {age: 12}
var b = a
a = {name: 'BOB', age: 13}
b.age = 14
console.log(b.age, a.name, a.age) // 14 Bob 13
// a、b这2个引用变量指向同一个对象（{age: 12}），
// 让a重新赋值{name: 'BOB', age: 13}，此时b指向的仍然是最初的{age: 12}
// 现在a、b指向的就是两个对象了，因为a重新赋值啦。
function fn2 (obj) { obj = {age: 15} }
fn2(a) 
console.log(a.age) // 13
// 应该最后一个输出，很多人的答案是15吧，为什么不是15呢？
// 因为这是在fn2函数作用域内重新赋值，此次赋值是局部中，
// 一旦fn2()函数执行完，函数本身会被释放，那{ age: 15 }就灰飞烟灭
// 所以最终执行完，打印a.age还是13。
```

> 函数执行完成，函数内的局部变量就会被释放。

**fn2()和上方其一讲的例子的fn()区别** 这和上方的fn()可不一样，fn()里是obj.name，那是点链操作，还是改的是同一个对象，fn()是修改属性，作用在全局环境中；而fn2()是改引用对象的值，作用在局部环境中。

#### 基本类型和引用类型

先看个例子
```
var a = 30;
var b = a;
a = 20;
console.log( b ) // 30
var a = [1,2];
var b = a;
a[0] = 5;
console.log( b ) // [5,2]
```

number,string类型都是基本类型，而基本类型存放在栈区，访问时按值访问，赋值是按照普通方式赋值；
对象和数组是通过引用来赋值的，所以改变a的同时b也会跟着改变。

- 基本类型
基本的数据类型有：undefined，boolean，number，string，null。

- 引用类型
引用类型指的是对象，其拥有属性和方法，并且我们可以修改其属性和方法。引用对象存放的方式是：在栈中存放对象变量标识名称和该对象在堆中的存放地址，在堆中存放数据。 最后附一张图：
![](https://www.qikecai.com/xindejob-file/picture/20210922/877666bbd5f705c9a6ae9226bcc91208.png)

> 数组是引用类型

看一段代码：
```
var tasks = this.data;
const taskId = 2;
tasks = tasks.filter(function(i){
	return i.index != taskId;
});
```

由于`filter`函数是返回一个新的数组，虽然仍然用tasks去接收，但这时候tasks的指向已经是新数组啦，所以tasks和data已经不在有关系。

`concat`也是返回新数组，而`push`和`splice`函数是在原数组上操作，所谓在原数组操作，指的是指向不变，这种情况下tasks和data是相关联的。

> 函数参数传递为值传递。 当传入的是`基本类型`的参数时，是复制了份内容而已； 当传入的参数为引用类型时，例如上面的`fn`，这看起来很像是传递的是引用，因为obj.name受到改变了，但其实不是，还是值传递，因为obj2本身的值就是新对象的地址，所以传进去的就是这个地址。

标签： javascript 引用传值

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：css3之transform详解translate

关于javascript引用变量赋值问题

随便看看

留言