JavaScript的原型(__proto__、protype)、ES6的class、继承、原型链

JavaScript的语言中。原型是一个对象，每一个对象都有一个原型对象，每一个对象都可以使用它原型对象上所有的的属性和方法。

JavaScript的原型(__proto__、protype)

获取原型对象上的方法：

1、通过对象的__proto__获取；

let dog = {
  name:"二哈"
}
dog.__proto__.eat = function() {
  console.log("吃翔");
}
dog.eat() // 吃翔

2、通过构造函数的prototype属性拿到原型

function Dog(name,age) {
this.name = name;
this.age = age;
}
let dog = new Dog ("二哈",2);
Dog.prototype.eat = function() {
  console.log("吃翔")
}
dog.eat() //吃翔

添加原型对象的作用

通过给对象或构造函数添加一些常用的方法或属性，这些方法和属性可以自定义，并且可以多次调用，使开发方便，快捷。例如下面的栗子。

let date = new Date();
Date.prototype.formate = function(){
  let year = this.getFullYear();
  let month = this.getMonth() + 1;
  let date = this.getDate();
  return `${year}年${month}月${date}日`
}
console.log(date.formate())  //2021年10月16日

ES6的class

在es5中使用构造函创建对象，ES6使用class关键字创建对象。 

class Dog {
  constructor(name,age) {
    this.name = name;
    this.sge = age;
  }
};
Dog.prototype.eat = function() {
  console.log("吃翔");
}
let dog = new Dog("二哈",2);
console.log(dog.name); //二哈
dog.eat(); //吃翔

在此处是通过定义的类获取原型。在向原型上添加的方法。

继承

继承简单的讲就是子对象可以使用父对象上的属性和方法。

使用ES5的prototype来继承（基于原型来继承）
给一个B对象的原型值一个A构造函数所new出来的对象，则B就可以直接使用A的所有属性和方法

function A() {
  // 有属性1
  // 有方法2
};
function B() {
  // 有属性3
  // 有属性4
}
B.prototype = new A();
let all = new B()
// all对象可以调用A和B中所有的属性和方法 

使用ES6的extends来实现继承

class A {
  // 有属性1
  // 有方法2
};
// 下面创建了B这个类，并且使用extends继承了A这个类的属性和方法
class B extends A {
  // 有属性3
  // 有属性4
}
// 使用B类new一个对象后。该对象不仅可以调用B类的属性和方法还可以调用A类的属性和方法。

原型链

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

每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。

每个原型都有一个constructor属性，指向该关联的构造函数。

 prototype的原型的属性__proto__又指向上一级的prototype原型，然后prototype原型的属性__proto__又指向上一级的prototype原型.................，最终指向Object.prototype原型。

 

Object.prototype.__proto__ === null，所以到Object.prototype就没有原型了。上面由prototype形成的关系链就是原型链。更精确的说应该是由__proto__关系链组成了原型链。