美文网首页
构造函数和原型对象中同名的属性和方法怎么处理?

构造函数和原型对象中同名的属性和方法怎么处理?

作者: 之幸甘木 | 来源:发表于2020-08-29 00:16 被阅读0次

    代码如下:

        var Foo = function () {
            Foo.a=function (){
                console.log(1);
            }
            this.a=function(){
                console.log(2);
            }
        }
    
        Foo.prototype.a=function(){
            console.log(3);
        }
    
        Foo.a=function(){
            console.log(4);
        }
    
        Foo.a();  //输出4
    
        let obj=new Foo();
    
        obj.a(); //输出2
    
        Foo.a(); //输出1
    

    在这个代码中,我们有两个问题需要解决,一是为什么第一次调用Foo.a输出的是4,第二次调用输出的是1,二是为什么实例化出来的obj调用a方法,输出来的是2而不是3。

    为什么第一次调用Foo.a输出的是4,第二次调用输出的是1?

    很简单,因为一开始Foo只是声明,但未被调用。代码执行过程中,在外部为Foo添加了一个方法a会输出4,因此,第一次调用Foo.a的时候自然输出4,在实例化Foo生成obj时调用了Foo函数,调用过程中又为其添加了a方法,确切的说——应该是重写。所以第二次调用Foo.a时,自然会执行重写的a的内容,也就是输出1。
    这也说明了一个问题:函数是对象。

    为什么实例化出来的obj调用a方法,输出来的是2而不是3?

    被构造函数实例化的对象,其属性和方法来自于两个,构造函数和原型对象。
    构造函数在实例化对象时,会将所有带this的属性和方法(姑且这么说吧)赋给实例化的对象,这样该对象就有了自己的属性和方法。
    原型对象的作用是,对象在调用一个属性或方法时,若自身有该属性或方法,则调用自身的属性或方法,若没有,再去其原型对象中查找并调用。
    所以,实例化的obj会先去查找自己有没有a方法,若有,则执行自己的a方法,否则,查找原型对象中是否有a方法,若有,则调用。因此,本例输出的结果是2。

    相关文章

      网友评论

          本文标题:构造函数和原型对象中同名的属性和方法怎么处理?

          本文链接:https://www.haomeiwen.com/subject/xrfdsktx.html