1.提出两个问题:

  1. Js 的prototype和__proto__ 是咋回事?
  2. 先有function 还是先有object?

2.引用《JavaScript权威指南》的一段描述:

每个JS对象一定对应一个原型对象(__proto__指向的),并从原型对象继承属性和方法。

function Person(){

  this.live = true;

}

var sy = new Person();

console.info(sy.__proto__ === Person.prototype) // true

Cat = {};

console.info(Cat.__proto__ === Object.prototype) // true

Dog = new Object();

console.info(Dog.__proto__ === Object.prototype) // true

又来一个问题:

Object 是js中的最原始的对象吗?Object.prototype是什么?

3.先谈prototype

只有函数才有prototype属性。

JS不像其它面向对象的语言,它没有类(class,ES6引进了这个关键字,但更多是语法糖)的概念。JS通过函数来模拟类。

当你创建(定义)函数Person时,JS会为这个函数自动添加prototype属性,其是Object类型对象,并且包含constructor和__proto__。

而一旦你把这个函数当作构造函数(constructor)调用(即通过new关键字调用),那么JS就会帮你创建该构造函数的实例sy,实例继承构造函数prototype的所有属性和方法(实例通过设置自己的__proto__指向承构造函数的prototype来实现这种继承)。

对象的__proto__指向自己构造函数的prototype。sy.__proto__.__proto__...的原型链由此产生,包括我们的操作符instanceof正是通过探测obj.__proto__.__proto__... === Constructor.prototype来验证sy是否是Person或者Object的实例。

4.函数和对象之间的关系(重点)

创建个函数有两种方式:

(1)

var foo = new Function ([arg1[, arg2[, ...argN]],] functionBody)

(2)

function foo() {} // var foo = function(){}

深入分析函数:

