美文网首页Java 核心技术
通过实例理解和记忆JavaScript面向对象和引用机制

通过实例理解和记忆JavaScript面向对象和引用机制

作者: 果然 | 来源:发表于2019-04-01 16:35 被阅读2次

JavaScript里,万物皆对象

什么是对象呢?本文主要带大家理解和记忆以下内容:

1 、要是对象就可以有自己的私有属性
2、 只要是new 出来的都是对象.
3 、不同对象肯定不相等
4 、对象都会有引用机制.

光看这4条,是不是记不住也不能理解?
那就看下面的代码例子吧!仔细看注释,
简书的代码显示区显示的字体太小,放大浏览器看吧!

var str = "abc";//不是对象
str.a=20;//判断它是否有自己的私有属性
console.log(str.a);//undefined

var str2 = new String('def');//只要是new出来的都是对象
str2.a=20;//判断它是否有自己的私有属性
console.log(str2.a);//20

var str3 = String('ert');//不是对象
str3.a=30;//判断它是否有自己的私有属性
console.log(str3.a);//undefined

通过上面的例子,可以看出:

要是对象就可以有自己的私有属性

理解和记忆:

两个变量的值相同,它们就相等.

仔细看注释,

var aodi = "车";
var aotuo = "车";
console.log(aodi == aotuo);//true; 
//快速记忆:奥迪奥拓都是车

上面的例子,我们通过记忆奥迪奥拓都是车,
就能记住两个变量的值相同,它们就相等

理解和记忆:

不同对象肯定不相等

仔细看注释,

var aodi = {lun:4};
var aotuo = {lun:4};
console.log(aodi == aotuo);//false;
//快速记忆:虽然都有4个轮(lun),但两个车还是不一样.

aodi = [4];
aotuo = [4];
console.log(aodi == aotuo);//false;
//快速记忆:换成数组对象,两个车(数组)还是不一样.

aodi = new Number(4);
aotuo = new Number(4);
console.log(aodi == aotuo);//false;
//快速记忆:换个声明方式,两个车(数组)还是不一样.

理解和记忆:

对象都会有引用机制

仔细看注释,

var qi = {};//理解为:妻没钱
var fu = qi;//理解为:夫妻一家人
fu.qian = 1000;//理解为:夫有1000块钱
console.log(qi);//结果:{qian: 1000}  理解为:妻也有钱了

通过图表,再看看引用机制和内存机制吧

上图是代码运行前2行时,内存机制如图所示 上图是fu.qian = 1000;之后,内存机制如图所示

.

当从一个变量向另一个变量赋值引用类型的值时,同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中。

这个值的副本实际上是一个指针,而这个指针指向存储在堆内存的一个对象。那么赋值操作后,两 个变量都保存了同一个对象地址,则这两个变量指向了同一个对象。

因此,引用类型的赋值其实是对象保存在栈区地址指针的赋值,因此两个变量指向同一个对象,任何的操作都会相互影响。

我们在通过上面的例子进行扩展,用来理解一下JavaScript回收机制

回收机制有两种:

null

delete

先看null
仔细看注释,

var qi = {};//理解为:妻没钱
var fu = qi;//理解为:夫妻一家人
fu.qian = 1000;//理解为:夫有1000块钱
console.log(qi);//{qian: 1000}理解为:妻也有钱了
qi = null;
console.log(qi);//结果:null
console.log(fu);//结果:{qian: 1000}  理解为,妻没了,钱还在

或者

var qi = {};//理解为:妻没钱
var fu = qi;//理解为:夫妻一家人
fu.qian = 1000;//理解为:夫有1000块钱
console.log(qi);//{qian: 1000}理解为:妻也有钱了
fu = null;
console.log(qi);//结果{qian: 1000} 
console.log(fu);//结果null 理解为,钱还在,夫没了,

这么崩溃的结果!

仔细看注释,你是否一下就记住了这个知识点?

再看delete

var qi = {};//理解为:妻没钱
var fu = qi;//理解为:夫妻一家人
fu.qian = 1000;//理解为:夫有1000块钱
console.log(qi);//{qian: 1000}理解为:妻也有钱了
delete fu.qian;
console.log(qi);//结果 { }
console.log(fu);//结果 { } 理解为:夫把钱花了,夫妻都没钱了

你家混账男人把钱输光了!!人还在,没钱了!

换成delete qi.qian呢?

var qi = {};//理解为:妻没钱
var fu = qi;//理解为:夫妻一家人
fu.qian = 1000;//理解为:夫有1000块钱
console.log(qi);//{qian: 1000}理解为:妻也有钱了
delete qi.qian;
console.log(qi);//结果 { }
console.log(fu);//结果 { } 理解为:妻把钱花了,夫妻都没钱了

仔细看注释,败家娘们把钱拿去买包,你们家没钱了!

这个例子是不是很生动?通过这个例子,你一下就记牢了这些知识点!

理解和记忆:

变量如果不想引用,就重新赋值

举个例子:
仔细看注释,

var fu = [1,2,5];//理解为:夫钱包里有1元2元5元的纸币
function banZhuan(arr){//理解为:搬砖函数
    arr.push(10);//理解为:搬砖能挣10元
}
banZhuan(fu);//理解为:让丈夫去搬砖挣钱
console.log(fu);//结果:[1, 2, 5, 10] 夫钱包里更有钱了

理解了上面这个例子,我们再看下面的例子,例子中把变量qi也放进来,
仔细看注释,

var fu = [1,2,5];//理解为:夫钱包里有1元2元5元的纸币
var qi = fu;//理解为:夫妻一家人,共用一个钱包
fu = [2,5,10];//理解为:夫藏了个私房钱包,
qi.push(20);//理解为:妻子往钱包里放了20元纸币
console.log(fu);//结果:[2, 5, 10]理解为夫藏的私房钱包,老钱包跟他没关系了
console.log(qi);//结果:[1, 2, 5, 20]
//理解为妻掌握的钱包还是老钱包,只是增加了20,丈夫的私房钱包跟她没关系

上面的例子就说明了变量如果不想引用,就重新赋值的过程.

相关文章

网友评论

    本文标题:通过实例理解和记忆JavaScript面向对象和引用机制

    本文链接:https://www.haomeiwen.com/subject/avtpbqtx.html