日漫中的血统

小悟空为什么魔挡杀魔，因为悟空有着超级赛亚人的血统，龙珠正传中第一个变身超级赛亚人的赛亚人。鸣人一个吊车尾，为什么能当上火影，因为他老爹就是四代火影。黑崎一护为什么那么厉害，因为他爹就曾是护庭十三队的队长。路飞独自出海为什么现在是拥有草帽大船团的人，也是因为他爹，他爷爷都是了不的的人物，并且是传说中的D之一族。江户川柯南（工藤新一）推理为什么那么厉害，他老爹就是知名的推理小说作家。
日漫中的浦饭有助、小当家、犬夜叉，甚至魔卡少女樱和美少女战士，每一部都是赤裸裸的血统论，也是因为血统，他们有了父辈们优良的基因，可以所向披靡。

没有对象，那就new一个

今天要从对象这个话题开始聊起，不是拉仇恨，如果没有，那就new一个对象好了

let girl = new Object();

这么简单，现在我们就拥有了一个对象girl，也许你会说，你这个对象太普通了，我想要一个我喜欢的对象，我要DIY，可以啊。

// 我们可以通过字面量的形势创建新的对象
let girlGod = {
    height: '165cm',
    weight: '50kg',
    hairLength: 'long',
    hairColor: 'black',
    leg: 'long',
    faceValue: 10
}

现在就得到了一个我们心目中想要的女神形象。
但是，现在的女神是你自己心中的女神，并不一定是所有人的女神，大家对女神的标准是很多的，那我们就需要一个能批量产出女神的地方。

女神工厂

工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程。考虑到在ECMAScript中无法创建类，开发人员就发明了一种函数，用函数来封装特定接口创建对象的细节。

现在我们就来建造我们自己的女神工厂吧

function girlGodFactory(height, weight, hairLength, hairColor, leg, faceValue) {
    let o = new Object();
    o.height = height;
    o.weight = weight;
    o.hairLength = hairLength;
    o.hairColor = hairColor;
    o.leg = leg;
    o.faceValue = faceValue;
    o.sayGoodMan = function (name = '') {
        console.log(`${name}你是个好人，但我${this.faceValue}分颜值，你配吗？`)
    }
    return o
}
let girlGod1 = girlGodFactory('165cm', '45kg', 'short', 'yellow', 'long', 8);
let girlGod2 = girlGodFactory('160cm', '47kg', 'long', 'brown', 'long', 9);

这样我们就生产出了两个风格迥异的女神（放舔狗）
但我们现在没有用到new，我想要个新对象，新的，好，那我们来新一个对象

让我们来构造女神

ECMAScript中的构造函数可用来创建特定类型的对象

现在我们来装修一下我们的女神工厂，让它可以来构造我们的女神

function CreateGirlGod(height, weight, hairLength, hairColor, leg, faceValue) {
  this.height = height;
  this.weight = weight;
  this.hairLength = hairLength;
  this.hairColor = hairColor;
  this.leg = leg;
  this.faceValue = faceValue;
  this.sayGoodMan = function (name = '') {
    console.log(`${name}你是个好人，但我${this.faceValue}分颜值，你配吗？`)
  }
}

let girlGod1 = new CreateGirlGod('165cm', '45kg', 'short', 'yellow', 'long', 8);
let girlGod2 = new CreateGirlGod('160cm', '47kg', 'long', 'brown', 'long', 9);

这就是一个可以构造女神的构造函数，注意，函数名的首字母必须大写CreateGirlGod，这是惯例，记住就好，是借鉴的其他面向对象的语言。主要也是为了区别其他函数，因为构造函数本身也是函数，只不过可以用来创建对象而已

是怎么new出一个新对象的

好，现在让我们来了解一下面试题经常问的问题“你能说一下new一个对象的时候，new操作符做了些什么吗”，下面我就来说一下真确答案：

1. 创建一个新对象；
2. 讲构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
3. 执行构造函数中的代码（为这个新对象添加属性）；
4. 返回新对象

上面的正确答案要记住了，对自己写代码，面试，都有很重要的作用

原型模式

