文章目录

• prototype (原型)

• prototype 定义
• prototype 语法
• prototype 使用案例
• prototype 应用场景

prototype (原型)

prototype 定义

在说prototype先说一下构造函数，什么是构造函数呢？

构造函数：就是一个普通函数(类型),用来创建对象的；

实例:通过构造函数创建的对象就是实例

构造函数执行流程:

1.立刻创建一个新的对象；

2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象；

3.逐步执行函数中的代码；

4.将新建的对象作为返回值返回；

this.：

1.当以函数的形式调用时,this是window；

2.当以方法的形式调用时,谁调用的方法this就是谁；

3.当以构造函数的形式调用时,this就是新建的那个对象

上面是介绍了构造函数和this在不同场景下，代表什么意思，下面来说下prototype

我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype

这个属性对应的一个对象,这个对象就是我们所说的原型对象；

当函数以构造函数的形式进行调用时,我们可以通过__proto__来访问属性；

原型对象相当于一个公共的区域,所有同一个类(构造函数)的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中；

当访问对象的一个属性或方法时,它会先在对象自身寻找,如果有直接使用,如果没有则会去原型对象中寻找,如果找到直接使用；

prototype 语法

向原型中添加属性

构造函数名称.prototype.属性名 = 属性值;
向原型中添加属性a
Person.prototype.a = 123;

//向原型对象中添加方法

构造函数名称.prototype.方法名= function(){
  alert("大家好");
}
Person.prototype.sayName = function(){
  alert("大家好");
 }

prototype 使用案例

<script type="text/javascript">
  //创建构造函数
  function Person(name,age,gender){
    this.name = name;
     this.age = age;
     this.gender = gender;
   }
   //向原型中添加属性
   Person.prototype.a = 123;
   //向原型对象中添加sayName方法
   Person.prototype.sayName = function(){
     alert("大家好"+this.age);
   }
   //创建对象向构造函数中传递参数，返回对象进行接收
   var per = new Person("测试",28,"男");
   //调用原型对象里的a属性
  console.log(per2.a);
  //调用原型对象里的sayName方法
  per2.sayName();
  //hasOwnProperty 查找对象中是否存在该属性
  //console.log(per2.hasOwnProperty("a"));
</script>

输出结果

a的属性值123，在控制台输出

prototype 应用场景

原型对象应用场景:

创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中；

不需要分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法；