javascript原型prototype的理解

一、关键知识点说明
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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容