理解JS的原型和原型链

理解JS的原型和原型链

1.prototype

在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象

function Student(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
} 
Student.prototype.sayHi = function () {
  console.log('大家好，我是' + this.name);
}
var s1 = new Student('lilei', 18, '男')
s1.sayHi();//输出Student.prototype的方法

当调用对象的属性或者方法的时候，先去找对象本身的属性/方法 ，如果对象没有该属性或者方法。此时去调用原型中的属性/方法

所有引用类型（除了null）的_proto_属性指向它构造函数的prototype

 console.log(s1.__proto__ === Student.prototype);//true
//Object.getPrototypeOf(s1)返回对象__proto__指向的prototype
console.log(Object.getPrototypeOf(s1)===Student.prototype)//true

实例之间的关系图

补充
通过Object.create()创建的对象使用第一个参数作为原型
通过对象直接量的对象使用Object.prototype作为原型
通过new创建的对象使用构造函数的prototype属性作为原型

2.constructor

在原型对象中有一个属性constructor 指向该关联的构造函数

console.log(Student.prototype.constructor===Student)//true
s1本身没有 它是从s1.__proto__找到constructor 的
s1.__proto__===Student.prototype
    console.log(s1.constructor === Student);//true
    var arr = [];
    console.log(arr.constructor === Array);//true

3.原型的原型

每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找… 这个操作被委托在整个原型链上，这个就是我们说的原型链了。

 // Student构造函数的原型对象
var o = s1.__proto__;
console.log(o);// Student.prototype
console.log(o.__proto__);//Object.prototype
var o1 = o.__proto__;
console.log(o1.__proto__);//null