【JavaScript】原型及原型链

前言

       据网上的文章说，弄明白了原型链，才算真的入门了前端。首先我们要明白这几个东西。prototype、proto、constructor。当然他们的基础就是构造函数，我们先从构造函数开刀！

构造函数

构造函数就是初始化一个实例对象。其余的就不多论述了，举了例子

     //构造函数
        function Person(name, age) {
            //属性
            this.name = name;
            this.age = age;
            //在构造函数中的方法
            this.eat = function () {
                console.log("吃好吃的");
            };
        }
        var person1 = new Person('小李', 28);
		var person2 = new Person('小王', 23);

这个例子中person1和person2都是Person的一个实例。那它们都有一个constructor属性，该属性指向Person。

原型对象

为什么会有原型对象呢？是因为我们要使用一些属性和方法，如果我们每个对象的的属性都一样，方法也一样。那么这是有多少个对象就要开辟多少个空间，为了节省控件。可以把属性和方法通过原型的方式来进行赋值。

在JavaScript中，每当定义一个对象时候，对象中都会包含一些预定义的属性。其中每个函数对象有一prototype属性，这个属性指向的就是原型对象。
接着上面的构造函数举栗子：

	//在Person的原型中添加方法
	  Person.prototype.sayHi = function () {
            console.log("您好啊，怎么这么帅，哈哈");
        }
        
        //现在我们有100个对象
        for(var i=0;i<100;i++){
		var per =new person("小米",20);
		per.sayHi();
		}
	//这是会100个对象会开辟100个空间，但是这100个空间中没有sayHi的方法，
	//这100个sayHi都是指向一个地方的

那_proto_和prototype有什么区别的，我们去证实一下

console.log(per._proto_ == Person.prototype);   //true

//实例对象的原型_proto_和构造函数的原型prototype指向是相同的
//实例对象中的_proto_原型指向的是构造函数中的原型prototype

所以实例对象可以直接访问原型中的属性或方法。
实例对象中_proto_是原型，为浏览器使用；构造函数中的prototype是原型，为程序猿使用。

原型链

原型链：是一种关系，实例对象和原型对象之间的关系，关系是通过原型（proto）来联系的。
举个简单的栗子就明白了：

	//人的构造函数
	function Person(age){
		this.age=age;
	}

	//人的原型对象方法
	Person.prototype.eat=function(){
		console.log("人的吃");
	}

	//学生的构造函数
	function Student(){		
	}

	//学生的原型，指向了人的实例对象
	Student.prototype=new Person(10)
	var stu=new Student();
	stu.eat();

学生的原型指向人的实例对象，从而改变了原型的指向。也就形成了一个原型链。

总结

一个很难的东西，你能很简单的讲给别人听，那么你才算是真的了解它了。