简单易懂的JavaScript原型以及原型链

开始

一文带你进入JavaScript中的奥秘之处

术语了解

1. 函数（构造函数（方法））

   //用来构造对象的函数
   //通过 function 关键词进行定义，其后是函数名和括号 ()。
   //函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
   //圆括号可包括由逗号分隔的参数：
   function Test(){
   	//函数体
   }
   //类中的constructor是构造方法
   class Test{
   	constructor(){
   		//方法体
   	}
   }
   

2. 对象

   //使用花括号包裹，里面是键值对（key:value）的方式即为对象
   const person = {
     firstName: "Bill",
     lastName : "Gates",
     id: 678,
     fullName : function() {
       return this.firstName + " " + this.lastName;
     }
   };
   

3. 实例对象

   //通过 new 关键字创建出来的即为实例对象
   function Test(name,age){
   	this.name = name
   	this.age = age
   }
   const test = new Test('zhangs', 42) 
   console.log(test) //Test {name: 'zhangs', age: 12}
   
   //通过类class定义的也可以创建对象（前提必须有 构造方法）
   class Test2{
   	constructor(){
   		//方法体
   	}
   }
   const test2 = new Test2()
   

进入正题

接下来是对JavaScript函数、对象中的prototype、__ proto __（[[Prototype]]）、constructor三者之间的关系进行详解

prototype

每当定义一个函数（函数也是对象）时候，函数中都会包含一些预定义的属性。其中每个函数都有一个prototype 属性，这个属性prototype就是原型对象。（多读几遍细品）

原型对象，顾名思义，它就是一个普通对象。从现在开始你要牢牢记住原型对象就是 函数中的prototype，比如上面代码定义的Person函数中的prototype。

__ proto __

在创建出来的实例对象（不论是普通对象还是函数对象）中，都有一个叫做__proto__（[[Prototype]]） 的内置属性，用于指向创建它的构造函数的原型对象prototype。

Person.prototype === person.__proto__

constructor

在默认情况下，所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数（Person）

上面那句话有点拗口，简单说下，其实原型对象还有一个默认的属性：constructor；这个属性是一个指针，指回 Person构造函数。
Person.prototype.constructor === Person
person.__proto__.constructor === Person

三者关系

原型链

每个对象都有个__proto__属性指向的也是原型对象 而原型对象也是个对象也有一个__proto__ 它指向的是继承上一级的原型对象 这样就形成了一个链式结构 叫做原型链

例如 上图所有对象都默认继承Object.prototype可以用对象上的属性和方法

原型及原型链图解

到这里就结束了，后续还会更新 前端 系列相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！

推荐文章👇
原型和原型链
说说原型（prototype）、原型链和原型继承