js原型和原型链

js原型和原型链

1.原型

什么是原型？我们得先了解什么是构造函数？什么是对象？
构造函数： 构造函数是一种特殊的方法，可以用来创建对象（并给对象的变量附初始值）。学过java的会好理解一点，可以理解为Java中的类。（也可以将其理解成一个模板，通过这个模板去创建对象）

var Person = function (name, age) {
  (this.name = name), (this.age = age);
};
//这是一个自定义构造函数Person

**对象：**对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）就比如动物是一个构造函数，包含了动物的属性和一些行为，对象就是一只猫，是比较具体的实现。

var Person = function (name, age) {
  (this.name = name),
   (this.age = age);
};
//通过new操作符创建一个person对象,并给对象中的变量赋值
var person = new Person("zhangsan", 12);
//对象可以用到构造函数中的属性
console.log(person.name);

prototype：
构造函数在定义时就会有一个prototype属性，它是一个对象，也就是我们所说的原型对象，
constructor：
原型对象中有一个constructor属性，它指向与它对应的构造函数。
__proto __（注意：这里的下划线是一边两个）:
实例对象中的__proto__属性（隐式原型），指向的是它的原型对象。
光看可能有点迷，看下面的图就清楚了。
下面是一些例子：

var Person = function (name, age) {
  (this.name = name), (this.age = age);
};
var person = new Person("zhangsan", 12);
console.log(Person === Person.prototype.constructor);//true
console.log(person.__proto__ === Person.prototype);//true

2.原型链

看了上面对原型的解释和图片，应该对原型对象有了一些了解，简单来说就是定义构造函数是产生原型对象，构造函数中的prototype属性（构造函数.prototype === 原型队形）是一个对象指向它的原型对象，原型对象中的constructor属性（构造函数.prototype.constructor === 构造函数）是一个对象指向与它对应的构造函数，构造函数new出来的实例对象有一个__proto__属性指向其构造函数的原型对象，实例对象可以继承它的原型对象中的属性和方法。
可能又有点说迷糊了，那我们这次先看图在解释：

这张图下面的2/3其实跟上面那张图的差不多一样，只是解释的语言少了（如果有不理解的可以返回去看上一张图）

要理解这张图首先我们得知道对象获取一个属性值的过程，比如：

var Person = function (name, age) {
  (this.name = name), (this.age = age);
};
Person.prototype.sex = "男";

var person = new Person("zhangsan", 12);

console.log(person);//Person { name: 'zhangsan', age: 12 }
console.log(person.age);//12
console.log(person.sex);//男

首先对象会在自己本身去找这个属性的值，如果找了就输出，如果找不到就向上一层它的原型对象上去找，找到就输出，如果还找不到就输出undefined；
但是如果对象（对象1）的原型对象是一个实例对象（对象2）（即另一个构造函数new出来的对象），那么这个实例对象（对象2）中的__proto__属性又指向了它自身的原型对象，即对象1可以访问到对象2和对象2原型对象中的属性。
案例如下：

var Person = function (name, age) {
  (this.name = name), (this.age = age);
};

Person.prototype.sex = "男";

var Person2 = function (hight) {
  this.hight = hight;
};
var person2 = new Person2(180);
Person2.prototype.weight = "100kg";

Person.prototype = person2;
var person = new Person("zhangsan", 12);

console.log(person.__proto__ === person2);//true person对象的原型对象换成了person2

console.log(person); //Person2 { name: 'zhangsan', age: 12 }
console.log(person.age); //12

console.log(person.sex); //undefined 因为Person的原型对象已经换成了Person2的实例对象了，所以就找不到sex属性了

console.log(person.weight); //100kg
console.log(person.hight); //180

结合下面这张图可能更好理解一点：