关于typescript: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();// newFunconsole.log(newFun);console.log(newFun.testName); // 通过__proto__查找 输入： constructorFunconsole.log(newFun.constructor);  // ƒ constructorFun() {}console.log(newFun.__proto__);  // {testName: 'constructorFun', constructor: ƒ}console.log(newFun.prototype);  // undefinedconsole.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();// newFunconsole.log(newFun);console.log(newFun.testName); // 通过__proto__查找 输入： constructorFunconsole.log(newFun.constructor);  // ƒ constructorFun() {}console.log(newFun.__proto__);  // {testName: 'constructorFun', constructor: ƒ}console.log(newFun.prototype);  // undefinedconsole.log(newFun.prototype.__proto__); // Error in created hook: "TypeError: Cannot read property '__proto__' of undefined"

应用new操作符实例化的办法，没有本人的原型对象，并且通过__proto__能够向上查找构造函数的属性和办法，以及构造函数。
实例化办法能够通过constructor属性，获取构造函数自身

// constructorFunconsole.log(constructorFun.constructor);  // ƒ Function() { [native code] }console.log(constructorFun.__proto__ === Function.prototype); // trueconsole.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__是对象的原型

// Functionconsole.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

// Objectconsole.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"// Objectconsole.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

通过以上代码查找，咱们能够画出对应的关系图

总结：

原型prototype和原型链查找__proto__，constructor形成了原型链，通过这些属性和办法能够层层网上查找始终到null
构造函数实例化办法，能够通过原型链的模式向上查找到对应属性（这个属性存在的前提下），这里的知识点还蕴含了new实例的过程中，继承方面的常识
应用原型链和原型，咱们能够进行封装一下构造方法，还有一些插件，咱们在浏览一下框架源码或者插件源码的时候，都能看到原型和构造函数相干的代码。
原型和原型链的常识从概念上并不太好了解或者说有点艰涩难懂，能够试着去写一些实例化对象和办法，去查找原型上的办法
并且在开发过程中如果波及到面向对象编程或者使用较多的话，能够加深咱们的了解
相似数组以及Function等构造函数，咱们能够通过继承，在原型链上扩大一些通用的utils办法

以上就是js中原型和原型链概念的简略解析，有任何问题欢送留言，后续的文章整顿而后作为补充。

文章博客地址：javaScript原型和原型链

源码地址

码云 https://gitee.com/lewyon/vue-note
githup https://github.com/akari16/vue-note

欢送关注公众号：程序员布欧，不定期更新一些文章

创作不易，转载请注明出处和作者。

前言