我的上一篇文章有解释绅士原型及简单的原型链,在这里我将对原型链做完整讲述;

// 函数的原型链: 把函数当对象(实例对象)来看

        function Person(){}
// 底层Function创建出来的Person, 底层中任意函数都是Function创建的
// var Person = new Function(); // 把Person 当孩子来看,Person对象的原型链长啥样
// Person ==> Function.prototype ==> Object.prototype ==> null;
// console.log( Person.__proto__ == Function.prototype );
// console.log( Function.prototype.__proto__ );
// Person.prototype 这个prototype属性是函数Person自带的
// Function.prototype 是唯一的原型对象的类型是个函数的
// Function.prototype 原型对象有call apply bind三个方法
console.dir( Function.prototype );
// 函数都可以去使用call apply bind方法, 是的
完整版原型链:
核心的点: 函数的双重身份
1. 函数当函数用
2. 函数也是对象
 // 1. 把Person函数当函数用,具体当构造函数用
function Person(){}
var p = new Person();
// 绘制以上代码的原型三角关系
// 构造函数: Person
// 原型对象: Person.prototype
// 实例对象: p
// console.log( Person.prototype.__proto__ === Object.prototype ); // 2. 把Person函数当对象看,当实例对象看(孩子)
// Person这个孩子谁创建的?
// 底层 var Person = new Function();
// 绘制以上代码的原型三角关系
// 构造函数: Function
// 原型对象: Function.prototype
// 实例对象: Person // 3. 把Object考虑进来,把Object当构造函数来看
var obj = new Object();
// 绘制以上代码的原型三角关系
// 构造函数: Object
// 原型对象: Object.prototype
// 实例对象: obj
// 4. 把Object当实例对象来看,孩子看,Object孩子谁生的
// 底层 var Object = new Function();
// 绘制以上代码的原型三角关系
// 构造函数: Function
// 原型对象: Function.prototype
// 实例对象: Object
// console.log( Object.__proto__ === Function.prototype ); // 5. Function 函数是谁生下来的,是Function自己
// var Function = new Function();
// 绘制以上代码的原型三角关系
// 构造函数: Function
// 原型对象: Function.prototype
// 实例对象: Function
console.log( Function.__proto__ == Function.prototype );
小结:
 1. 函数是函数,也是对象
     是函数有prototype属性
     是对象有__proto__属性
     所以函数有prototype也有__proto__属性
2. 任何函数的原型链都有 Function.prototype
3. 任何对象的原型链上都有 Object.prototype
4. 函数是一等公民(特权)
      typeof 函数 ==> function
      Function 生自己
      Function.prototype 原型对象的类型是唯一的函数类型

案例:

    console.log( Function.prototype === Function.prototype ); // true
console.log(Object.__proto__ === Function.prototype); // true
console.log( Function.prototype.__proto__ === Object.prototype ); // true
console.log( Object.prototype.__proto__ === Object.prototype ); // false
console.log( Object.__proto__.__proto__ === Object.prototype ); // true
// 面试题
// Function的prototype原型对象有没有在Function对象的原型链上
/*console.log(Function instanceof Function); // true
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true
console.log(Object instanceof Object); // true*/ // 练习
function Person() {}
var p = new Person()
console.log(p.constructor); // Person
console.log(Person.constructor); // Function

JavaScript之函数原型链完整版的更多相关文章

  1. 对Javascript 类、原型链、继承的理解

    一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...

  2. 图解JavaScript中的原型链

    转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...

  3. JavaScript (JS) 面向对象编程 浅析 (含对象、函数原型链、闭包解析)

    1. 构造函数原型对象:prototype ① 构造函数独立创建对象,消耗性能 function Person(name) { this.name = name; this.sayHello = fu ...

  4. JAVASCRIPT闭包以及原型链

    方法内部还有个方法,实例化父方法后,再次调用父方法,可以运行父方法内部的子方法,这样的程序就叫做闭包 DEMO如下: //function outerFn() { // var outerVar = ...

  5. javaScript里的原型链

    原型对象也是普通的对象,是对象一个自带隐式的__proto__属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链.原型链是由一些用来继承和共享属性的对象组成的( ...

  6. JavaScript继承与原型链

    对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念( ES6 新增了c ...

  7. 一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系 转载加自己的总结

    1. JavaScript内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象    ...

  8. JavaScript中的原型链和继承

    理解原型链 在 JavaScript 的世界中,函数是一等公民. 上面这句话在很多地方都看到过.用我自己的话来理解就是:函数既当爹又当妈."当爹"是因为我们用函数去处理各种&quo ...

  9. JavaScript -- 继承与原型链

    JavaScript对象有一个指向一个原型对象的链,当试图访问一个对象的属性的时候,他不仅仅会在该对象上面搜寻,还会搜寻该对象的原型,以及对象的原型的原型,依次层层搜索,直到找到名字匹配的属性或者到达 ...

随机推荐

  1. SQL相关子查询是什么?和嵌套子查询有什么区别?

    目录 两者的各种叫法 相关子查询MySQL解释 相关子查询Wikipedia解释 相关子查询执行步骤拆解 相关子查询和嵌套查询的区别 参考资料 两者的各种叫法 相关子查询叫做:Correlated S ...

  2. Mat使用详解

    背景 笔记中躺了很久的文章,今天用到Mat时发现之前写的内容还算清晰,分享出来; 如下所举例使用的dump文件是针对之前使用的ignite库溢出时的dump文件:关于ignite的概念此处不再叙述,本 ...

  3. 《Spring Boot 实战纪实》之如何攥写需求文档

    目录 前言 (思维篇)人人都是产品经理 1.需求文档 1.1 需求管理 1.2 如何攥写需求文档 1.3 需求关键点文档 2 原型设计 2.1 缺失的逻辑 2.2 让想法跃然纸上 3 开发设计文档 3 ...

  4. 区块链V1版本实现之二

    部分程序代码(生成并调用hash代码): 1 //创建区块,对Block的每一个字段填充数据 2 func NewBlock(data string, prevBlockHash []byte) *B ...

  5. vue跨域请求

    浏览器的同源策略 同源 协议相同 域名相同 端口相同 同源目的 保证用户信息安全,防止恶意的网站窃取数据 同源策略解决方法 jsonp cors 代理解决跨域 settings.py INSTALLE ...

  6. 雪花算法 Java 版

    雪花算法根据时间戳生成有序的 64 bit 的 Long 类型的唯一 ID 各 bit 含义: 1 bit: 符号位,0 是正数 1 是负数, ID 为正数,所以恒取 0 41 bit: 时间差,我们 ...

  7. 第5.2节 Python的函数参数收集

    函数的参数使用除了常规的位置参数和关键字参数外,还支持可变个数的函数参数,这种支持可变个数的参数方法称为参数收集,对应的参数称为收集参数. 一.参数收集的定义 Python的函数支持可变不定数量的参数 ...

  8. PyQt(Python+Qt)学习随笔:QScrollBar以及QAbstractSlider滚动条部件功能详解

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.概述 在Designer输入部件中Horizo ...

  9. PyQt(Python+Qt)学习随笔:QMainWindow的takeCentralWidget对QDockWidget作用案例图解

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 QMainWindow的takeCentralWidget方法作用是将 ...

  10. PyQt(Python+Qt)学习随笔:QHeaderView.ResizeMode取值及含义

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 关于ResizeMode的使用请参考<PyQt(Python+Qt)学习随笔:QTableWi ...