现在有了新的需求，现实生活中，我们可能对女神的要求千奇百怪，但是会有相同的部分，比如颜值都在8分，这时候，我们就需要一个可以共享属性的方法来满足这个需求。下面说到的prototype(原型)属性就可以实现

function CommonGirlGod(height, weight, hairLength, hairColor) {
  this.height = height;
  this.weight = weight;
  this.hairLength = hairLength;
  this.hairColor = hairColor;
  this.sayGoodMan = function (name = '') {
    console.log(`${name}你是个好人，但我${this.faceValue}分颜值，你配吗？`)
  }
}

CommonGirlGod.prototype.leg = 'long';
CommonGirlGod.prototype.faveValue = 8;

let girlGod1 = new CommonGirlGod('165cm', '45kg', 'short', 'yellow');
let girlGod2 = new CommonGirlGod('160cm', '47kg', 'long', 'brown');

console.log(girlGod1.leg); // long
console.log(girlGod2.leg); // long
console.log(girlGod1.faveValue); // 8
console.log(girlGod2.faveValue); // 8

可以看到我们CommonGirlGod构造函数有一些定制的女神要求，然后我们又在下面在CommonGirlGod构造函数的prototype属性上写了两个共有属性，这两个共有属性在new出来的两个女神中都包含。

[[Prototype]]、__proto__和prototype

我们来看一张《javascript高级程序设计》中的一张图

原型、原型链

原型对象Person Prototype中的constructor属性

经过上面的探究我们可以初步认为[[Prototype]]、__proto__和prototype都是指向同一个对象。
这个对象拥有一个属性constructor，属性constructor默认指回prototype所在函数（我理解一般都是指回之前的构造函数）。他有什么作用呢，看下面的例子：

function CommonGirlGod(height, weight, hairLength, hairColor, leg, faceValue) {
  this.height = height;
  this.weight = weight;
  this.hairLength = hairLength;
  this.hairColor = hairColor;
  this.leg = leg;
  this.faceValue = faceValue;
  this.sayGoodMan = function (name = '') {
    console.log(`${name}你是个好人，但我${this.faceValue}分颜值，你配吗？`)
  }
}

let girlGod1 = new CommonGirlGod('165cm', '45kg', 'short', 'yellow', 'long', 8);

CommonGirlGod.prototype.sayHeight = function () {
  console.log(this.height)
};

girlGod1.sayHeight(); // 165cm

上面代码做了什么呢？通过new一个新的girlGod1出来，然后我们又通过在prototype上增加一个方法，让女神可以报出自己的身高，我们可以执行看看，上面这样写是可以顺利让自己的女神报出身高的，但是，我们如果不是CommonGirlGod.prototype.sayHeight上赋值，而是通过字面量的方法添加呢，像下面这样

function CommonGirlGod(height, weight, hairLength, hairColor, leg, faceValue) {
  this.height = height;
  this.weight = weight;
  this.hairLength = hairLength;
  this.hairColor = hairColor;
  this.leg = leg;
  this.faceValue = faceValue;
  this.sayGoodMan = function (name = '') {
    console.log(`${name}你是个好人，但我${this.faceValue}分颜值，你配吗？`)
  }
}

let girlGod1 = new CommonGirlGod('165cm', '45kg', 'short', 'yellow', 'long', 8);

- CommonGirlGod.prototype.sayHeight = function () {
-   console.log(this.height)
- };

+ CommonGirlGod.prototype = {
+   sayHeight: function () {
+     console.log(this.height)
+   }
+ };

girlGod1.sayHeight(); // 165cm

如果我们像上面这样写，会抛出错误，这是为什么呢？

因为第二种方法我们相当于重写CommonGirlGod.prototype对象，prototype中包含的constructor属性不复存在了，打断了prototype对象和构造函数的联系了，所以会报错。

继承（血统论、血继限界）

面向对象的三个基本特征是：封装、继承、多态。下面我们要讲得就是继承；
举例，默认大家看过《海贼王》吧，卡普、龙和路飞，祖孙三代，他们之间存在着强大的血统遗传，龙生龙凤生凤，老鼠的孩子会打洞。这就是继承。

