类与对象的原理

news2024/11/8 14:40:38

前言    

        在JavaScript中,类的实现是基于原型继承机制的。

        JavaScript中的类的一个重要特性是“动态可继承”。

类与原型

        在JavaScript中,类的所有实例对象都从同一个原型对象上继承属性,因此原型对象是类的核心。

        所有的类都有一个共同的根类/父类Object,所有类的实例对象都可以从Object.prototype原型上继承方法或属性,比如我们常用的toString()方法,就是Object原型上的方法。

构造函数

        构造函数声明时,使用这样的格式:

        function Name(形参1,形参2....){

                属性1;

                属性2;....

                方法1;

                方法2;

        }的格式,函数的首写字母大写。

        使用关键字new来调用构造函数会自动创建一个新的对象,构造函数的prototype属性被用作对象的原型。

Constructor属性

      每个JavaScript函数都可以用作构造函数,因为每个函数都自动拥有一个prototype属性,这个属性的值是一个对象,这个对象包含唯一一个不可枚举的属性constructor,construct属性的值是一个函数对象。

var F = function(){}
var p = F.prototype;        //F相关联的原型对象
var c = p.constructor();    //原型相关联的函数

c === F                     // =>true

        对于任意函数F.prototype.constructor == F

        构造函数是类的“公共标识”,对象通常继承的constructor均指代它的构造函数,这个constructor属性为对象提供了类。

类的标识

        构造函数不能作为类的标识,因为两个构造函数的prototype属性可能指向同一个原型,此时这两个构造函数创建的实例属于同一个类。

        原型对象是类的唯一标识:当且仅当两个对象继承自同一个原型对象时,它们才是属于同一个类的实例。

类与对象的创建

        以下是三种方式创建的对象:

//最原始简单的创建对象
function simpleInit() {
  var cuptwo = {
    name:"杯子二",
    color:"white",
    material:"mood",
    showColor:function() {
      console.log("%s 的颜色为:%s", this.name, this.color);
    }
  }
  return cuptwo;
}

//使用最原始的方式简单的创建对象
function simpleClick(){
  let cuptwo = simpleInit();
  cuptwo.showColor();
  console.log(cuptwo);
}

  下面为打印的cuptwo的结果:

    

下面是通过构造函数的方式实例化一个对象:

// 使用构造函数的方式创建类
function Cup(name, color, material) {
  this.name = name
  this.color = color;
  this.material = material;   //材质
  this.showColor = function () {
    console.log("%s 的颜色为:%s", this.name, this.color);
  }
  this.showMerial = function () {
    console.log("%s 的材质为:%s", this.name, this.material);
  }
}

// 使用new通过构造函数的方式实例化一个对象
function constructClick() {
  let cupone =new Cup("杯子一", "yellow", "glass");
  cupone.showColor();
  cupone.showMerial();
  console.log("cupone is: ", cupone);
  console.log(cupone);
  console.log("Cup prototype is:");
  console.log(Cup.prototype);
}

 

在上图中我们可以看到Cup类的原型链中的每一级 。

使用class的方式创建类与对象,代码如下:

// class的方式创建类
class CupA{
  constructor(name, color, material){
    //外部传入可设置的属性
    this.name = name;
    this.color = color;
    this.material = material;

    //内部自己使用的属性
    this.height = 70;
    this.use = "茶";
  }
  showCup() {
    console.log("%s 的颜色为:%s", this.name, this.color);
    console.log("%s 的材质为:%s", this.name, this.material);
    console.log("%s 的高度:%d, 用途:%s", this.height, this.use);
  }
}

//使用class的方式实例化一个对象
function classClick() {
  let cupthree = new CupA("杯子三", "transparent", " steel");
  cupthree.showCup();
  console.log("cupone is:");
  console.log(cupthree);
  console.log("Cup prototype is:");
  console.log(CupA.prototype);
}

上图为CupA类的原型prototype的打印结果 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/185543.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关系数据库——关系操作和关系完整性

