函数声明、表达式、原型继承

    xiaoxiao2021-03-25  84

    < html >   < body > < script >    function Foo(){      getName = function(){return(1);};      return this;    }    Foo.getName = function(){return(2);};    Foo.prototype.getName = function(){return(3);};    var getName = function(){return(4);};    function getName(){return(5);};     console.log( Foo.getName());     console.log(getName());     console.log(Foo().getName());     console.log(getName());     console.log(new Foo.getName());     console.log(new Foo().getName());     console.log(new new Foo().getName());   </ script > </ body > </ html >

    在说之前,稍微改一下代码,不改变它的原意,只是让它更容易显示和显示正确,console.log()是后台输出的方法,并不影响结果

    上面是后台输出的结构。

    这些代码大概的意思就是分析变量和对象的值,还有对象的继承

    我们把结果一行一行分析

    Foo.getName():2

    为什么是2,因为这一行  Foo.getName = function(){return(2);};,它定义了Foo的属性getName,其值是 function(){return(2);},Foo.getName()就是把Foo的属性getName的值执行一遍,就是执行function(){return(2);},所以得到2

    接着,getName():4

    为什么是4,因为这一行 var getName = function(){return(4);}; ,你可能会问function getName(){return(5);};为什么不起作用?因为在变量名与函数名相同的情况下,给该变量赋值之后,与其同名的函数将不起作用,也就覆盖了。如果我们把赋值语句改为var getName =1;,你会发现出错了,因为无论变量赋了什么值,与其同名的函数都不再起作用。

    接着,Foo().getName():1

    为什么是1,因为下面代码

    function Foo(){

        getName = function(){return(1);};

        return this;

      }

    首先Foo().getName()与Foo.getName()有什么差别呢,差别就在于Foo()与Foo,Foo()是已经把 Foo()的内容执行了一遍的,Foo则是一个函数变量,Foo()里面return this;,这里链式调用的用法,详细的介绍可以搜一下,Foo.getName() 中 getName()是Foo的属性,但是Foo().getName()中,getName()不是Foo()的属性,而是全局变量var getName = function(){return(4);};,Foo().getName()的意思是Foo()执行完后,回到全局中,再调用getName(),这样就叫链式调用。那为什么结果是1不是4,因为Foo()执行的结果使 getName = function(){return(1);};,所以再次调用getName(),结果就是1,

    这也解释了下一行的结果为什么是1

    getName():1

    new Foo.getName():[object Object],

    这一行的结果莫名其妙,只是一个类名而已,其实可以改一下代码,添加下面两条代码

    Foo.getName.prototype.name = function(){return(100);};

    console.log("new Foo.getName():"+ new Foo.getName().name());

    输出结果是

    也就是说,new Foo.getName()就是 开辟一个 Foo.getName()对象,我们知道其实js里面所以变量都可以作为对象,所以 Foo.getName()本身也是一个对象,只是这个对象没有带任何的属性,所以我们通过Foo.getName.prototype.name = function(){return(100);};新加了一个属性给它,new Foo.getName().name(),就是新建完后立即调用这么一个方法。

    new Foo().getName():3

    这一句结果根据上面的知识就很好理解了,代码中输出这条结果的句子是

    console.log("new Foo().getName():"+ new Foo().getName()); 

     new Foo() 新建一个Foo()的类, new Foo().getName()然后立即调用getName()的方法

    Foo.prototype.getName = function(){return(3);};这一句就是给类Foo()增加了一个属性getName

    new new Foo().getName():[object Object],

    最后一行的结果其实也是这样,其实就相当于 先执行  b = new Foo(),再执行new b.getName(),所以结果还是对象,但我们应该明白 new b.getName()与 new Foo.getName()是不一样的,b.getName() 与 Foo.getName()虽然 函数内容是一样的,但却是 不同的变量名new b.getName()与 new Foo.getName()是不一样的
    转载请注明原文地址: https://ju.6miu.com/read-19359.html

    最新回复(0)