教程 浅谈 JS 进阶之变量

running_runtu · 2017年11月16日 · 292 次阅读

前言

前端世界如此喧嚣,能进阶的何其稀少。大家好,你们的闰土哥在沉寂了数月之后又回来了!(此处应有掌声~~~)

前段时间在群里关于“闰土去哪儿了”的话题,让我既欣喜又尴尬。欣喜的是大家还记得我,尴尬的是我竟不知道该如何回复。原因有二,一是我换了家公司继续撸代码,二是那段时间我沉淀了一下自己的技术和生活。闰土这次回来是带着满满的干货想与大家分享,如果你在这里能学到一点点知识,收获一丝丝感悟,那闰土便知足了。(YY:按照惯例,此刻该听到搬小板凳的声音了,嘻嘻~)

正文

开门见山,这次闰土要讲讲JavaScript进阶。废话不多说,先拿变量开刀。

在我们前端日常的JavaScript编码中,总避免不了声明变量。那变量是什么呢?我们前端人员都知道,变量其实就是一个容器,用来存放各种不同的数据类型的值,包括基本类型值和引用类型值。基本类型值有五种,参加过前端面试的人想必都能倒背如流,分别是Undefined、Null、Boolean、Number和String。

定义基本类型值和引用类型值的方式是类似的,就是创建一个变量并为该变量赋值。先来看看下面的栗子:

var person = new Object();

person.name = 'runtu';

console.log(person.name);   // "runtu"

在上面的例子中我们创建了一个对象并将其保存在了变量 person 中。然后,我们为该对象添加了一个名为 name 的属性,并将字符串值“runtu”赋给了这个属性。紧接着,又通过console.log()函数访问了这个新属性。如果person这个对象不被销毁或者这个属性不被删除,那么这个属性将一直存在。

也就是说,对于引用类型的值,我们可以为其添加/修改/删除属性和方法,但是我们不能给基本类型的值添加属性,尽管这样做不会导致任何错误(我们建议不这么写,因为写了也没用 Orz)。

接下来我们再聊聊复制变量值。

先来看看下面的栗子:

var age1 = 26;

var age2 = age1;

在以上代码中,age1中保存的值是26,是基本类型值。当使用age1的值来初始化age2时,age2中也保存了值26,但该值只是age1的一个副本,所以,这两个变量可以参与此后任何操作而不会相互影响。

看完了复制基本类型值,我们再来看下一个栗子:

var person1 = new Object();

var person2 = person1;

person1.name = 'runtu';

console.log(person2.name);  // "runtu"

在这里,变量person1保存了一个对象的新实例。然后这个值被复制到了person2;换句话说,person1和person2都指向同一个对象。这样一来,当为person1添加name属性后,person2也可以访问到这个属性。

到这里,我们就可以适当的总结一下,当一个变量复制另一个变量的引用类型值时,这个值的副本其实是一个指针,而这个指针则指向存储在堆中的一个对象。复制操作结束后,两个变量实际上将引用同一个对象。因此,改变其中一个变量,就会影响到另一个变量。

接下来我们讲讲传递参数,重点来了,该划重点的划下,这是必考题。

函数传参,相信很多前端老司机都已经耳熟能详了,可能更多的前端新人小白们还是懵懵懂懂的,这里我说下。在ECMAScript中所有函数的参数都是按值传递的,也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样,原理是一样的。

接下来这句话可能有点绕,基本类型值的传递和基本类型变量的复制一样,同样的,引用类型值的传递和引用类型变量的复制是一样的。有不少工作了两三年的前端er在这个点上可能也会感到困惑。为什么呢?这个知识点可能比较晦涩难懂,因为像咱们平时访问变量有按值和按引用这两种方式,而参数只能按值传递。照样举个栗子:

function addSix(num){

    num += 6;

    return num;

}

var count = 20;

var result = addSix(count);

console.log(count);  // 20,没有变化

console.log(result);  // 26(有没有感觉这个数字出现频率较高,嘻嘻~)

这里的函数addSix()有一个参数num,而参数实际上是函数的局部变量。在调用这个函数时,变量count作为参数被传递给函数,于是数值20被复制给参数num。在函数内部,参数num的值被加上了6,但是这一变化不会影响外部的count变量,参数num和变量count素昧平生互不相识。假如num是按引用传递的话,那么变量count的值也将变成30,从而反映函数内部的修改。

当然使用数值等基本类型值来说明按值传递参数比较简单,但如果使用对象,那么问题就不那么浅显易懂了。闰土再举一个栗子:

function setName(obj){

    obj.name = 'runtu';

    obj = new Object();

    obj.name = 'shaonian';

}

var person = new Object();

setName(person);

console.log(person.name);  // runtu

有小白会问:console出来的怎么不是 “shaonian” 呢?

这是一个很经典的问题,你想如果person是按引用传递的,那么person就会被自动修改为指向其name属性值为“shaonian”的新对象。但是,重点来了。当接下来再访问person.name时,显示的值仍然是“runtu”。这说明即使在函数内部修改了参数的值,但原始的引用仍然保持不变。实际上当在函数内部重写obj时,这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁。

所以,结论就是,所有的函数传参都是按值传递的。(又该划重点了,咳~咳~)

备注:本文参考红宝书,如有雷同,纯属拷贝。

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册