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

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

作者: 之幸甘木 | 来源:发表于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。

相关文章

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

    代码如下: 在这个代码中,我们有两个问题需要解决,一是为什么第一次调用Foo.a输出的是4,第二次调用输出的是1,...

  • new的模拟实现

    实现目标: 创建新的对象 新对象属性有构造函数中this绑定的属性 新对象可以访问构造函数原型链上的属性和方法 如...

  • 原型链的理解

    原型对象和函数三角形 什么是原型? 构造函数的prototype属性的值就是原型 将公共的方法或属性放到原型对象中...

  • javascript中面向对象编程-创建对象之原型模式

    理解名词:对象 原型对象 原型属性 函数 构造函数 实例 对象: Object,创建对象,对象属性方法原型对象:...

  • Javascript笔记(Day02)

    1、日常开发中,一般使用构造函数与原型结合的方式,构造函数用于定义实例属性,原型对象用于定义方法和要共享的属性。这...

  • JavaScript原型,构造函数

    构造函数(可以用来创建大量相同属性和方法的对象,和类相似): 原型: 每一个构造函数都有prototype(原型)...

  • 继承的几种方式

    构造函数,原型和实例的关系每个构造函数都有一个原型对象prototype,原型对象中有个constructor属性...

  • 浅谈javaScript继承

    原型和构造函数 prototype属性对Object添加属性和方法 构造函数实例化过程 原型和继承 简单继承 继承

  • 原型和原型链(javascript)

    使用对象---->使用对象中的属性和对象中的方法,使用对象就要先有构造函数构造函数

  • _proto_与prototype区别

    proto是对象的属性,指向该对象的构造函数的原型对象 prototype是函数属性,指向该方法的原型对象

网友评论

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

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