我去!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. Django项目:CRM(客户关系管理系统)--02--01PerfectCRM基本配置ADMIN02

    三.CRM项目表结构设计 from django.db import models # Create your models here. """ #运行 Terminal ...

  2. web前端学习(四)JavaScript学习笔记部分(4)-- JavaScriptDOM对象

    1.Javascript-DOM简介 1.1.HTML DOM 1.2.DOM操作HTML 1.2.1.JavaScript能够改变页面中的所有HTML元素 1.2.2.JavaScript能够改变页 ...

  3. 各大ACM OJ网址

    做快乐的程序员 以你的条件,你不必追求优秀,但你可以做到良好. 各大OJ网址 ACM OJ Collection(排名不分先后): 中国:(China) 华东地区: 浙江: 杭州电子科技大学(HDU) ...

  4. Loadrunner常用分析点

    Loadrunner常用的分析点 一.在Vuser(虚拟用户状态)中 1.Running Vusers:提供了生产负载的虚拟用户运行状态的相关信息,可以帮助我们了解负载生成的结果.(即用户在几分钟左右 ...

  5. 【如花美眷】初探weex

    我想我更喜欢weex的原因,应该是weex可以直接运行在浏览器中,而不是像react-native需要运行在模拟设备中. 我想这个原因足以让我使用vue而不是RN. 初探就是稍微运行一下,来看步骤 可 ...

  6. Spring_通过Bean的Factory配置Bean

    package com.tanlei.bean.FactoryBean; import org.springframework.beans.factory.FactoryBean; public cl ...

  7. Directx11教程(19) 画一个简单的地形

    原文:Directx11教程(19) 画一个简单的地形       通常我们在xz平面定义一个二维的网格,然后y的值根据一定的函数计算得到,比如正弦.余弦函数的组合等等,可以得到一个看似不错的地形或者 ...

  8. 开启远程XUL

    参考:https://developer.mozilla.org/zh-cn/Remote_XUL firefox自4.0起(2011年4月版本,目前最新版为13.0),开始禁用远程XUL,这阻碍了初 ...

  9. Symmetric Tree 深度优先搜索

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  10. Oracle 11g Pivot函数实现行转列

    先上语法规范: SELECT .... FROM <table-expr> PIVOT ( aggregate-function(<column>) FOR <pivot ...