文章目录一、关系操作1.基本的关系操作2.关系数据语言的分类关系代数语言关系演算语言具有关系代数和关系演算双重特点的语言二、关系的完整性1.实体完整性(Entity Integrity)实体完整性规则2.参照完整性(Referential Integrity)参照完整性规则引用关系3.用户定义的完整性(User…

WebRTC 的连接过程

经过前面几部分的铺垫,你应该对P2P音视频互动的过程有了一个大概的了解,有可能你会觉得过程比较繁琐,甚至涉及到了网络底层。但是,不要担心,WebRTC已经帮我们做了很多的事情,让我们在音视频开发时变得轻而易…

【Spring源码】22. 属性填充populateBean()详解

进入populateBean()对bean的属性进行填充,将各个属性值注入(存在其他bean的属性,则会递归初始化依赖的bean)一开始会先对传入的参数进行判断(如下图红框框中的逻辑)如果传入的BeanWrapper和RootBeanDefinit…

SpringBoot3+最新MybatisPlus+Mysql与TDengine双数据源

前言 昨天写的ideaApifox uploader插件apifox新年第一天上班就上榜了,真是不错。今天来补一篇,本来应该是在前一篇之前发的。实际上就是最新的springBoot集成最新的mybatisPlus,加双数据源:mysql、TDengine,一个关系型…

kvm虚拟机克隆

kvm虚拟机克隆链接克隆和完整克隆的区别完整克隆自动克隆手动克隆的步骤1.复制模板vm磁盘为新vm的磁盘2.复制模板vm配置文件为新vm的配置文件3.修改新vm配置文件中的信息为新vm的信息4.导入新vm的配置文件5.启动新vm链接克隆1.生成链接克隆虚拟机磁盘文件2.后续流程与手动克隆一…

【算法练习】链表中环的入口结点

题源&#xff1a;牛客描述给一个长度为n链表&#xff0c;若其中包含环&#xff0c;请找出该链表的环的入口结点&#xff0c;否则&#xff0c;返回null。数据范围&#xff1a;n≤10000&#xff0c;1<结点值<10000要求&#xff1a;空间复杂度 O(1)&#xff0c;时间复杂度O(…

1、数据库概述

文章目录1 为什么要使用数据库2 数据库与数据库管理系统2.1 数据库的相关概念2.2 数据库与数据库管理系统的关系2.3 常见的数据库管理系统排名(DBMS)2.4 常见的数据库介绍3 MySQL介绍3.1 概述3.2 MySQL发展史重大事件3.3 关于MySQL 8.03.4 为什么选择MySQL3.5 Oracle vs MySQL4…

学成在线项目开发技巧整理---第二部分

1.静态资源处理通常项目会采用动静分离架构,利用Nginx作为静态资源服务器,存放所有静态资源:#访问动态资源时,将请求负载均衡到多个服务器实例或者多个网关实例 upstream webservice{server 192.168.200.146:8080; }server {listen 80;server_name localhost;#动态资源l…

C++基础知识点整理笔记(一)

一直想尝试自己动手构建一个简单的深度学习训练框架&#xff0c;包括数据读取与处理、PS、NN前后向传播、模型save和load、不同训练方式&#xff08;offline/online .etc&#xff09;、指标监控、模型部署等部分, 去深入研究内部深度学习训练框架及horovod、byteps、pslite、te…

深刻理解状态机设计需要避免的冒险;时序电路可能存在essential hazard;处理单元里的control和datapath;竞争冒险【SV】【VLSI】

深刻理解状态机设计需要避免的冒险&#xff1b;时序电路可能存在essential hazard&#xff1b;处理单元里的control和datapath&#xff1b;竞争冒险【SV】【VLSI】0. 前言&#xff1a;时序电路可能存在essential hazard1. 理解control和datapath1.1 Datapath control2. 硬件电路…

MFC|创建一个对话框及窗体各个属性介绍

参考&#xff1a; VS2015 建立一个C的MFC简易窗体程序项目&#xff08;https://www.cnblogs.com/xingboy/p/11059721.html&#xff09; 对话框中各项属性介绍&#xff08;https://blog.csdn.net/u012350993/article/details/26093051&#xff09; MFC窗口风格 WS_style/WS_EX_s…

【Hadoop】YARN简述

文章目录1. YARN总述2. YARN调度器2.1 FIFO Scheduler2.2 Capacity Scheduler2.3 Fair Scheduler1. YARN总述 YARN是Hadoop资源管理器&#xff0c;它是一个通用资源管理系统&#xff0c;可为上层应用提供统一的资源管理和调度&#xff0c;它的引入为集群在利用率、资源统一管理…

关于栈和队列

目录栈&#xff08;Stack&#xff09;什么是栈栈的使用栈的模拟实现队列&#xff08;Queue&#xff09;什么是队列队列的使用队列的模拟实现循环队列双端队列 (Deque)栈&#xff08;Stack&#xff09; 什么是栈 栈是一种特殊的线性表&#xff0c;它只允许在固定的一端进行插入…

JavaScriptArray和String对象~

初识Array&#xff1a; 定义&#xff1a; 方式1 var 变量名new Array(元素列表);举例&#xff1a; <script>var arraynew Array(1,2,3);alert(array); </script>显示如下&#xff1a; 方式2 var 变量名[元素列表];举例&#xff1a; <script>var array[…

App Inspector使用 (macaca移动端元素检查器)

App Inspector安装说明&#xff1a;https://macacajs.github.io/app-inspector/zh/guide/install.html#%E7%8E%AF%E5%A2%83%E9%9C%80%E8%A6%81 依赖安装说明&#xff1a; 1、node环境&#xff1a;这里安装的时候和初始化的时候报错使用了两个版本&#xff0c;所以这里使用nvm…

Python-模块、包和发布模块

1.模块1.1模块的概念模块是python程序架构的一个核心概念每一个以扩展名.py结尾的python源代码文件都是一个模块模块名同样也是一个标识符&#xff0c;需要符合标识符的命名规则在模块中定义的全局变量、函数、类都是提供给外界直接使用的工具模块就好比工具包&#xff0c;要想…

世界坐标系->相机坐标系详细推导

基变换 理论部分 在n维的线性空间中&#xff0c;任意n个线性无关的向量都可以作为线性空间的基&#xff0c;即空间基不唯一。对于不同的基&#xff0c;同一个向量的坐标一般是不同的。因为在计算机图形学中&#xff0c;主要研究三维的空间&#xff0c;所以可以简化问题倒三维…

Hi3861鸿蒙物联网项目实战:智能测距仪

华清远见FS-Hi3861开发套件&#xff0c;支持HarmonyOS 3.0系统。开发板主控Hi3861芯片内置WiFi功能&#xff0c;开发板板载资源丰富&#xff0c;包括传感器、执行器、NFC、显示屏等&#xff0c;同时还配套丰富的拓展模块。开发板配套丰富的学习资料&#xff0c;包括全套开发教程…

真假流量卡区别,一篇文章教你怎么区分流量卡和物联卡!

真假流量卡区别&#xff0c;小编教你怎么区分流量卡和物联卡&#xff0c;近年来&#xff0c;市面上的流量卡种类繁多&#xff0c;其中不乏有一些虚假的、有套路的套餐&#xff0c;那么&#xff0c;我们如何辨别流量卡的正规性呢&#xff0c;接下来&#xff0c;跟着小编一块来了…

114.简单的动态切换app的图标,两种方式

第一种方式&#xff1a; 1.第一步 通过activity-alias别名实现&#xff0c;manifest 这里写的是一个默认的图标Default和一个需要切换的图标Test&#xff0c;以及一个默认的首页面HomeActivity&#xff1a; <!-- 默认的图标--> <activity-aliasandroid:name".ac…