资讯专栏INFORMATION COLUMN

一个JS初学者关于查找变量的一些感悟。。

Apollo / 813人阅读

摘要:我是一个的初学者,这几天被直接访问标识符和通过访问标识符搞的头疼,于是大胆的做了一个猜测直接访问标识符是通过作用域链进行查找的。然后就开始试了起来结合下面的代码来说首先第一个调用函数,通过作用域链来查找。

我是一个js的初学者,这几天被直接访问标识符和通过this访问标识符搞的头疼,于是大胆的做了一个猜测:
1. 直接访问标识符是通过作用域链进行查找的。
2. 通过this访问标识符是通过原型链来查找的。
然后就开始试了起来!!!!

结合下面的代码来说

var a = "abc";

var obj = {
    a: "def",
    display3: function () {
        var a = "sssss";
        console.log(a);
    },
    display4: function() {
        console.log(this.a);
    }
}

Object.prototype.a = "ghi";

function display1() {
    // var = "hahaha";
    console.log(a)
}

function display2() {
    console.log(this.a);
}

display1(); // "abc"
display2();  // "abc"

obj.display3();
obj.display4();

// display2.call(obj);  // "def"
// display1.call(obj);  // "abc"

首先:

第一个:
调用display1函数,通过作用域链来查找a。此时display1的作用域链为:display1的活动对象→全局活动对象,
所以找到了全局活动对象中的"abc",如果在display1中有变量a,那么输出的则是这个变量的值。

第二个
调用diplay2函数,通过原型链来查找a。因为this是基于当前的执行环境绑定的,所以this指向全局变量对象(也就是window),所以找到了"abc"并输出。
有意思的是,此时如果我删除window中定义的a="abc", 那么输出结果则是"ghi". 于是回忆了一下自己所学的知识,发现因为window对象是Global对象在浏览器中的表现,然后Global是js中的单体内置对象,那么似乎它也应该继承自Object.prototype, 恩..按照我的猜想,输出结果为"ghi"是情理之中的。

第三个:
通过obj调用display3函数,因为前面没有this,所以是通过作用域链进行查找的,此时display3的作用域链为display1的活动对象→全局活动对象,所以输出结果是"abc", 同样,如果我再display3中定义了a,那么输出的则是这个a的值

第四个
通过obj调用display4函数,因为前面有this,所以是通过原型链进行查找的,此时this指向的是obj,所以输出的结果是obj对象中"def",如果我们删除obj中的a属性,那么输出结果则是Object.prototype中的"ghi",如果再删除这个ghi,那么输出结果就是undefined了。
上面这些好像都符合逻辑,可是我又突然发现,当调用display1时,如果删除了作用域链中每个变量对象的a属性,那么输出结果则是"ghi", 这个"ghi"是在Object.prototype中定义的,所以

综合了一下

1. 直接访问标识符是通过作用域链和原型链综合进行查找的。
2. 通过this访问标识符是通过原型链来查找的。
然后又出现了一个问题:直接访问标识符的查找顺序是 1:先查找作用域链前端的变量对象,然后再查找它的原型,然后再查找作用域链中下一个变量对象,然后再查找它的原型 还是 2: 一直查找作用域链中的变量对象,知道window对象,再查找它的原型呢?

然后又突然发现,在调用display1时,如果display1中没有定义a变量,访问到的则是window中的a = "abc",而不是Object.prototype中的a = "ghi".

所以再综合一下

1. 直接访问标识符的顺序是按顺序查找作用域链中的每一个变量对象直至全局变量对象,如果全局变量对象中没

有该变量,则沿着window对象的原型链进行查找。

2. 通过this访问标识符是通过原型链来查找的。

我去累死了,我也没想到自己写了这么多,从结果来看,应该是这样,不过也不知道到底是不是这样。。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85944.html

相关文章

  • 项目中使用 TypeScript 一些感悟

    摘要:上周发布了一款名为的工具,是完全采用以下简称来开发的。而使用,可以在一定程度上减少这个问题。自成文档的特性对于多人维护的项目来说是非常有用的,它能够大大降低项目当中沟通和理解的成本。作为的超集,我们可以在中放心使用的各种高级能力。 showImg(https://segmentfault.com/img/remote/1460000019689248); 上周发布了一款名为 Smart...

    pcChao 评论0 收藏0
  • 由浅入深前端面试题 和矫情“浪漫主义”诗句

    摘要:好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。这一星期陆陆续续面试了不少于个人,其中不乏工作履历突出的候选者。这样做的问题在于循环并没有要求枚举对象的修改与当前循环保持一致。 好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。 传统的佛学经典里,被世人熟知的有这样一句话:一花一世...

    JerryZou 评论0 收藏0
  • 由浅入深前端面试题 和矫情“浪漫主义”诗句

    摘要:好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。这一星期陆陆续续面试了不少于个人,其中不乏工作履历突出的候选者。这样做的问题在于循环并没有要求枚举对象的修改与当前循环保持一致。 好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。 传统的佛学经典里,被世人熟知的有这样一句话:一花一世...

    lk20150415 评论0 收藏0
  • 《高性能JavaScript》读书笔记

    摘要:除此以外,让元素脱离文档流也是一个很好的方法。因为元素一旦脱离文档流,它对其他元素的影响几乎为零,性能的损耗就能够有效局限于一个较小的范围。讲完重排与重绘,往元素上绑定事件也是引起性能问题的元凶。高性能这本书非常精致,内容也非常丰富。 showImg(https://segmentfault.com/img/bVJgbt?w=600&h=784); 入手《高性能JavaScript》一...

    W_BinaryTree 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<