js __proto__

作者: 别过经年 | 来源:发表于2017-04-19 14:25 被阅读61次
  1. 构造函数的__proto__
 function Animal(){
        
 }
 var  anim = new Animal();
Object.__proto__===Function.prototype //true
Array.__proto__===Function.prototype //true
Animal.__proto__===Function.prototype //true

Function.prototype===Function //false
Function.prototype.constructor===Function //true

Object Array Animal都是由Function new出来的,所以他们的__proto__都指向Function.prototype

Function.prototype上面挂载的有bind call apply toString等方法。

  1. 普通对象
anim.__proto__===Animal.prototype //true

Animal.prototype.__proto__===Object.prototype //true
Object.prototype.__proto__===null; //true
--> anim.__proto__.__proto__.__proto__===null

var dog={};
dog.__proto__===Object.prototype //true
Object.prototype.__proto__===null //true
-->dog.__proto__.__proto__===null //true

每个普通对象的__proto__都指向其构造函数的prototype

每个对象的__proto__都指向其构造函数的prototype(除了Object.prototype.__proto__===null //true

dog与anim相比,少了一层__proto__

由于__proto__不是IE对象内置属性,只是chrome和firefox对象内置属性,所以在编码的时候不能直接用__proto__关联普通对象之间的关系,可以这么理解prototype是普通对象和函数对象的桥梁(构造函数),prototype所有浏览器都支持,直接可以使用,而__proto__则不可以,ES5有了Object.create()去关联普通对象的关系,主要用在继承:

var obj1 = {name:'one'};
var obj2 = Object.create(obj1);

创建一个对象并且将obj2的__proto__指向obj1,即是做了一下两步操作:

var obj2={};
obj2.__proto__=obj1;

查看redux( "version": "4.0.0-beta.1",)代码的时候发现了这么句话:

  function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
          'Use custom middleware for async actions.'
      )
    }
  }

utils/isPlainObject.js的实现

export default function isPlainObject(obj) {
  if (typeof obj !== 'object' || obj === null) return false

  let proto = obj
  while (Object.getPrototypeOf(proto) !== null) {
    proto = Object.getPrototypeOf(proto)
  }

  return Object.getPrototypeOf(obj) === proto
}

lodash同样有isPlainObject

function isPlainObject(value) {
  // 判断是不是纯对象,数组也不是纯对象
  if (!isObjectLike(value) || baseGetTag(value) != '[object Object]') {
    return false
  }
  // 判断是不是由Object.create(null)创建
  if (Object.getPrototypeOf(value) === null) {
    return true
  }
  // 循环判断value的__proto__是不是等于Object.prototype,如果是new Foo()创建的就不相等
  let proto = value
  while (Object.getPrototypeOf(proto) !== null) {
    proto = Object.getPrototypeOf(proto)
  }
  return Object.getPrototypeOf(value) === proto
}

export default isPlainObject

我们都知道很多浏览器是不支持__proto__写法的,所以可以使用Object.getPrototypeOf(obj)拿到obj__proto__

var obj={name:'oo'}
obj.__proto__===Object.prototype //true
Object.getPrototypeOf(obj)===Object.prototype //true

所以Object.getPrototypeOf(obj)obj.__proto__是等价的

Js中Prototype、__proto__、Constructor、Object、Function关系介绍

相关文章

  • js __proto__

    构造函数的__proto__ Object Array Animal都是由Function new出来的,所以他们...

  • JS中的原型和原型链

    为什么要理解原型和原型链,因为有利于我们理解和实现 JS对象继承。 __proto__ __proto__是什么W...

  • 原型链

    由于__proto__是任何对象都有的属性,而js里面万物皆对象,所以会形成一条__proto__连起来的链条,递...

  • JS 中的 __proto__ 和 prototype,快来学习

    前端的三剑客:HTML、CSS、JS,今天,我们就来讲讲JS中的__proto__ 和prototype,它们到底...

  • JavaScript原型链

    js原型链 原型链是JS面向对象的基础非常重要 所有对象只有__proto__属性,而函数具有prototype属...

  • JS中的prototype、__proto__、construc

    从一个例子理清JS中的prototype、__proto__、constructor及Object、Functio...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

  • JS原型链

    JS原型链 回顾一下类,实例,prototype,__proto__的关系 另外有: 对于p1.construcr...

  • JavaScript 学习

    JS 原型与原型链 每个对象都有 __proto__属性,但只有函数对象才有 prototype 属性 所有对象的...

  • js基础知识(二)

    一、js原型和原型链 1、原型讲解: 普通的对象:是没有prototype属性的,只有隐藏属性__proto__,...

网友评论

    本文标题:js __proto__

    本文链接:https://www.haomeiwen.com/subject/owthzttx.html