美文网首页javascript 面向对象
javascript原型prototype的理解

javascript原型prototype的理解

作者: liuwx9866 | 来源:发表于2018-01-07 21:45 被阅读0次

    一、关键知识点说明
    1、每个构造函数都有一个原型对象与之对应;
    2、每个构造函数都存在一个可以访问的prototype属性,该属性指向构造函数的原型对象
    3、构造函数的原型对象有一个可以访问的、指向构造函数原型的属性constructor
    4、任何一个对象的实例都有一个隐藏不可访问的prototype指针,指向构造函数的原型对象
    二、构造函数申明:
    不带参数的构造函数声明

    function Student(){
         this.name="张三";
         this.age="18";
         this.sex="男";
         this.sayName = function(){
             console.log(this.name);
         }
     }
    

    带参数的构造函数声明

    function Student(_name,_age,_sex){
        this.name=_name;
        this.age=_age;
        this.sex=_sex;
        this.sayName = function(){
            console.log(this.name);
         }
      }
    

    声明一个构造函数在浏览器全局作用域下会生成以下几个对象,如下图所示


    图一原型声明

    Student函数会自动产生一个prototype属性,该属性指向一个Studentd的原型对象Prototype。Prototype对象的constructor属性指向Student构造函数。

    三、当定义好构造函数后就可以根据构造函数创建一个对象实例

    var student1 = new Student();
    var student2 = new Student('张三',18,'男');
    

    new 关键字创建对象会在浏览器全局作用域产生两个变量,变量的protottype属性指向Student构造函数的原型对象。对象关系图如下所示:

    图二 对象创建图.png
    四、可以扩展一个构造函数的原型对象
    在图一中我们声明一个函数时会创建一个prototype属性,该属性指向构造函数的原型对象。因此我们可以通过prototype属性来扩展Student对象。
    //扩展学生对象的身高变量
    Student.prototype.height = 1.8;
    //扩展学生报报告自己的身高函数
    Student.prototype.sayHeight = function(){
        console.log(this.height);
    }
    

    扩展原型对象关系图如下图所示


    图三.png

    相关文章

      网友评论

        本文标题:javascript原型prototype的理解

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