javaScript原型和原型链

宝剑锋从磨砺出，梅花香自苦寒来。这篇文章主要讲述javaScript原型和原型链相关的知识，希望能为你提供帮助。
前言在了解原型和原型链之前，我们先了解一部分概念，constructor，prototype，proto。
constructor
在之前判断数据类型的文章:javaScript常见数据类型检查校验
有提到过关于构造函数的属性constructor
constructor 的是返回创建实例对象的构造函数的引用，这个属性的值是对函数本身的引用，而不是一个包含函数名称的字符串
具体用法：构造函数.prototype.constructor()

function constructorFn() this.name = "11"; console.log(constructorFn.constructor); // Functionlet a = new constructorFn(); console.log(a.constructor); // ? constructorFn() this.name = "11";

原型prototype

console.log(Object.prototype); ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓constructor: ? Object() hasOwnProperty: ? hasOwnProperty() isPrototypeOf: ? isPrototypeOf() propertyIsEnumerable: ? propertyIsEnumerable() toLocaleString: ? toLocaleString() toString: ? toString() valueOf: ? valueOf() __defineGetter__: ? __defineGetter__() __defineSetter__: ? __defineSetter__() __lookupGetter__: ? __lookupGetter__() __lookupSetter__: ? __lookupSetter__() __proto__: (...) get __proto__: ? __proto__() set __proto__: ? __proto__()

在js当中，每个函数或者方法都有一个特殊的，并且是默认的属性叫作原型（prototype），它是一个对象，这个对象包含了这个方法自带的一些属性和方法。
原型链 proto

function constructorFun() constructorFun.prototype.testName = "constructorFun"; let newFun = new constructorFun(); // newFun console.log(newFun); console.log(newFun.testName); // 通过__proto__查找输出： constructorFun console.log(newFun.constructor); // ? constructorFun() console.log(newFun.__proto__); // testName: constructorFun, constructor: ? console.log(newFun.prototype); // undefined console.log(newFun.prototype.__proto__); // Error in created hook: "TypeError: Cannot read property __proto__ of undefined"

通过上述代码我们可以看到，prototype这个对象里面，包含了一个proto的属性，这个属性就是原型链的关键,

当newFun用过new操作符，继承构造函数constructorFun的时候，testName，同时通过newFun.proto我们可以知道，newFun没有自己的name的时候，会通过proto不断地往上查找，直到查找到相关属性，如果不存在则为undefined
在javascript 中只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（proto），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。（断言出自MDN https://developer.mozilla.org/ ）

从原型链查找到null的过程构造函数

function constructorFun() constructorFun.prototype.testName = "constructorFun"; let newFun = new constructorFun(); // newFun console.log(newFun); console.log(newFun.testName); // 通过__proto__查找输出： constructorFun console.log(newFun.constructor); // ? constructorFun() console.log(newFun.__proto__); // testName: constructorFun, constructor: ? console.log(newFun.prototype); // undefined console.log(newFun.prototype.__proto__); // Error in created hook: "TypeError: Cannot read property __proto__ of undefined"

使用new操作符实例化的方法，没有自己的原型对象，并且通过proto可以向上查找构造函数的属性和方法，以及构造函数。
实例化方法可以通过constructor属性，获取构造函数本身

// constructorFun console.log(constructorFun.constructor); // ? Function()[native code] console.log(constructorFun.__proto__ === Function.prototype); // true console.log(constructorFun.prototype); // testName: constructorFun, constructor: ?testName: "constructorFun"constructor: ? constructorFun()[[Prototype]] ... console.log(constructorFun.prototype.constructor); // ? constructorFun() console.log(constructorFun.prototype.__proto__ === Object.prototype); // true

构造函数constructorFun的属性constructor为Function，原型链向上查找的时候，构造函数的proto→Function的原型prtotype
constructorFun的原型对象的proto是对象的原型

// Function console.log(Function.constructor); // ? Function()[native code] console.log(Function.__proto__); // ? ()[native code] console.log(Function.prototype); // ? ()[native code] console.log(Function.prototype.constructor); // ? Function()[native code] console.log(Function.prototype.__proto__ === Object.prototype); // true

// Object console.log(Object.constructor); // ? Function()[native code] console.log(Object.__proto__); // ? ()[native code] console.log(Object.prototype); // constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?, __lookupGetter__: ?, … console.log(Object.prototype.constructor); // ? Object()[native code] console.log(Object.prototype.__proto__); // null

字面量创建对象

let parent = name:1 // parentconsole.log(parent.constructor); // ? Object()[native code] console.log(parent.__proto__); // constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?, __lookupGetter__: ?, … console.log(parent.prototype); // undefined // console.log(parent.prototype.__proto__); // Error in created hook: "TypeError: Cannot read property __proto__ of undefined"// Object console.log(Object.constructor); // ? Function()[native code] console.log(Object.__proto__); // ? ()[native code] console.log(Object.prototype); // constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?, __lookupGetter__: ?, … console.log(Object.prototype.constructor); // ? Object()[native code] console.log(Object.prototype.__proto__); // null

通过以上代码查找，我们可以画出对应的关系图