2个概念
构造函数
原型对象
构造函数
'''
<script>
function(){
/* 我就是构造函数 */
}
</sciprt>
'''
原型对象
在声明一个函数后,浏览器会在内存中创建一个对象,即这个函数的原型对象
构造函数vs原型对象
原型对象有个constructor属性,指向构造函数
构造函数有个prototype属性,指向原型对象
构造函数创建对象
''''
<script>
function students(){
/* 我就是构造函数 */
}
var stu = new sutdents();
</script>
''''
此时,stu就是构造函数创建的对象,这个stu对象没有prototype属性,prototype属性只有构造函数students有,如图
所以s'tu调用prototype显示undefined,stu对象有个proto属性,这个属性指向原型对象,如图
所以三者关系
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>
‘’‘’