胡扯javascript之原型

今天由浮公同学和大家探讨一下Javascript中的原型

那么javascript中的原型究竟是什么呢？很神秘的样子咧。。。今天！
就由我们一起揭开它的面纱吧哈！

原型（Prototype）

• 它是一个对象，原型对象。
• 每当我们创建一个function的时候，就会同步的创建一个Prototype对象
• 下面来一张图来解释一下吧。不然太过抽象，人都有点抽了。
• 
  这里我们创建了两个类。也就是两个function啦，大家不用紧张哈。
  对应的代码如下

  function Parent(){
      this.pv = 'pv';
  }
  
  function Child(){
      this.cv = 'cv';
  }
  

  • 那么大家应该都会有所疑问吧。我只是单纯的定义了两个function,为什么图会有四个东西，不应该是2个吗哈？
    这就是上面所说过的那样子了。

一个function创建之后，会相应的创建一个prototype（原型）对象

• 并且呢，function里面会一个 prototype 属性指向 prototype 对象
• 同时呢，prototype 对象中又有一个constructor属性指向function
• 那么这样子，两者就形成了一种特定的关系了。

---

再来胡扯一下

我们可以给Person,Child两个函数加点属性

Person.name = 'PP';
Person.age = '2019';
Person.prototype.sayName = function() {
	console.log( this.name );
}
Person.prototype.sayAge = function() {
	console.log( this.age )
}



Child.name = 'cc';
Child.age = '2019';
Child.prototype.sayName = function() {
	console.log( this.name );
}
Child.prototype.sayAge = function() {
	console.log( this.age )
}

那么此时的图就变成了：

相信大家竟然能直到原型这东西，想必都知道es5怎么定义类了吧，那么我们也来创建几个实例吧

var p1 = new Person();
var c1 = new Chidl();

很明显，这里创建了两个实例对象，分别是

• p1是Person类的实例对象
• c1是Child类的实例对象

文字不重要，我们来看看图

• *这里我们先回到没有添加属性的时候好不好？
  好的 好的~！ 真棒
• 那么肺腑之言不多说，no picture you say a j 00 啊啊啊~~~
  

图制作的有点丑，大家将就一下哈。将就就是胜利~

现在！！！ 需求来了，我们要给Child增加两个方法sayName,sayAge.

• 那么如果继续使用上面的方法这样敲的话是不是很麻烦呀！！！是的，很麻烦
• 那如果我这样写行不行呢？

Child.prototype = {
	sayName:function() { code...},
	sayAge:function() { code.... }
}

//简直是简洁大方，上档次呀

那么这样对应原型图又会是怎么样的呢？

上图~！！！！！

这里我声明一下哈，图不是我瞎j*画的吖。都是又依据得哈

• 那么大家有没有看到呢。为什么无端端有多出了一个Child的prototype对象呢？
• 而且想必上面的Child.prototype还少了一个constructor属性.

---

变成这样的原因就是因为我们刚刚不小心的 重写了Child的原型对象 了。

what?

我们刚刚什么都没做哎…只是给它用对象的形式增加了两个方法哎。

没错！这就是重写了它的原型对象

合理的解释就是：{

当我们给Child的原型对象重新赋值的时候，就已经实现了重写的操作。
也就是说：

}

Child.prototype = {
	sayName:function() { code...},
	sayAge:function() { code.... }
}

//等价于

var obj = {
	sayName:function() { code...},
	sayAge:function() { code.... }
}
Child.prototype = obj;

这时当我们再新建一个Child实例c2后，此时c2指向的Child.prototype就会是新的Child.prototype对象。不再是上面的Child.prototype对象。

所谓 无图言*…

这次就到这吧哈…下次有空再和大家吹C

这里要注意一下，当我们重写原型后，记住要把constructor指向加回去。