JS function 是函数也是对象, 浅谈原型链

JS 唯一支持的继承方式是通过原型链继承, 理解好原型链非常重要, 我记录下我的理解

1. 前言

  1. new 出来的实例有 _proto_ 属性, 并且指向其构造函数的 prototype 对象

    function Person(){}
    const person = new Person();
    person.__proto__ === Person.prototype // true
  2. 所有 new 出来的实例有 _proto_ 属性, 所有函数有 prototype 属性

  3. 不要小看任何一个对象, 这个对象有可能是一个函数; 不要小看任何一个函数, 这个函数有可能也是一个对象

  4. 只要是对象, 一定就有相应的构造函数 ( 除了 Object 的原型对象找不到 )

2. 有趣的部分

  1. function 是函数, 但也是对象
  2. Object 是函数, 但也是对象
  3. 看一个对象是不是函数, 就看它有没有 prototype 属性, 像原型对象没有, 它就只是单纯的对象, 不是函数 ( 原型对象无原型 )
  4. Function 是函数, 也是对象, 并且它作为对象的 _proto_ 属性 等于 它作为函数的 prototype 属性, 这说明, 它 自己创建自己

3. 解释

  1. 以这个为例

    function Person(){}
    const person = new Person();
  2. function 是函数, 但也是对象

    • 是函数
    Person.prototype  // {constructor: ƒ ...}
    
    Person.prototype.constructor === Person // true

    这说明 Person 是函数, 有原型, 原型的 constructor 指向自己

    • 是对象
    Person.__proto__  // ƒ () { [native code] }
    
    Person.__proto__ === Function.prototype //true

    这说明 Person 是对象, 相当于 Person = new Function() , 有没有那味了呢

  3. 原型对象是单纯的对象, 不是函数

    Person.prototype.prototype  // undefined 不是函数, 无原型
    
    Person.prototype.__proto__  // {constructor: ƒ...} 
    
    Person.prototype.__proto__ === Object.prototype  // true

    原型对象无原型, 说明原型对象就只是一个对象, 是对象肯定就有构造函数, 其构造函数是 Object, 相当于 Person.prototype = new Object()

  4. Object 是函数, 但也是对象

    Object.prototype  // {constructor: ƒ ...} 是函数, 有原型
    
    Object.prototype.__proto__  // null 所有对象都有其构造函数,  Object 原型对象例外
    
    Object.__proto__  // ƒ () { [native code] } Object 是对象
    
    Object.__proto__ === Function.prototype  // true

    Object 有原型对象, 说明它是个函数, 并且它的原型是唯一一个找不到构造函数的; Object 是对象, 有自己的构造函数, 并且它的构造函数是 Function. 相当于 Object = new Function()

  5. Function 是函数, 也是对象, 并且它自己创建自己

    Function.prototype  // ƒ () { [native code] } 是函数
    
    Function.__proto__  // ƒ () { [native code] } 是对象
    
    Function.__proto__ === Function.prototype  // true
    
    Function.prototype.__proto__ === Object.prototype  // true

    经过前面的讨论, 从这个代码可以看出, Function 即是函数也是对象, 并且相当于自己创建了自己, 相当于 Function = new Function(); ; Function 的原型对象的构造函数也是 Object, 相当于 Function.prototype = new Object()

4. 关系图

new 的看法, new 出来的对象一定有 _proto_ 指向其构造函数的 prototype.

Function = new Function();
Object = new Function();
Person = new Function();
所有的原型对象 = new Object(); // 非继承, 人为修改后会发生变化
person = new Person();

