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. 推荐4个Flutter重磅开源项目

    早上好,骚年,我是小 G,我的公众号「菜鸟翻身」会推荐 GitHub 上有用的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注我. 近年来,随着移动智能设备的快速普及,移动多端统一开 ...

  2. 老猿学5G专栏完结说明

    老猿学5G是因为工作原因促成的,主要目的是为了研究5G的计费架构相关内容,到今天为止,基本上达成目标,因此这个专栏基本上告一段落了. 回想这2个多月的日子,从一个对5G相关知识完全不熟悉的小白,到现在 ...

  3. vue结合element-ui实现二级复选框checkbox

    vue结合element-ui实现二级复选框checkbox 话不多说先上效果 交互:1.点击按钮全选,所有的checkbox全部选中:点击清空,所有的checkbox框都不选:点击确定获取选中的ch ...

  4. 懒松鼠Flink-Boot(Flink+Spring):一款将Flink与Spring生态完美融合的脚手架工程

    目录 你可能面临如下苦恼: 接口缓存 重试机制 Bean校验 等等...... 它为流计算开发工程师解决了 有了它你的代码就像这样子: 仓库地址:懒松鼠Flink-Boot 1. 组织结构 2. 技术 ...

  5. 密码学系列之:明文攻击和Bletchley Park

    目录 简介 crib和明文攻击 布莱奇利公园(Bletchley Park) 简介 明文攻击就是指已经知道了部分明文和它对应的加密后的字段,从而可以推测出使用的加密手段或者密码本.明文攻击这个故事还要 ...

  6. 【C++】C++ new和malloc到底哪里不一样

    作者:李春港 出处:https://www.cnblogs.com/lcgbk/p/14118782.html 目录 一.前言 二.new和malloc两者的区别 2.1 属性的区别 2.2 使用上的 ...

  7. Big Sur 11.0.1 让2K屏幕开启Hidpi

    首先来个成果图: 一.复制显示器配置文件 终端输入命令:cd /System/Library/Displays/Contents/Resources/Overrides 接着输入:open . 打开D ...

  8. python程序的三种控制结构

    程序的三种控制结构 什么是控制结构? """ 程序有三种基本结构组成:顺序结构.分支结构.循环结构.任何程序都是由这三种基本结构组成. 顺序结构是程序按照线性顺序依次执行 ...

  9. 一文说通C#中的异步迭代器

    今天来写写C#中的异步迭代器 - 机制.概念和一些好用的特性   迭代器的概念 迭代器的概念在C#中出现的比较早,很多人可能已经比较熟悉了. 通常迭代器会用在一些特定的场景中. 举个例子:有一个for ...

  10. windows宿主机访问ubuntu虚拟机中的docker服务

    查看docker容器地址和虚拟机地址 windows主机中添加路由 #route -p add 172.17.0.0 mask 255.255.0.0 虚拟机地址 route -p add 172.1 ...