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

2020-08-29  本文已影响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。

上一篇 下一篇

猜你喜欢

热点阅读