D之一族

回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象prototype，原型对象都包含一个指向构造函数的指针constructor，而实例都包含一个指向原型对象的内部指针[[Prototype]](浏览器实现__proto__)。

// D之一族构造函数
function FamilyD() {
  this.middleName = 'D';
  this.sayWhoAmI = function () {
    console.log(`${this.familyName} · ${this.middleName} · ${this.name} `);
  }
}
// 卡普构造函数
function Garp() {
  this.familyName = 'Monkey';
  this.name = 'Garp';
}
// 卡普继承D之一族
Garp.prototype = new FamilyD();
// 龙构造函数
function Dragon() {
  this.name = 'Dragon';
}
// 龙继承卡普
Dragon.prototype = new Garp();
// 路飞构造函数
function Luffy() {
  this.name = 'Luffy';
}
// 路飞继承龙
Luffy.prototype = new Dragon();

// 实例卡普
let garp = new Garp();
// 实例龙
let dragon = new Dragon();
// 实例路飞
let luffy = new Luffy();

garp.sayWhoAmI(); // Monkey · D · Garp
dragon.sayWhoAmI(); // Monkey · D · Dragon
luffy.sayWhoAmI(); // Monkey · D · Luffy 

上面的代码写的就是祖孙三代，卡普、龙和路飞的关系。
最开始声明一个FamilyDD之一族的构造函数，写上他们的中间名都是‘D’，还有一个说出自己是谁的方法sayWhoAmI()。紧接着声明卡普的构造函数Garp，并定义了家族姓氏和卡普自己的名字，然后构造函数卡普Garp再关联上D之一族的Garp.prototype = new FamilyD();，这就算卡普继承了D之一族。然后同理声明构造函数Dragon和构造函数Luffy，并定义各自的名字，最后实例化三个人，然后各自执行sayWhoAmI()函数，输出各自的全名。
三个人的中间名都是继承的D之一族，龙和路飞的姓氏都是继承的卡普中的familyName

家谱

上面声明了三个人，那我们如何体现原型链和各自的关系呢，这就要用到之前说到的[[Prototype]]和__proto__了，利用__proto__去访问[[Prototype]]。好，我们用他们最小的来做示范，就是孙子辈的路飞。

// 在上面代码基础上，我们添加以下代码
console.log(`路飞的名字 ${luffy.name}`); // 路飞的名字 Luffy
console.log(`路飞爸爸的名字 ${luffy.__proto__.name}`); // 路飞爸爸的名字 Dragon
console.log(`路飞爷爷的名字 ${luffy.__proto__.__proto__.name}`); // 路飞爷爷的名字 Garp

不知道这样打出来大家能不能看明白其中的关系，根据__proto__一级一级的向上查找，找到了父辈和爷爷辈的属性

继承

基于上面的代码如果我在路飞的构造函数中没有定义name属性，那console.log(luffy.name)就会输出‘Dragon’，因为原型链的特征，实例会现在自身查找有没有对应的属性或者方法，如果没有，就去__proto__上面去找，如果还没有，就继续在__proto__.__proto__去找，一直到为null，停止搜索。这种情况称为"属性遮蔽 (property shadowing)。

弊端

就像如果路飞出问题了，你可能会找他的爸爸，他爸爸管不了，就要去找爸爸的爸爸，这样其不是很费劲。代码也是一样，如果在当前实例没有的属性和方法，js就会遍历原型链上所有的属性和方法，这样很耗费性能。所以请注意代码中原型链的长度，并在必要时将其分解，以避免可能的性能问题

不要试图修改或扩展原生对象的原型

大佬可忽略，对于一般水平的开发，尽量不要去修改类似Object.prototype，你可能会覆盖原型属性或方法，也可能对继承自Object的实例发生不可预知的bug

结尾

不知道这篇加入了女神和海贼王例子的讲解对象和原型链大家能不能看明白，可以给我反馈，如果很难懂，我会再重新写一篇偏严肃的博客来讲解这部分的知识。如果还有没涉及的只是，也可以评论告诉我。

我是前端战五渣，一个前端界的小学生。