JS学习笔记之变量及作用域(下)

相信大家在之前的学习中已经掌握了基本类型和引用类型的相关概念;基本类型 按值访问,引用类型按内存地址访问,以下是对变量及作用域的深入理解;

大家应该知道语句 var n=1;这是一个创建变量并且为变量赋值的的语句;
咱们来详细解剖下这个语句在解析器中会发生什么?

1. var n (创建变量名),

在解析器中创建了一个名字来保存他的变量同时设置了这个变量的作用域范围(该变量所在的函数作用域范围),并且无论在函数内部哪里,在预处理的过程中都会将变量提升到顶部(既变量提升)

*变量提升

由于 JS是一门编译语言,编译时分为编译过程和运行过程,编译过程是进行词法语法分析(既识别你所写的代码,分辨出,语句,运算符,数据类型)如在这个过程中发现声明语句var n ,解析器回去当前作用域寻找是否有n 这个变量存在,如果有则忽略声明,没有则创建一个变量n ,并且为他分配一定内存空间,当编译完成后会生成一段代码(既后面要运行的代码)

var a=123;
function f(){
    alert(a);//undefined
    var a=1;
    alert(a);//1
}
f()

变量提升解析,解析器将函数作用域里面的var a=1;语句拆解,将变量声明 var a提到函数作用域顶端;

var a=123;
function f(){
    var a;
    alert(a);//undefined
    a=1;
    alert(a);//1
}
f()

2. n = 1给变量赋值

赋的这个值分为引用类型和基本类型。解析器回先判断这个值是引用类型还是基本类型。如果是引用类型会把值保存到内存中,而值的内存地址保存在变量当中。如果值是基本类型,直接把值保存在变量中;

属性的增删及修改过程

当n 为基本类型时,设置属性不会报错但也没有任何效果
当n 为object,设置属性a 当中保存的就不是1了,而是定义对象的地址解析器去判断a的时候通过地址到内存去找对象,并且对对象的属性/方法进行增删。

复制变量值

var a=123;
b=a;
b=3
alert(a)//123;
alert(b)//3         

在a中保存的值是123;将a 的值赋给b ,b就相当于有了a 的副本,b的你死我活不关a的s事,a和b处于平行世界


var person1=new Object();
var person2=person1;
person1.name='alanshiyi';
alert(person2.name)

person2 复制了一份内存地址, person2和person1保存的是一份相同的地址若person1.name是alanshiyi ,person2.name 也是 他俩是人和影子的关系;

var person1=new Object();
var person2=person1;
person1.name='alanshiyi';
person2.name='阿里巴巴'
alert(person2.name)
alert(person1.name)

当修改person2时候,解析器会先找到person2发现他保存的是一个内存地址就顺着内存地址找到内存里的name 改成‘阿里巴巴’,而当person1.name 要访问时解析器看person1里保存的地址,顺着地址找到刚才修改的内存‘阿里巴巴’;

传递参数

当一个变量作为函数参数进行传递时所有的参数都按值传递

接下来说个大家都很迷茫的问题
简单的说就是,我们平常的参数传值(参考书p70-p71中代码) 如

function add(num){
 num+=10;
 return num;
}
var count=20;
result=add(conut);
alert(count)//20
alert(result)//30

num接受的参数是a这个基本类型复制的副本10;相当于前面说的复制部分a=num;但是a和num是独立的;


function setName(obj){
    obj.name='Nicholas';
}
var person=new Object();//全局变量
setName(person);
alert(person.name)//'Nicholas'

作为函数传递一个引用类型的变量;函数外的是全局变量;它的作用域范围是至少是函外层;而复制出来的这个参数他是以一个局部变量且作用范围在函数内部,和引用类型复制一样,虽然相互独立但是他们当中都保存同一个位置的引用,如果对参数进行修改,内存中的对象也会被修改。而再次通过函数外的访问时,访问的还是内存中的修改的变量;

虽然和引用类型复制时的引用访问一样,但这不能说明引用类型是按引用传递的;

课本上又给了一个例子


function setName(obj){
   obj.name='Nicholas';
   obj=new Object();//局部对象
   obj.name='Greg';
}
var person=new Object();//全局对象
setName(person);
alert(person.name)//'Nicholas'

这段代码重新定义了一个对象obj , 并且给obj添加了不同的属性,(按照引用传递的说法obj当修改obj.name;时候,解析器会先找到obj发现他保存的是一个内存地址就顺着内存地址找到内存里的name 改成‘Greg’,而当person.name 要访问时解析器看obj里保存的地址,顺着地址找到刚才修改的内存‘Greg’ 才对,但是person.name 返回是‘Nicholas’。
返回‘Nicholas’的原因:在函数内部重新定义一个对象obj,就相当于创建一个新的变量,而且还是一个局部变量,这个变量和外部的person是没有任何关系的,全局对象无法访问局部对象,且局部对象在函数执行完毕后即可销毁。所以引用类型的传递是按值来传递的。

变量的类型检测

typeof
区分变量类型是:基本类型还是对象(不能区分具体是什么对象)
instanceof 返回布尔值
语法:object instanceof 对象类型

作用域和内存

作用域:计算机对值进行保存和读取的规则;
当对值进行保存时,肯定需要一个范围,如果是这个范围是以函数为单位的话就叫函数做用域,以块为单位的话叫块级作用域,单位越小,重复概率越小,作用域可以相互嵌套。

执行环境和作用域

在本章开头提过变量提升的问题,我再来重新捋一遍;
主要讲的就是解析器在编译时的情况;

1.打开页面加载JS时,解析器会创建一个全局作用域(相当于建房子);

2.变量的声明,解析器发现有变量声明,就会去当前作用域找没有相同的变量存在,没有的话就创建这个变量,并为他分配一定的内存空间且将声明提到当前作用域顶上(分配房间)。

3.如果编译的过程中发现声明的是一个函数(和变量的声明差不多)但是它会建立一个新的作用域(相当于分配一个房间再给它空间范围)。这会出现一个新的问题,如果变量名和函数名重名的而且在同一个作用于下,解析器就会在当前作用域下覆盖变量。

当都编译完成后会生成一段代码。
接下来就是代码运行的部分

作用域链

4.代码执行
接上回 解析器在编译完成时函数运行过程中创建了作用域,也生成了所需执行的代码,这个代码在运行阶段会创建作用域链,作用域链把开始创建的作用域链接起来形成一个链条,对函数或比那辆进行访问时要按照作用域链进行依次的访问
访问方式 :先在当前作用域找,找不到再从父级一层一层往上找 ,直到全局作用域;

var color='blue';
function changeColor(){
    var anotherColor='red';
    function swapColor(){
        var tempColor=anotherColor;
        anotherColor=color;
        color=tempColor;
        //这里可以访问color,anothercolor和tempColor
    }
    //这里可以访问color,anotherColor,但不能访问tempColor和swapColor()
}
//这里只能访问color和changeColor()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容