js通过方法返回对象的注意点

Posted 2021-03-25 源氏西格玛

问题：js通过方法返回一个字面量对象和返回一个提前已经定义好的字面量对象有区别吗？

答案：有

我们先来看看第一种情况，fun1方法返回一个提前没定义的字面量对象，然后通过调用方法返回三个对象，分别是obj1, obj2, obj3,然后我修改obj2对象的age方法，打印obj1, obj2, obj3,的age属性分别是什么？

 1 //第一种情况：
 2         function fun1() {
 3 
 4             return {
 5                 uname: `ash`,
 6                 age: 18
 7             }
 8             //这里返回一个字面量对象，
 9             //每次返回的不是同一对象地址，所以改变obj2的age属性，obj1，obj3,age属性是不会有影响的
10         }
11         obj1 = fun1();
12         obj2 = fun1();
13         obj3 = fun1();
14         obj2.age = 16;
15         console.log(obj1.age);
16         console.log(obj2.age);
17         console.log(obj3.age);

打印结果 ：

obj1.age = 18   

obj2.age = 16  

 obj3.age = 18

为什么户出现这样的结果呢？因为fun1每次返回的不是同一对象地址，所以改变obj2的age属性，obj1，obj3,age属性是不会有影响

 

再看第二种情况，我先定义好obj3，通过fun2()方法返回这个对象，现在我调用fun2方法，返回obj21  obj22 obj23 对象，修改obj22对象的age属性为16，分别打印obj21  obj22 obj23  对象的age属性

结果：

obj21.age = 18 

obj21.age = 16 

obj21.age = 18

 1 //第二种情况：
 2         var obj3 = {
 3             uname: `ash`,
 4             age: 18
 5         };
 6 
 7         function fun2() {
 8             return obj2;
 9         }
10         obj21 = fun2();
11         obj22 = fun2();
12         obj23 = fun2();
13         obj2.age = 16;
14         console.log(obj21.age);
15         console.log(obj22.age);
16         console.log(obj23.age);

为什么会出现这样的结果呢？

因为这里返回一个已经定义好的对象，每次返回的都是同一个内存地址，所以只要其中提个对象属性被改变，通过该方法返回对象的属性都会改变