JS function 是函数也是对象, 浅谈原型链的更多相关文章

  1. js function定义函数的4种方法

    js function定义函数的4种方法 1.最基本的作为一个本本分分的函数声明使用. 复制代码代码如下: 复制代码代码如下: function func(){} 或 var func=functio ...

  2. JS对象继承与原型链

    1.以复制方式实现的继承 1.1浅拷贝 基本类型的复制 var parent = { lanage: "chinese" } var child = { name: "x ...

  3. jsp内置对象浅谈

    jsp内置对象浅谈 | 浏览:1184 | 更新:2013-12-11 16:01 JSP内置对象:我们在使用JSP进行页面编程时可以直接使用而不需自己创建的一些Web容器已为用户创建好的JSP内置对 ...

  4. JS核心系列:浅谈原型对象和原型链

    在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...

  5. js中的函数,Date对象,Math对象和数组对象

    函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...

  6. [js高手之路]原型对象(prototype)与原型链相关属性与方法详解

    一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...

  7. js 中对象--对象结构(原型链基础解析)

    对于本篇对于如何自定义对象.和对象相关的属性操作不了解的话,可以查我对这两篇博客.了解这两篇可以更容易理解本篇文章 用构造函数创建了一个对象  obj对象的本身创建了两个属性  x=1   ,y=2 ...

  8. JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)

    JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...

  9. 关于js的几道经典题(作用域、原型链等)自己做的

    1. function test() { var a = 1; setTimeout(function() { alert(a); a = 3; }, 1000); a = 2; setTimeout ...

随机推荐

  1. Boost随机库的简单使用:Boost.Random(STL通用)

    文章目录 文章目录 文章内容介绍 Boost随机库的简单使用 生成一个随机的整数 生成一个区间的平均概率随机数 按概率生成一个区间的随机整数 一些经典的分布 与STL的对比 Ref 文章内容介绍 Bo ...

  2. 2019 ACM/ICPC North America Qualifier G.Research Productivity Index(概率期望dp)

    https://open.kattis.com/problems/researchproductivityindex 这道题是考场上没写出来的一道题,今年看看感觉简单到不像话,当时自己对于dp没有什么 ...

  3. 转:Cookie详解

    没怎么坐过客户端相关的工作,所以写爬虫的时候,很多概念都很模糊,学习起来很困难.现在想攻坚一下,所以找了一下cookies相关的内容. HTTP cookies,通常又称作"cookies& ...

  4. PyQt(Python+Qt)学习随笔:QScrollArea的widgetResizable属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域的widgetResizable属性用于控制滚动区域的内容部署层是否应跟随滚动区域的大小变化 ...

  5. PyQt(Python+Qt)学习随笔:QListWidgetItem的构造方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListWidgetItem对象专门用于作为QListWidget对象的一个项. QListWid ...

  6. 刷题记录:[GWCTF 2019]枯燥的抽奖

    目录 刷题记录:[GWCTF 2019]枯燥的抽奖 知识点 php伪随机性 刷题记录:[GWCTF 2019]枯燥的抽奖 题目复现链接:https://buuoj.cn/challenges 参考链接 ...

  7. bugku never give up

    打开网页,看到?id=1,很容易想到了爆破. 然后bp抓包爆破.(传说中的一秒爆破.) 看到了 1p.html . 直接访问 缓缓打出一个?(这是个锤子o,本来以为这里有flag,但是,这真的是论坛啊 ...

  8. MySQL-索引分类及使用索引

    1.什么是索引? 索引:存储引擎用于快速找到记录的一种数据结构,默认使用B-Tree索引.索引是存储引擎层中实现.简单理解为:排好序的快速查找数据结构 索引的目的:提高数据查询的效率,优化查询性能,就 ...

  9. C++模板元编程----选择排序

    目录 目录 前言 代码详解 数据的结构 数据的操作 分割向量 合并向量 寻找最大值 排序 总结 前言 模板在C++一直是比较神秘的存在.STL和Boost中都有大量运用模板,但是对于普通的程序员来说, ...

  10. 8、Spring Cloud Zuul

    1.Zuul简介 Zuul包含了对请求的路由和过滤两个最主要的功能. 路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础. 过滤器功能则负责对请求的处理过程进行干预,是实现请 ...