函数也是对象,是一个Function实例(Function就像是python中的元类的角色),我们称函数是特殊的对象(只有函数有prototype

因此每个函数对象都继承Function的原型对象,Person.__proto__ 指向Function.prototype。下面两个黑框是同一个内存对象

给出两个判断:

Object instanceof Function // true

Function instanceof Object // true

Function是函数的起源,那Function本身是什么呢?

Object又是什么呢,先有Object还是先有Function

乱了。。。。。

上关系图来分析吧。

再来看个js开天劈地的伪代码

var ObjectPrototype = create( );   // 开天辟地

var FunctionPrototype = create( ObjectPrototype );
//FunctionPrototype(后被赋值给了Function.prototype)是Object类型的
//因为其原型是ObjectPrototype var Function = create( FunctionPrototype ); Function.prototype = FunctionPrototype;
// Function是Function类型的,也是Object类型的
//言外之意,Function对象 原型链上有Function.prototype和Object.prototype Object = create( FunctionPrototype ); Object.prototype = ObjectPrototype;
//Object是Function类型的,也是Object类型的
//言外之意Object对象的原型链上有Function.prototype和Object.prototype
  1. 先有了Object.prototype
  2. 然后有Function.prototype,
  3. 然后有了Function,
  4. 然后创建了Object,
  5. Object的原型又指向了Object.prototype,构成了循环指向;

从而出现了鸡和蛋的问题。

所以严格来说先有Function再有Object。

但是又先有的Object原型,再有的Function原型。

Object.prototype.__proto__ === null,说明原型链到Object.prototype终止

  1. Person是Function创建出来的函数,Person.prototype是个Object对象,Person.proyotype.__proto__指向Object.prototype
  2. Function是js自带的对象,可以创建函数的函数所以Function.prototype指向的函数根源,所有创建的函数的__proto__都指向Function.prototype给Object原型添加方法,Function也会有该方法,因为Function.prototype 指向Object.prototype。
  3. Object是js自带的对象,算基类; Object本身又是通过Function定义出来的,所以会受到Function影响。
  4. Function只管函数,Object什么都管。

可以发现黑框的Object不是普通的Object,而是原始天尊

javascript原型深入解析2--Object和Function,先有鸡先有蛋的更多相关文章

  1. javascript原型深入解析1-prototype 和原型链、js面向对象

    1.用prototype 封装类 创建的每个函数都有一个prototype(原型属性),他是个指针,指向的对象,这个对象的用途就是包含了这个类型所有实例共享的属性和方法. 回味这句,想想java或者C ...

  2. JavaScript原型链以及Object,Function之间的关系

    JavaScript里任何东西都是对象,任何一个对象内部都有另一个对象叫__proto__,即原型,它可以包含任何东西让对象继承.当然__proto__本身也是一个对象,它自己也有自己的__proto ...

  3. 前端笔记之JavaScript面向对象(一)Object&函数上下文&构造函数&原型链

    一.对象(Object) 1.1 认识对象 对象在JS中狭义对象.广义对象两种. 广义:相当于宏观概念,是狭义内容的升华,高度的提升,范围的拓展.狭义:相当于微观概念,什么是“狭”?因为内容狭隘具体, ...

  4. Javascript Object、Function对象

    1.Object对象 原型对象 原型是对象的一个属性,也就是prototype属性,每个对象都有这个内部属性,而且他本身也是一个对象. <script type="text/javas ...

  5. JavaScript中你所不知道的Object(二)--Function篇

    上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...

  6. javascript的 Object 和 Function

    一. javascript 的 内置对象: Object 和 Function javascript所有东西,包括 Function 都是对象 . Array  其实是一个 Function 类型的对 ...

  7. 从Object和Function说说JS的原型链

    ECMAScript规定了两个特殊的内置对象:Object和Function.他们的特殊性在于,他们本身既是对象又是函数,而他们同时也是对象和函数的构造器.这种自己生自己的逻辑显然违反人性,如果还停留 ...

  8. 从var func=function 和 function func()区别谈Javascript的预解析机制

    var func=function 和 function func()在意义上没有任何不同,但其解释优先级不同:后者会先于同一语句级的其他语句. 即: { var k = xx(); function ...

  9. Jascript原型链以及Object和Function之间的关系

    先看一个简单的function变量 function fun1(name) { this.name = name; } console.log("fun1", fun1) 从结果可 ...

随机推荐

  1. JavaScript中eval函数的用法

    1. eval函数会计算传给的字符串, 并把作为脚本代码来执行. eval(str) 此函数接受一个字符串作为参数,并把str当做一段JavaScript脚本代码来执行,如果str执行结果返回一个值则 ...

  2. vuex中mapGetters的使用及简单实现原理

    一.项目中的mapGetters在Vue项目的开发过程中必然会使用到vuex,对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,如果不使用vuex,那么一些非父子组件之间的数据通信将会 ...

  3. 第07节-开源蓝牙协议BTStack框架代码阅读(下)

    上篇博客中已经对BTStack框架进行了较为详细的说明,本篇博客将进一步总结一下(由韦大仙笔记所得). 可以从5个方面来理解BTStack的框架: 1.硬件操作:hci_transport_t BTS ...

  4. luoguP5495:Dirichlet 前缀和

    题意:给定数组a[]的生成方式,然后b[i]=∑a[j]  ,(i%j==0),求所有b[i]的异或和.所有运算%2^32; 思路:高维前缀和的思想,先筛出所有素数,然后把每个素数当成一维,那么分开考 ...

  5. React / Ant Design Pro 实现Canvas画布实时自适应

    如何实现canvas根据父容器进行自适应? Ant Design的组件都提供了强大的自适应能力,为了对齐父组件,镶嵌在Ant Design组件里的canvas也需要能根据父级容器进行自适应的能力,页面 ...

  6. 关于System.InvalidOperationException异常

    什么是InvalidOperationException 操作无效异常.当方法调用对对象的当前状态无效时引发的异常. 继承 Object Exception SystemException Inval ...

  7. ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于GPRS模块AT指令TCP透传方式,定时访问升级(含有数据校验)

    实现功能概要 单片机定时使用http访问云端的程序版本,如果版本不一致, 然后通过http下载最新的升级文件,实现远程升级STM32程序. 兼容Air202 ,SIM800 测试准备工作(默认访问我的 ...

  8. 【字符串】KMP

    Algorithm Task 给定一个文本串 \(S\) 和一个模式串 \(T\),求 \(T\) 在 \(S\) 中出现的所有位置. Limitations 要求时空复杂度均为线性. Solutio ...

  9. 【AGC009E】Eternal Average

    [AGC009E]Eternal Average 题面 洛谷 题解 神仙题.jpg 我们把操作看成一棵\(k\)叉树,其中每个节点有权值,所有叶子节点(共\(n+m\)个)就是\(0\)或\(1\). ...

  10. springboot事务

    参考: 1.https://www.cnblogs.com/kesimin/p/9546225.html https://www.cnblogs.com/east7/p/10585724.html