2018-01-29 原型链理解

普通对象和函数对象概念

// 函数对象
function Person(){}
var Person = function(){}
var Person = new Function(){}

// 普通对象
var xiaohong = new Person();
// es6语法，参数为原型对象
var limei = Object.create(Person);
var lucy={
  name:"Lucy",
  age:18
}

// 函数对象Car汽车,汽车具有以下属性：品牌，颜色
function Car(brand,color){
  this.brand=brand;
  this.color=color;
  this.show=function(){
    console.log("我是"+this.color+"的"+this.brand);
  }
} 

// 普通对象:迈巴赫汽车
var mbh = new Car("Maybach","黑色");
mbh.show();//输出：我是黑色的Maybach

// 普通对象：丰田汽车
var ft = new Car("TOYOTA","红色");
ft.show();//输出：我是红色的TOYOTA

结论：
1. 普通对象可以通过函数对象创建
2. 函数对象，一般具有function关键字
3. 普通对象，一般通过new等关键字创建

prototype继承

// 父类
function Person(name){
  this.name = name;
}
Person.prototype.show=function(){
  console.log("我的名字是"+this.name);
}
// 子类
var xiaohong = new Person("小红");
xiaohong.show();//输出：我的名字是小红

var xiaoming = new Person("小明");
xiaoming.show();//输出：我的名字是小明

// 上面创建实例new的过程可以理解为
var xiaohong = {};
xiaohong.__proto__= Person.prototype;
xiaohong.name = "小红";
xiaohong.show();//输出：我的名字是小红

__proto__、prototype、constructor讲解

console.log(xiaohong.constructor);
//输出：function Person(name){this.name}

console.log(xiaohong.__proto__)
//输出：
//Object{
//  constructor:Person(name)...,
//  show:(),
//  __proto__:Object
//}
//还记得xiaohong.__proto__ = Person.prototype.原型对象原来是这样的结构

console.log(xiaohong.__proto__.__proto__)
//等价 => console.log(Person.prototype.__proto__)
//输出：Object
//继承终端：xiaohong -> Person对象 -> Object.prototype

console.log(xiaohong.__proto__==Person.prototype)//输出：true
console.log(xiaohong.constructor==Person.prototype.constructor)//输出：true
console.log(Person.prototype.constructor.prototype==Person.prototype)//输出：true
console.log(Person.prototype.__proto__==Object.prototype)//输出：true
console.log(xiaohong.__proto__.__proto__.__proto__)//输出：null 
//上句等价 => console.log(Object.prototype.__proto__)

总结：
1. 函数对象具有`prototype`属性,`prototype`称为原型对象
2. 函数对象和普通对象具有`__proto__`属性
3. 实例的属性`__proto__`指向原型对象
4. 原型对象的属性和方法是实例共享的、子类拥有了父类的属性和方法，实现了继承
5. 继承的末端是Object.prototype