原型

2个概念

• 构造函数

• 原型对象

构造函数

'''

<script>
          function(){
                  /* 我就是构造函数 */            
          }
</sciprt>

'''

原型对象

在声明一个函数后，浏览器会在内存中创建一个对象，即这个函数的原型对象

构造函数vs原型对象

原型对象有个constructor属性，指向构造函数
构造函数有个prototype属性，指向原型对象

image.png

构造函数创建对象

''''

<script>
    function students(){
          /* 我就是构造函数 */
    }    
    var  stu = new sutdents();
</script>

''''

此时，stu就是构造函数创建的对象，这个stu对象没有prototype属性，prototype属性只有构造函数students有，如图

image.png

所以s'tu调用prototype显示undefined，stu对象有个proto属性，这个属性指向原型对象，如图

image.png

所以三者关系

image.png

1、从上面的代码中可以看到，创建stu对象虽然使用的是students构造函数，但是对象创建出来之后，这个stu对象其实已经与students构造函数没有任何关系了，stu对象的proto属性指向的是students构造函数的原型对象。

2、如果使用new students()创建多个对象stu1、stu2、stu3，则多个对象都会同时指向students构造函数的原型对象。

3、我们可以手动给这个原型对象添加属性和方法，那么stu1,stu2,stu3…这些对象就会共享这些在原型中添加的属性和方法。

4、如果我们访问stu中的一个属性name，如果在stu对象中找到，则直接返回。如果stu对象中没有找到，则直接去stu对象的proto属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型—原型链)。

5、如果通过stu对象添加了一个属性name，则stu对象来说就屏蔽了原型中的属性name。 换句话说：在stu中就没有办法访问到原型的属性name了。

6、通过stu对象只能读取原型中的属性name的值，而不能修改原型中的属性name的值。 stu.name = “李四”; 并不是修改了原型中的值，而是在stu对象中给添加了一个属性name。

'''

    <script type="text/javascript">
    function students () { 
            /* 我是构造函数 */       
    }
    students.prototype.name = "张三";   //students.prototype直接访问原型对象
    students.prototype.age = 20;    //原型对象添加属性

    var stu1 = new students();    //实例对象

    alert(stu.name);  // 张三    实例对象没有，通过__proto__属性找原型对象

    var stu2 = new students();
    alert(stu1.name);   // 张三  也是从原型中找到的，所以一样。

    alert(stu.name === stu1.name);  // true

    stu1.name = "李四";    //实例对象添加name属性
    alert(stu1.name); //李四  
    alert(stu2.name);  // 张三     仍然是访问的原型中的属性
</script>

‘’‘’