我去!JS的原型是咋回事?

最近写公司的项目,写着写着发现自己的原型的理解还是不够透彻,又去网上查了一番资料,顺便总结一下,在顺便给到的朋友能提供一点帮助。如有遗漏,欢迎交流。

  • 原型是啥?为什么要用原型?

原型就是 prototype 这个对象,在Js里 函数会存在这个对象,实例对象是木有的,比如a数组就木有 看图:

那为什么只有函数会有prototype呢?个人理解,有错勿喷

在JS里只有创建函数的时候,会自动添加一个prototype属性,函数是一个构造器,如果你去new 一个 实例对象的话。会报错 如图:

也就是说当你创建函数时,JS会为这个函数自动添加prototype属性,值是一个有 constructor 属性的对象,不是空对象。而一旦你把这个函数当作构造函数(constructor)调用(即通过new关键字调用),那么JS就会帮你创建该构造函数的实例,实例继承构造函数prototype的所有属性和方法(实例通过设置自己的__proto__指向承构造函数的prototype来实现这种继承)。

所以原型的作用就是用来继承的。

  • Funtion 和 Object的关系

函数在JS里是一等公民,最牛逼的那个。模拟的class类 就是通过构造函数来实现的,但函数也是一个对象,而Object其实也是一个构造函数。如图:

这是为什么呢?

Function.__proto__ // 一个构造函数
Object._proto_ 也是一个函数
但是 Function.__proto__.__proto__ 指向了object原型 所以instanceof 都是true

Function 的隐士原型指向了Object 从而继承了 object的一些方法 也是对象的一个实例而已,但是object的构造函数 function Object 的隐士原型 又指向了函数的prototype 形成一个闭环。所以 函数也是对象,而对象又依赖于函数

我去!JS的原型是咋回事?的更多相关文章

  1. 前端基本知识(二):JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  2. js javascript 原型链详解

    看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...

  3. 关于JS对象原型prototype与继承,ES6的class和extends · kesheng's personal blog

    传统方式:通过function关键字来定义一个对象类型 1234567891011 function People(name) { this.name = name}People.prototype. ...

  4. js的原型

    在讲js的原型之前,必须先了解下Object和Function. Object和Function都作为JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是 ...

  5. 攻略前端面试官(三):JS的原型和原型链

    本文在个人主页同步更新~ 背就完事了 介绍:一些知识点相关的面试题和答案 使用姿势:看答案前先尝试回答,看完后把答案收起来检验成果~ 面试官:什么是构造函数 答:构造函数的本质是一个普通函数,他的特点 ...

  6. 怎么理解js的原型链继承?

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  7. js基础-原型

    1.定义:我们创建的函数都有一个prototype(原型)属性,该属性是一个对象,          原型模式声明中多了两个属性(自动生成). 构造函数:       function Box(nam ...

  8. 基础1:JS的原型和原型链究竟

    JS的原型和原型链究竟是什么? 1. 从JS创建一个对象开始说起: 1.1 工厂模式创建对象 (缺点是无法知道创建出来的对象是一个什么类型的对象) function createPerson(name ...

  9. 总结一下js的原型和原型链

    最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...

随机推荐

  1. 『StabilityGuide』| 10+位阿里技术专家共同发起稳定性知识库开源项目

    我们穿过山和大海,也见过人山人海.我们见过各类故障,也排过千雷万险.这一次,不如我们一起,开启稳定性的探索之旅.让无法解决的问题少一点点,让世界的确定性多一点点. 无论是前端业务的开发者,还是后端架构 ...

  2. 【python之路14】发送邮件实例

    1.发邮件的代码 from email.mime.text import MIMEText from email.utils import formataddr import smtplib msg ...

  3. 磁力搜索嗅探器装成BT

    磁力搜索嗅探器装成BT ague-dht ague-dht 是一个磁力链接嗅探器,它伪装成BT下载客服端,加入DHT网络,嗅探磁力链接.每秒发送1000条请求时,平均3秒收到1次带有infohash的 ...

  4. 用Python的pandas框架操作Excel文件中的数据教程

    用Python的pandas框架操作Excel文件中的数据教程 本文的目的,是向您展示如何使用pandas 来执行一些常见的Excel任务.有些例子比较琐碎,但我觉得展示这些简单的东西与那些你可以在其 ...

  5. 批量删除maven lastUpdated

    批量删除lastUpdated for /r %i in (*.lastUpdated) do del %i 安装jar到本地仓库 mvn install:install-file -Dfile=D: ...

  6. 手把手0基础项目实战(一)——教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)...

    原文:手把手0基础项目实战(一)--教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)... 本文你将学到什么? 本文将以原理+实战的方式,首先对& ...

  7. Kafka 集群安装

    Kafka 集群安装 环境: Linux 7.X kafka_2.x 在linux操作系统中,kafka安装在 /u04/app目录中 1. 下载 # wget https://mirrors.cnn ...

  8. tomcat 端口占用问题解决

    在dos下,输入  netstat   -ano|findstr  8080 //说明:查看占用8080端口的进程 显示占用端口的进程 taskkill  /pid  6856  /f //说明,运行 ...

  9. Rol租车网项目总结

    现在自行车的租聘如此火爆,我们是否需要加入这个浩浩荡荡的行列? 相比起现在ofo共享单车,摩拜单车.而我们的竞争力在何处? 如何能让我们的项目脱颖而出? 而我们的Rol租车网为什么要叫Rol呢? Ri ...

  10. ELK之java虚拟机安装1

    建议:直接按照默认路径,下面有一个路径我有点小改动 java最新版本1.12 从官网上下载oracle官网上的jdk 1.双击这个jdk.exe 2.点击"是" 3.点击下图的&q ...