乐趣区

关于typescript:javaScript原型和原型链

jiezi

前言

在理解原型和原型链之前，咱们先理解一部分概念，constructor，prototype，__proto__。

constructor

在之前判断数据类型的文章: javaScript 常见数据类型查看校验

有提到过对于构造函数的属性 constructor

constructor 的是返回创立实例对象的 构造函数的援用，这个属性的值是对函数自身的援用，而不是一个蕴含函数名称的字符串
具体用法：构造函数.prototype.constructor()

function constructorFn() {this.name = "11";}

console.log(constructorFn.constructor); // Function

let 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}
// parent

console.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

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

总结：

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

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

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

源码地址

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

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

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

退出移动版