JS function 是函数也是对象, 浅谈原型链
JS function 是函数也是对象, 浅谈原型链
JS 唯一支持的继承方式是通过原型链继承, 理解好原型链非常重要, 我记录下我的理解
1. 前言
new 出来的实例有 _proto_ 属性, 并且指向其构造函数的 prototype 对象
function Person(){}
const person = new Person();
person.__proto__ === Person.prototype // true
所有 new 出来的实例有 _proto_ 属性, 所有函数有 prototype 属性
不要小看任何一个对象, 这个对象有可能是一个函数; 不要小看任何一个函数, 这个函数有可能也是一个对象
只要是对象, 一定就有相应的构造函数 ( 除了 Object 的原型对象找不到 )
2. 有趣的部分
- function 是函数, 但也是对象
- Object 是函数, 但也是对象
- 看一个对象是不是函数, 就看它有没有 prototype 属性, 像原型对象没有, 它就只是单纯的对象, 不是函数 ( 原型对象无原型 )
- Function 是函数, 也是对象, 并且它作为对象的 _proto_ 属性 等于 它作为函数的 prototype 属性, 这说明, 它 自己创建自己
3. 解释
以这个为例
function Person(){}
const person = new Person();
function 是函数, 但也是对象
- 是函数
Person.prototype // {constructor: ƒ ...} Person.prototype.constructor === Person // true
这说明 Person 是函数, 有原型, 原型的 constructor 指向自己
- 是对象
Person.__proto__ // ƒ () { [native code] } Person.__proto__ === Function.prototype //true
这说明 Person 是对象, 相当于
Person = new Function()
, 有没有那味了呢原型对象是单纯的对象, 不是函数
Person.prototype.prototype // undefined 不是函数, 无原型 Person.prototype.__proto__ // {constructor: ƒ...} Person.prototype.__proto__ === Object.prototype // true
原型对象无原型, 说明原型对象就只是一个对象, 是对象肯定就有构造函数, 其构造函数是 Object, 相当于
Person.prototype = new Object()
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()
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 是函数也是对象, 浅谈原型链的更多相关文章
- js function定义函数的4种方法
js function定义函数的4种方法 1.最基本的作为一个本本分分的函数声明使用. 复制代码代码如下: 复制代码代码如下: function func(){} 或 var func=functio ...
- JS对象继承与原型链
1.以复制方式实现的继承 1.1浅拷贝 基本类型的复制 var parent = { lanage: "chinese" } var child = { name: "x ...
- jsp内置对象浅谈
jsp内置对象浅谈 | 浏览:1184 | 更新:2013-12-11 16:01 JSP内置对象:我们在使用JSP进行页面编程时可以直接使用而不需自己创建的一些Web容器已为用户创建好的JSP内置对 ...
- JS核心系列:浅谈原型对象和原型链
在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...
- js中的函数,Date对象,Math对象和数组对象
函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- js 中对象--对象结构(原型链基础解析)
对于本篇对于如何自定义对象.和对象相关的属性操作不了解的话,可以查我对这两篇博客.了解这两篇可以更容易理解本篇文章 用构造函数创建了一个对象 obj对象的本身创建了两个属性 x=1 ,y=2 ...
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...
- 关于js的几道经典题(作用域、原型链等)自己做的
1. function test() { var a = 1; setTimeout(function() { alert(a); a = 3; }, 1000); a = 2; setTimeout ...
随机推荐
- vm虚拟机安装centos7。克隆镜像以及快照
为了方便下次安装配置,保存一篇安装centos的文章 https://blog.csdn.net/wsq119/article/details/80635558 步骤非常详细,一看就会. 这一篇是关于 ...
- python核心高级学习总结6------面向对象进阶之元类
元类引入 在多数语言中,类就是一组用来描述如何生成对象的代码段,在python中同样如此,但是在python中把类也称为类对象,是的,你没听错,在这里你只要使用class关键字定义了类,其解释器在执行 ...
- CSS聚光灯文字(无图片)
Welcome to my admin site! h1 { font-size: 70px; color: rgba(255, 255, 255, 1); padding: 0; margin: 0 ...
- PyQt学习随笔:Model/View中TableView视图数据项编辑结果及视图数据项的访问
按照<PyQt学习随笔:Model/View中设置视图数据项可编辑的方法>的方法支持视图数据可编辑后,编辑后的数据无需主动保存,PyQt会自动将界面变更的数据保存到对应的Model存储中, ...
- PyQt(Python+Qt)学习随笔:Qt Designer中Action关联menu菜单和toolBar的方法
1.Action关联菜单 通过菜单创建的Action,已经与菜单自动关联,如果是单独创建的Action,需要与菜单挂接时,直接将Action Editor中定义好的Action对象拖拽到菜单栏上即可以 ...
- 科大讯飞语音合成系统 V5.0绿色便携版
中文名: 中科大讯飞Interphonic 5.0语音合成系统英文名: Interphonic 5.0版本: 5.0发行时间: 2006年制作发行: 中科大讯飞语言: 简体中文系统简介InterPho ...
- JQuery获取父,子,兄弟节点
jQuery.parent(expr) // 查找父节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...
- 老男孩培训作业day1
作业一:博客(开通博客园) 作业二:编写登录接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 作业三:多级菜单 三级菜单 可依次选择进入各子菜单 所需新知识点:列表.字典(列表和字典的相互 ...
- 如何实现OSM地图本地发布并自定义配图
目录 1.缘起 2.准备环境 2.1.安装linux系统 2.2.安装docker 2.3.安装Docker Compose 2.4.安装git 3.发布地图 3.1.拉取代码 3.2.测试网络 3. ...
- ASP自动刷新页面的实现方法总结
1) <meta http-equiv="refresh" content="10"> 10表示间隔10秒刷新一次 2) <script> ...