入坑前端09：原型与原型链

1为什么要有原型对象？

function fun(){
  alert("Hello大家好，我是:"+this.name);
}

假如说，我们把函数定义在全局作用域中，很容易会污染全局作用域的命名空间。所以这个时候需要有原型对象

2原型对象：

概念：我们所创建的每一个函数，解析器都会向函数添加一个属性prototype,并且这个属性也是一个对象，所以这个对象就是我们所说的原型对象。

●画图

function MyClass(){
                
            }

浏览器会自动给它一个prototype属性，指向原型对象
所以，如果函数作为普通函数调用prototype没有任何作用，但是当我们以构造函数调用的时候。var mc = new MyClass();构造函数所创建的对象中都会有一个隐含的属性，我们通过proto来访问该属性。

var mc = new MyClass();
console.log(mc2.__proto__ );

image.png

这个属性指向的对象和前面Myclass指向的对象一样。

image.png

所以原型对象就相当于一个公共区域，所有同一类的实例都可以访问到这个原型对象。

假如我们添加
MyClass.prototype.a = 123;//想MyClass的原型中添加属性a但是这个我又通过构造函数mc去访问a这个属性，发现mc自己没有a这个属性，但是，他去原型对象去找了。

image.png

所以当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果没有，他就去原型去找了。如果找到就直接使用。

总结：每个函数都有一个prototype属性，他默认指向一个Object空对象,每个实例对象都有一个proto,可称为隐式原型。

image.png

3原型链

<script type="text/javascript">
  function Fn() {
    this.test1 = function () {
      console.log('test1()')
    }
  }
  Fn.prototype.test2 = function () {
    console.log('test2()')
  }
  var fn = new Fn()

  fn.test1()
  fn.test2()
  console.log(fn.toString())
  fn.test3()
</script>

用内存图表示下边代码
1.创建Fn函数对象，函数名Fn相当于一个全局的变量名。函数对象里边有一个prototype属性，指向Object空对象（原型对象）

image.png

2.Object空对象其实就是Object的实例对象，既然是实例对象必然有一个proto属性。

image.png

3.在我们定义函数之前，object函数对象存在，所以会有object变量名，对应Object函数对象，同时对应Object的原型对象。

image.png

所以以上形成的链条就是原型链。