一分钟看懂javascript按值传递与按引用传递

LXMAJS 发布于6月前 阅读41次
0 条评论

基本类型与引用类型

值类型(基本类型):string,number,bool,null,undefined。
引用类型:Array、Object、Function、Date等有多个值构成的可变长度的复杂类型。

基本类型与引用类型有什么区别?

(1)基本类型的变量保存的是变量值,引用类型的变量保存的是内存地址;
(2)基本类型长度固定,在内存中占据固定大小的空间,数据存放在栈内存中;引用类型可以给对象添加属性和方法,长度不固定,数据存放在堆内存中。引用类型的存储需要栈区和堆区(堆区是指内存里的堆内存)共同完成,栈区内存保存变量标识符和指向堆内存中该对象的指针,也可以说是该对象在堆内存的地址;
(3)基本类型在赋值的时候拷贝值,引用类型在赋值的时候只拷贝地址,不拷贝值。

基本类型与引用类型的复制

const num1 = 5;
const num2 = num1;

const obj1 = {};
const obj2 = obj1;

基本类型复制与引用类型复制,看不懂直接上代码!!

// 测试引用类型传值和数组类型传值
const obj = {
  success: false,
  result: {
    name: '222'
  }
};
let name = obj && obj.result && obj.result.name; // name为一个str,具体的值为基础类型,name这里保存的是变量值,而不是引用地址
console.log(name); // 222
name = "333";
console.log(obj.result.name); // 222, name为变量值,name的改变并不会影响到obj.result.name
obj.result.name = "44444";
console.log(obj.result.name); // 44444
console.log(name); // 333,name为变量值,而非引用地址,与obj.result.name相互不影响,因此obj.result.name的改变也不会引起name的变化
const obj = {
  success: false,
  result: {
    name: '222'
  }
};
let result = obj && obj.result;
console.log(result);  // { name: '222' },obj.result是一个Object类型,这里result存的是obj.result的引用地址,result和obj.result指向堆中的同一个地址,相互影响
obj.result.name = "44444";
console.log(obj.result.name); // '44444'
console.log(result); // { name: '44444' }
result.name = "xxxxx"; // 属性修改,相互影响
console.log(obj.result); // { name: 'xxxxx' }
// result重新赋值,指向一个新的引用地址,此时result与obj.result指向不同地址,不再相互影响
result = {
  name: 'ooooo'
};
console.log(result); // { name: 'ooooo' }
console.log(obj.result); // { name: 'xxxxx' }
const obj = {
  success: false,
  result: [0, 1]
};
let result = obj && obj.result;
console.log(result); //[0, 1],obj.result为Array类型,result和obj.result指向堆中的同一个地址,相互影响
console.log(obj.result); // [0, 1]
result.push('aa'); // 数组的push操作是在原数组基础上操作,并不生成一个新的数组,result和obj.result依然指向同一个地址,相互影响
console.log(result); // [0, 1, 'aa']
console.log(obj.result); // [0, 1, 'aa']
result = [0, 1, 2]; // result重新赋值,此时result指向堆中一个新的地址,result与obj.result指向不同地址,不再相互影响
console.log(obj.result); // [0, 1, 'aa']
console.log(result); // [0, 1, 2]

函数参数传递按值类型还是引用类型?

基本类型参数的传递与基本类型的复制一样,传递的是变量值。

function addTen(num) {
   num = num + 10;
   return num;
}
var count = 20;
var result = addTen(count);
console.log(count); // 20
console.log(result); // 30

引用类型参数的传递与引用类型的复制一样,传递的是内存地址。

function setName(obj){
   obj.name = 'xxx';
   obj = {name: 'ppp'}; // obj指向一个新的地址,与person不再指向同一个地址
   console.log(obj.name); // 'ppp'
}
const person = {name : 'oo'};
setName(person);
console.log(person.name); // ‘xxx’

官方解释来一发:

ECMAScript中所有函数的参数都是按值传递的。

也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。基本类型的传递如同基本类型的复制一样,而引用类型值的传递,如同引用类型变量的复制一样。

总结

很简单,javascript函数参数都是按值传递(都是栈内数据的拷贝)。
基本类型传的是值本身(因为直接把值存在栈内),引用类型传的是对象在内存里面的地址 (因为复杂对象存在堆内,所以在栈里存对象所在的堆地址)。

参考文献

https://www.zhihu.com/questio...
https://www.cnblogs.com/focus...
https://www.cnblogs.com/telne...

查看原文: 一分钟看懂javascript按值传递与按引用传递

  • redswan
  • yellowtiger
  • smallwolf
  • goldenelephant
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。