相关知识点

• 构造函数
• 原型
• 原型链
• 对象和函数在原型链的关系图
• 原型相关的方法

构造函数

构造函数模式的目的就是为了创建一个自定义的类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别。

构造函数就是普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。另外就是调用方式的不同，普通函数是直接调用，而构造函数需要使用 new 关键字来调用。

// Perosn 构造函数
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayName = function () {
    console.log(this.name);
  };
}
// per 实例
var per = new Person("孙悟空", 18, "男");

// Dog 构造函数
function Dog(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
// dog 实例
var dog = new Dog("旺财", 4, "雄");

console.log(per); // 当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值
console.log(dog);

每创建一个 Person 构造函数，在 Person 构造函数中，为每一个对象都添加了一个 sayName 方法，也就是说构造函数没执行一次就会创建一个新的 sayName 方法。这样就导致了构造函数执行一次就会创建一个新的方法，执行 N 次就会创建 N 个新的方法，而 N 个方法都是一模一样的，为什么不把这个方法单独放到一个地方，并让所有的实例都可以访问到呢？这就需要原型（prototype）。

原型

在 JavaScript 中，每当定义一个函数数据类型（普通函数、类）时候，都会天生自带一个 prototype 属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。

让我们用一张图表示构造函数和实例原型之间的关系：

原型对象相当于一个公共区域，所有同一个类的实例都能访问到这个原型对象，我们可以将对象中公有的内容，统一设置到原型对象中。

原型题

function Foo() {
  Foo.a = function () {
    console.log(1);
  };
  this.a = function () {
    console.log(2);
  };
}

// 把Foo当做类，在原型上设置实例共有的属性方法 => 实例.a()
Foo.prototype.a = function () {
  console.log(3);
};

// 把Foo当做普通对象设置私有的属性方法 => Foo.a()
Foo.a = function () {
  console.log(4);
};

Foo.a(); // 4
let obj = new Foo(); // obj可以调取原型上的方法  Foo.a:f => 1  obj.a:f => 2
obj.a(); // 2 私有方法中有a，就不会到原型链上去找
Foo.a(); // 1

原型链

__proto__ 和 constructor

每一个对象数据类型（普通对象、实例、prototype...）也天生自带一个属性 __proto__，属性值是当前实例所属类的原型（prototype）。原型对象中有一个属性 constructor，它指向函数对象

function Person() {}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true

//顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype); // true

原型链

在 JavaScript 中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在 JavaScript 中是通过 prototype 对象指向父类对象，直到指向 Object 对象为止，这样就形成了一个原型指向的链条，我们就称之为原型链。

举例说明：person → Person → Object ，普通人继承人类，人类继承对象类

当我们访问对象的一个属性或者方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用，如果没有则再去原型的原型中寻找，以此类推，直到找到 Object 对象的原型，Object 对象的原型没有原型，如果在 Object 原型中依然没有找到，则返回 undefined。

我们可以使用对象的 hasOwnProperty() 来监测对象自身中是否含有该属性。

使用 in 检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回 true。

• 例题1：自身没有，原型上有

function Person() {}
Person.prototype.a = 123;
Person.prototype.sayHello = function () {
  alert("hello");
};
var person = new Person();
console.log(person.a); // 123
console.log(person.hasOwnProperty("a")); // false
console.log("a" in person); // true

• 例题2：自身有，原型上也有

function Person() {
  this.a = "a";
}
Person.prototype.a = 123;
Person.prototype.sayHello = function () {
  alert("hello");
};
var person = new Person();
console.log(person.a); // "a"
console.log(person.hasOwnProperty("a")); // true
console.log("a" in person); // true

person 实例中没有 a 这个属性，从 person 对象中找不到 a 属性就会从 person 的原型也就是 person.__proto__，也就是 Person.prototype 中查找，很幸运地得到 a 的值为 123。那假如 person.__proto__ 中也没有该属性，又该如何查找？

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层 Object 为止。Object 是 JS 中所有对象数据类型的基类（最顶层的类）在 Object.prototype 上没有 __proto__ 这个属性。

console.log(Object.prototype.__proto__ === null) // true

对象和函数在原型链的关系图

总结

• 所有的实例的 __proto__ 都指向该构造函数的原型对象（prototype）

person.__proto__ === Person.prototype;

• 所有的函数（包括构造函数）是 Function 的实例，所以所有函数的 __proto__ 的都指向 Function 的原型对象

Foo.__proto__ === Function.prototype;

• 所有的原型对象（包括 Function 的原型对象）都是 Object 的实例，所以 __proto__ 都指向 Object（构造函数）的原型对象。而 Object 构造函数的 __proto__ 指向 null

Foo.prototype.__proto__ === Object.prototype;
Function.prototype.__proto__ === Object.prototype;
Object.prototype.__proto__ === null;

• Function 构造函数本身就是 Function 的实例，所以 __proto__ 指向 Function 的原型对象.

Function.prototype === Function.prototype;
Function.prototype.constructor === Function;
Function.__proto__ === Function.prototype;

原型相关的方法

• .hasOwnProperty()：判断一个属性是不是实例自身的属性
• Object.getOwnPropertyNames()：只能获取自身属性
• Object.keys()：只能获取自身属性
• for...in：获取自身属性和原型上的属性

function Cat(name, color) {
  // 私有属性
  var heart = "心";
  var heartbeat = function () {
    console.log(heart + "跳");
  };

  // 公有属性
  this.name = name;
  this.color = color;
  this.jump = function () {
    heartbeat();
  };
}

Cat.prototype.prototypeProp = "我是构造函数原型对象上的属性";
Cat.prototype.clearBody = function () {
  console.log("我是构造函数原型对象上的方法");
};

var guaiguai = new Cat("guaiguai", "white");
console.log(guaiguai); // {name: "guaiguai", color: "white", jump: ƒ}

for (const key in guaiguai) {
  if (guaiguai.hasOwnProperty(key)) {
    console.log("我是自身属性", key);
    /* 
      我是自身属性 name
      我是自身属性 color
      我是自身属性 jump
    */
  } else {
    console.log("我不是自身属性", key);
    /* 
      我不是自身属性 prototypeProp
      我不是自身属性 clearBody
    */
  }
}
console.log(Object.keys(guaiguai)); // ["name", "color", "jump"]
console.log(Object.getOwnPropertyNames(guaiguai)); // ["name", "color", "jump"]