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

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

        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. day97:MoFang:移动端APP开发准备&移动端项目搭建&APICloud前端框架

    目录 1.移动端开发相关概念 1.APP类型 2.移动端屏幕介绍 3.移动端自适配方案 4.元信息(meta) 2.APP开发准备 1.注册APPCLoud账号 2.下载APP开发编辑器 3.下载AP ...

  2. 【PYTEST】第一章常用命令

    pytest入门 安装pytest 运行pytest pytest常用命令 1. 安装pytest pip install pytest 2. 运行pytest 2.1 pytest默认搜索当前目录下 ...

  3. Redis设计与实现一之简单的动态字符串

    简单的动态字符串 Redis没有直接使用C语言中的字符串,而是自己构建了SDS这样的一种简单动态字符串,并且将他作为Redis中字符串的默认的表示. 但是并未完全抛弃C语言字符串,只不过是在C语言字符 ...

  4. C语言讲义——全局变量和局部变量

    局部变量 普通的局部变量也叫动态变量,默认有个关键字叫auto,可以省略.有两种形式: 1.函数内的局部变量 2.复合语句内的局部变量:for(int i = 0; i<5; i++){-} 静 ...

  5. 【微信开发】缓存的asscess_token过期

    开发中有遇到这样一个问题,我们一般会将从微信拿到的寿命2个小时的access_token缓存起来,业务里这个缓存的时间是90分钟, 90分钟之后缓存过期,会重新请求新的access_token使旧的a ...

  6. LeetCode 048 Rotate Image

    题目要求:Rotate Image You are given an n x n 2D matrix representing an image. Rotate the image by 90 deg ...

  7. CentOS7系统tab命令补全

    在新安装的CentOS7系统中,如果没有安装命令补全的话,在systemctl管理服务的时候就没法用tab来自动补全,因此在安装完系统后,我们要再安装命令补全这个软件: yum -y install ...

  8. PyQt(Python+Qt)学习随笔:基于项的项部件(Item Widgets(Item-Based))概述

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 Model/View架构中的视图部件是基于模型的项视图(Item Views(Model-Based ...

  9. 深入浅出让你理解什么是LLVM

    什么是LLVM 转载自https://www.jianshu.com/p/1367dad95445 LLVM项目是模块化.可重用的编译器以及工具链技术的集合. 美国计算机协会 (ACM) 将其2012 ...

  10. XSS挑战赛(1)

    以前囫囵吞枣做过一遍,现在从头再来 第一关网址为:http://127.0.0.1/xss-labs-master/level1.php?name=test 而页面上显示了用户test,name可控, ...