弄清原型链继承那点事

一起来理解下原型链继承!

1. proto、_ _ proto _ _、prototype 是什么? (敲黑板!划重点!)

proto:  只要是对象都有这个属性,这个属性提供一个指针指向其构造函数的原型。
__proto__ :  chrome浏览器对proto属性的定义,就是说在chrome里 proto就叫__proto__,IE不认识它。
prototype: 原型属性,只有函数对象才有的属性。

2. 原型链继承 怎么继承 ?

将子类的原型指向到父类构造函数的实例。

// 先定义个父类
function Father({age, name}) {
  this.name = name;
  this.age = age;
}
Father.prototype.getAge = function() {
 console.log(this.age, '年龄');
}
const aFather = new Father({name: '小头爸爸', age: 40 });  // 实例化
aFather.getAge();
image.png
// 再来个子类
function MakeChild({age, name}) {
  this.name = name;
  this.age = age;
}
MakeChild.prototype = aFather;  // 子类的prototype指向父类的实例化。
const aChild = new MakeChild({name: '大头儿子', age: 6});
console.log(aChild.name, aChild.age);
aChild.getAge();
image.png

3. 验证一下 proto指向

我们可以清楚看到,对象的proto属性总是指向其构造函数的原型,在继承关系中,子类实例化出来的对象,aChild 它的proto属性指向其构造函数MakeChild的prototype,而MakeChild的prototype指向父类实例化aFather。


image.png

4.总结一下

  • 继承的是父类的原型里的属性,私有属性不能继承。
  • 函数对象的proto指向一个空函数。
  • 由proto串起来的路径就是原型链。
  • 原型链查找的终点是Object. _ _ proto _ _, 指向一个空函数


    image.png

你可能感兴趣的:(弄清原型链继承那点事)