study icon indicating copy to clipboard operation
study copied to clipboard

Javascript 原型

Open cfour-hi opened this issue 6 years ago • 1 comments

一图胜千言!

javascript 原型 图片来源 - MollyPages.org

推导

  1. Javascript 的世界里面 “函数是一等公民”

  2. 原型链的顶端是 Object.prototype,而它的原型是 null

    Object.getPrototypeOf(Object.prototype) === null // true
    
  3. 所有函数对象(普通函数 + 构造函数)的原型都是 Function.prototype

    Object.getPrototypeOf(String) === Function.prototype    // true
    Object.getPrototypeOf(Number) === Function.prototype    // true
    Object.getPrototypeOf(Boolean) === Function.prototype   // true
    Object.getPrototypeOf(Object) === Function.prototype    // true
    Object.getPrototypeOf(Array) === Function.prototype     // true
    Object.getPrototypeOf(Function) === Function.prototype  // true
    
    function A () {} // 构造函数
    Object.getPrototypeOf(A) === Function.prototype // true
    
    function a () {} // 普通函数
    Object.getPrototypeOf(a) === Function.prototype // true
    
  4. Function.prototype 的原型是 Object.prototype

    Object.getPrototypeOf(Function.prototype) === Object.prototype // true
    
  5. Function 也是一个函数,所以:

    Object.getPrototypeOf(String.prototype) === Object.prototype    // true
    Object.getPrototypeOf(Number.prototype) === Object.prototype    // true
    Object.getPrototypeOf(Boolean.prototype) === Object.prototype   // true
    Object.getPrototypeOf(Object.prototype) === ? // 这里有个坑
    Object.getPrototypeOf(Array.prototype) === Object.prototype     // true
    Object.getPrototypeOf(Function.prototype) === Object.prototype  // true
    
    function A () {} // 构造函数
    Object.getPrototypeOf(A.prototype) === Object.prototype // true
    
    function a () {} // 普通函数
    Object.getPrototypeOf(a.prototype) === Object.prototype // true
    

    上面有个坑,小心别趟!!!

  6. 实例的原型无需多言

  7. 字面量对象的原型是 Object.prototype

prototype__proto__ 的区别

__proto__ 是隐式原型,用来查找原型链中实际原型对象的方法。

prototype 是显示原型,当创建一个对象的时候,用来构建 __proto__

每一个对象都有 __proto__ 属性,只有函数才有 prototype 属性,除了通过 Function.prototype.bind 方法构造出来的函数

NOTE Function objects created using Function.prototype.bind do not have a prototype property or the [[Code]], [[FormalParameters]], and [[Scope]] internal properties. ----- ECMAScript Language Specification

__proto__ 是非标准方法,虽然大部分浏览器都已经部署,但还是建议使用 Object.getPrototypeOf()Reflect.getPrototypeOf() 方法获取对象原型。

cfour-hi avatar Oct 18 '17 02:10 cfour-hi