奇怪的JS

简介: 有的时候发现JS是一门很高深的语言,不是我等俗人可以学会,没有private,没有public不说,居然连Class都没有,这个世界就是这样,有的东西你不一定非要想通,也不一定非要剖根问底,有的时候你只需要接受。

有的时候发现JS是一门很高深的语言,不是我等俗人可以学会,没有private,没有public不说,居然连Class都没有,这个世界就是这样,有的东西你不一定非要想通,也不一定非要剖根问底,有的时候你只需要接受。JS的世界是一个奇怪的世界,变量可以重复定义,this也是一个多变的东西,就连函数也可以有多重角色,我们从下面的例子入手吧,猜猜答案是多少?

   function Animal() {
            this.name = 'Animal';

            this.sleep = function (who) {
                alert(who + "   sleep!!");
            }
        }
        function Dog() {
            Animal.call(this);

        }
        function test() {
            var dog = new Dog();
            dog.sleep("dog");
        }
        function ScopeTest() {

            this.Add = function (a, b) {
                fAlert();
                return a + b;
            };

            fAlert = function () {
            alert('bbbb');
            }

            

        }
        var sCope= new ScopeTest();
        alert(sCope.Add(3, 4));

        test();

 

JS中最奇怪的就是这个this,我个人认为,因为在C#或者Java中this是始终指向当前的对象的,而JS中的this有的时候指向window,有的时候指向其它对象,有的时候这个this还会被改变,比如上面的代码,当用了call这个函数之后,Animal里面的this就成了dog,这个可以在调试的时候跟踪到:

JS中的所有方法和变量都属于一个作用域,而上面提到的this是始终指向这个作用域的,作用域其实就是一个范围,而且作用域,是在运行的时候决定的,在JS中因为函数充当了类和对象的作用,因此在不用实例化的时候也是可以运行的,如果未采用new关键字,那么函数中的this指向的就是window,如果采用了new,那么情况就不一样了,一个小片段的测试就可以让我们得出结论:

     var s="Hell0"
        function same() {
             var s="Hello!"
            alert(this.s);
            alert(window.s)
            if (this === window) {
            alert("the same");
            }

    }
    same();
    var fSame = new same();
    

现在看下fSame函数执行的时候this.s弹出undefined,为什么不是函数内部定义的var s="Hell哦!"的值呢?这个就和JS有关了,因为在JS中函数是不能在外部读取内部的以var开始的变量的的值的,如果加上this,那就又不一样了。

        var s="Hell0"
        function same() {
            this. s="Hello!"
            alert(this.s);
            alert(window.s)
            if (this === window) {
            alert("the same");
            }

    }
      var fSame = new same();

下面这个代码片段的结果又是多少呢?

 

  <script type="text/javascript">
             var name = "liu";
             function callName() {
                 alert(name);
                 var name = "yu";
             }
             callName();

Javascript在进入一个函数域时,就已经声明好了函数里面需要用到的所有临时变量,注意,仅仅是声明,并没有执行赋值,每个变量的初始值都是undefined,赋值是在执行的时候做的,JS是按照顺序从上到下执行,因此这个弹出undefined的结果,也就解释的清楚了。

 

 

JS中各种奇怪,这些奇怪,让我经常陷入陷阱之中,要想理解的深刻,那就自己给自己挖几个陷阱然后跳进去,然后慢慢的爬出来,通过模拟,通过跟踪,通过调试,也许就能拨开云雾见太阳。

相关文章
|
3月前
|
移动开发 JSON JavaScript
分享188个JS图片效果JS代码,总有一款适合你
分享188个JS图片效果JS代码,总有一款适合你
35 1
|
7月前
|
JavaScript
js的常见错误
js的常见错误
|
20天前
|
JavaScript 前端开发 开发者
双等号的困惑(js的问题)
双等号的困惑(js的问题)
|
5月前
|
JavaScript 前端开发 API
|
JavaScript
一道有趣Js面试题,你有几种办法解决?
引子: 今天写了手撕instanceof,以我的风格来说,再写一篇今天已经算是高产了~但是,我真的忍不住想把这个题给大家分享一下,特别有意思,e.g. 说 var 一个 a 等于什么的时候,它即1,又2,还==3 ?
66 0
|
Web App开发 XML JavaScript
【Js】JS的历史:认识JS的来龙去脉
BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。它是一种与平台和语言无关的应用程序接口API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。JS的书写位置有三种,分别为行内式,内嵌式,和外部式。
【Js】JS的历史:认识JS的来龙去脉
|
存储 Web App开发 自然语言处理
JS 到底是在干嘛:一文搞懂JS 执行上下文
JS 到底是在干嘛:一文搞懂JS 执行上下文
199 0
JS 到底是在干嘛:一文搞懂JS 执行上下文
|
Web App开发 JavaScript 前端开发
好程序员web前端分享js技巧和js中一些常见的陷阱
好程序员web前端分享js技巧和js中一些常见的陷阱。 你是否尝试过对数组元素进行排序? JavaScript默认使用字典序(alphanumeric)来排序。因此,[1,2,5,10].sort()的结果是[1, 10, 2, 5]。
6241 0
|
JavaScript
|
Web App开发 JavaScript
js断点调试心得
1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrom...
1276 0