js通俗易懂的原型链、原型继承、instanceof

最近这段时间准备跳槽，就每天都在筹备面试题目，原型链的问题肯定是面试高频，就去好好研究了一下关于原型链的知识点，于是总结了这篇文章。跟着我写的这个往下走，边看边敲，相信我，看完这篇文章之后你就能彻底明白原型链了。

• 什么是原型对象？
  每个构造函数都有一个prototype属性，这个构造函数所创建的实例有一个**proto**的属性，他们两个指向同一个地方，这个地方叫作原型对象。

function fn (name) {
	this.name = name
}
let obj= new fn('张三')
obj.__proto__=== fn.prototype // true
// 	prototype 显示原型
//  __proto__ 隐示原型

函数的生成可以有很多种方法，我们这儿也可以把 函数fn看成是通过Function这个构造函数来生成的实例，那么fn这个函数的__proto__ 是不是就是和Function的prototype指向同一个地方了啊

var fn = new Function() // 通过构造函数的方式创建
fn.__proto__ === Function.prototype // true

那么Function.prototype是不是一个对象呢？当然是，那对象是不是可以new一个Object来创建的呢？当然可以，那么Function.prototype.proto是不是就和Object.prototype指向同一个地方呢？

var fn = new Function() // 通过构造函数的方式创建
fn.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype //true

最后你结合这两个代码一起来看呢？

var fn = new Function()
fn.__proto__ === Function.prototype

Function.prototype.__proto__ === Object.prototype // true

//是不是可以得出：
fn.__proto__.__proto__ === Object.prototype // true

那思考一下Object.prototype是不是也是一个对象呢？那它的**proto指向哪里呢？它最后指向null**，所以说null就是一个原型链的终点

var fn = new Function()
fn.__proto__ === Function.prototype

Function.prototype.__proto__ === Object.prototype // true

Object.prototype.__proto__ === null // true
// 最后整个调用
fn.__proto__.__proto__.__proto__ === null

最重要的一点就是理解

构造函数的prototype也是一个对象，它的__proto__就指向Object的prototype

• constructor
  你会发现你打印fn.prototype的时候会返回一个函数带着constructor，它和prototype是成对出现的

function fn () {}
console.log(fn.prototype) // {constructor: fn}
// 这个constructor其实就是这个构造函数本身
console.log(fn.prototype.constructor === fn) // true

• 原型链
  什么是原型链呢？由这个__proto__组成的这个链式调用就是原型链。
  那么再回过头来看第一段代码的原型链

function fn (name) {
	this.name = name
}
let obj= new fn('张三') // 构造函数的方式创建对象
// 一个一个的转换
obj.__proto__=== fn.prototype // true

fn.prototype.__proto__ === Object.prototype // true

obj.__proto__.__proto__ === Object.prototype // true

Object.prototype.__proto__ === null // true
//最终的原型链
obj.__proto__.__proto__.__proto__ === null // true

• 原型继承
  原型继承是什么呢？原型继承就是，实例可以使用构造函数上的prototype中的方法

function fn (name) {
	this.name = name
}
fn.prototype.print = function () {
	console.log(this.name)
}
Object.prototype.say = function () {
	console.log('我是一个对象的say方法')
}
const fn1 = new fn('zhm')
// 使用fn的prototype上的方法 
fn1.print() // 打印 zhm
// 使用Object的prototype上的方法  
fn1.say () // 打印 我是一个对象的say方法

总结一下就是

原型继承就是可以继承实例原型链上面的构造函数的prototype的方法

• instanceof
  用来判断当前变量的类型，使用方法是

A instanceof B 

含义是： 判断B的prototype是否在A的原型链上， 所以B必须是构造函数才可以

function fn (name) {
  this.name = name
}
const obj = new fn('zhm')
console.log(obj instanceof fn) // true
console.log(obj instanceof Function) // false 因为obj的原型链上面没有Function的prototype
console.log(obj instanceof Object) // true
console.log(fn instanceof Function) // true 因为fn的原型链上由Function的prototype 
// fn.__proto__ === Function.prototype
console.log(fn instanceof Object) // true

可以发现这样子判断类型比typefo要好一点，因为是通过原型链来进行判断的，但是也有问题，因为所有的原型链最后都会指向Object

const str = new String('zhm')
console.log(str instanceof String) // true
console.log(str instanceof Object) // true

所以说：万物皆对象

注意：A如果是基础数据类型，一定要用构造函数的方式来创建，否则不能使用instanceof 来判断它的数据类型，引用数据类型可以直接创建。

• 结束语：

  一定要边看边敲，代码是积累出来的，一定要去理解原型链，网上很多总结的原型链是什么，你背下来没用，你只是背下来了，当你面试的时候你不理解，面试官随便抛出一个问题你就不知道了，理解之后，如果面试官让你讲一下原型链，你就可以从原型对象开始讲起，然后讲原型链、原型继承、instanceof这些，举一反三，这样子就会让面试官觉得你的基础不错。
  只是做个总结，不喜勿喷，参考文章：林三心的文章