javascript 对象的定义(JS中定义类的方式有很多种)

2023-11-11

javascript 对象的定义

2007-04-19 21:47:43 / 个人分类:JS

javascrīpt 对象的定义

JS中定义类的方式有很多种:
1、工厂方式
  
  function Car(){
   var ōcar = new Object;
   ocar.color = "blue";
   ocar.doors = 4;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  
  var car1 = Car();
  var car2 = Car();
  
  调用此函数时将创建新对象,并赋予它所有的属性和方法。使用此函数可以创建2个属性完全相同的对象。当然我妹可以通过给它传递参数来改版这种方式。
  
  function Car(color,door){
   var ōcar = new Object;
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  
  var car1 = Car("red",4);
  var car2 = Car("blue",4);
  car1.showColor()  //output:"red"
  car2.showColor()  //output:"blue"
  
  现在可以通过给函数传递不同的参数来得到具有不同值的对象。
  
  在前面的例子中,每次调用函数Car(),都要创建showcolor(),意味着每个对象都有一个自己的showcolor()方法。
  但是事实上,每个对象斗共享了同一个函数。
  
  虽然可以在函数外定义方法,然后通过将函数的属性指向该方法。
  
  function showColor(){
   alert(this.color);
  }
  
  function Car(){
   var ōcar = new Object();
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = showColor;
   return ocar;
  }
  
  但是这样看起来不像是函数的方法。

2、构造函数方式
  
  构造函数方式同工厂方式一样简单,如下所示:
  
  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.showColor = function(){
    alert(this.color)
   };
  }
  
  var car1 = new Car("red",4);
  var car2 = new Car("blue",4);
  
  可以看到构造函数方式在函数内部没有创建对象,是用this关键字。因为在调用构造函数时已经创建了对象,而在函数内部只能用this来访问对象属性。
  
  现在用new来创建对象,看起来像那么回事了!但是它同工厂方式一样。每次调用都会为对象创建自己的方法。
  
3、原型方式

  该方式利用了对象的prototype属性。首先用空函数创建类名,然后所有的属性和方法都被赋予prototype属性。
  
  function Car(){
  }
  
  Car.prototype.color = "red";
  Car.prototype.doors = 4;
  Car.prototype.showColor = function(){
   alert(this.color);
  }
  
  var car1 = new Car();
  var car2 = new Car();
  
  在这段代码中,首先定义了一个空函数,然后通过prototype属性来定义对象的属性。调用该函数时,原型的所有属性都会立即赋予要创建的对象,所有该函数的对象存放的都是指向showColor()的指针,语法上看起来都属于同一个对象。
  
  但是这个函数没有参数,不能通过传递参数来初始化属性,必须要在对象创建后才能改变属性的默认值。
  
  原型方式有个很严重的问题就是当属性指向的是对象时,如数组。
  
  function Car(){
  }
  
  Car.prototype.color = "red";
  Car.prototype.doors = 4;
  Car.prototype.arr = new Array("a","b");
  Car.prototype.showColor = function(){
   alert(this.color);
  }
  
  var car1 = new Car();
  var car2 = new Car();
  
  car1.arr.push("cc");
  
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb,cc
  
  这里由于数组的引用值,Car的两个对象指向的都是同一个数组,所以当在car1添加值后,在car2中也可以看到。
  
4、混合的构造函数/原型方式

  联合是用构造函数/原型方式就可以像其他程序设计语言一样创建对象,是用构造函数定义对象的非函数属性,用原型方式定义对象的方法。
  
  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
  }
  Car.prototype.showColor(){
   alert(this.color);
  }
  
  var car1 = new Car("red",4);
  var car2 = new Car("blue",4);
  
  car1.arr.push("cc");
  
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb
  
  
5、动态原型方式

  动态原型的方式同混合的构造函数/原型方式原理相似。唯一的区别就是赋予对象方法的位置。
  
  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
   
   if(typeof Car._initialized == "undefined"){
    Car.prototype.showColor = function(){
     alert(this.color);
    };
    Car._initialized = true;
   }
  }
  
  动态原型方式是使用一个标志来判断是否已经给原型赋予了方法。这样可以保证该方法只创建一次
  
6、混合工厂方式

  它的目的师创建假构造函数,只返回另一种对象的新实例。
  
  function Car(){
   var ōcar = new Object();
   ocar.color = "red";
   ocar.doors = 4;
   ocar.showColor = function(){
    alert(this.color)
   };
   return ocar;
  }
  
  与工厂方式所不同的是,这种方式使用new运算符。
  
  
  以上就是全部的创建对象方法。目前使用最广泛的就是混合构造函数/原型方式,此外,动态原型方式也很流行。在功能上与构造函数/原型方式等价。

 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javascript 对象的定义(JS中定义类的方式有很多种) 的相关文章

  • 如何阻止直接访问我的 JavaScript 文件?

    我使用 Minify 来缩小并缓存所有脚本请求 我只希望我的用户能够访问 JavaScript 文件的缩小版本 缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
  • Angular.js:如何从无序列表中获取 orderBy 或过滤器来工作?

    尝试根据价格和评级 在返回的对象中 进行排序 我宁愿用 ng click 和 li 来代替使用选择菜单 有没有办法做到这一点 我环顾四周 这是我能想到的最接近的 ul class restaurant filter li i class i
  • .push() 将多个对象放入 JavaScript 数组中返回“未定义”

    当我将项目添加到beats数组然后console log用户时 我得到了数组中正确的项目数 但是当我检查 length 时 我总是得到 1 尝试调用索引总是会给我 未定义 如下所示 Tom beats 1 我想我错过了一些明显的东西 但这让
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • 如何使用 Javascript 设置查询字符串

    有没有办法使用 javascript 设置查询字符串的值 我的页面有一个过滤器列表 单击该列表时 它将更改右侧的页内结果窗格 我正在尝试更新 url 的查询字符串值 因此如果用户离开页面 然后单击 后退 按钮 他们将返回到最后一个过滤器选择
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 比较数组中的文件、从文本文件中删除行、函数、日志记录

    所以我创建了这两个数组 Approved Shares 和 Current Shares Reads Approvedshare txt and makes the txt file into an array public objFSO
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • ML/DL-复习笔记【十】- 分组卷积和深度可分离卷积的区别

    本节为ML DL 复习笔记 十 分组卷积和深度可分离卷积的区别 主要内容包括 分组卷积与深度可分离卷积的参数量分析 最早出现分组卷积是AlexNet 由于单块GPU显存的限制 需要将网络部署在两张显卡上 分别进行训练最后再融合 Alex认为
  • 鸿蒙出来后H5足以取代原生app

    本地模式的H5渲染效果 其实已经在性能上无限接近于原生 也就是说当你使用file 而非http 访问H5页面的时候 打开速度也是非常快的 而且现在安卓和ios里面 提供了js访问原生代码的能力 目前有很多H5开发框架 集成了访问原生的能力
  • 在线标签云词云

    易词云 https www yciyun com 优点 可显示中文词条 可下载 缺点 字体大小控制不精准 下载高清图像要收费 wordart https wordart com 优点 免费 功能强大 缺点 不可以显示中文 可能需要添加中文字
  • 凌晨睡不着,想起了童年,写首诗吧,就叫《童年》

    雪夜里轻快又谨慎的踩雪声 印出稚嫩的脚印 一个胆大又怯懦的孩童 把手电筒插在帽兜里当做矿灯照明 微声哼着只有自己能听到的歌 沧桑的锁有节奏地拍打着大门 发出心里人的归家之念 炕上坐着的妇女 闻声而来 夏日晌午的小孩 在庭院里逗着毛虫 趁着无
  • SOTA模型训练笔记(完善中)

    文章目录 记录感知SOTA模型训练的过程 1 语义分割 1 PolarNet 2 Cylinder3D 2 视觉人体姿态识别 1 ViTPose 3 点云目标检测 1 centerpoint 记录感知SOTA模型训练的过程 1 语义分割 1
  • windows 使用docker安装elasticsearch报错

  • 使用ensp搭建简单校园网拓扑

    使用ensp搭建简单校园网拓扑 一 校园网拓扑 1 每台电脑代表一个vlan 2 二层交换机向下的每个端口需要做access 向上的每个端口需要做trunk 3 三层交换机向下的每个端口需要做trunk 而且需要为每个vlan接口配置ip地
  • Intellij IDEA2017.3.5安装

    1 下载安装包及 链接 https pan baidu com s 16az6tmQub bOn2CFOXLa2g 提取码 7689 复制这段内容后打开百度网盘手机App 操作更方便哦 2 将下载的JetbrainsCrack 2 7 re
  • js中(...)用法

    1 深拷贝一个对象 如上图所示 obj和tmp是完全两个独立的对象 互不影响 2 数组复制 3 函数形参中的使用 这里的 args 是对test函数中多余的参数进行收集 并转换成数组的形式进入函数体中 4 一种特殊情况 当数组里面套对象的时
  • sql 时间函数(全)

    Cite http www jb51 net article 20832 htm 1 当前系统日期 时间 select getdate 2 dateadd 在向指定日期加上一段时间的基础上 返回新的 datetime 值 例如 向日期加上2
  • C++结构体对齐问题

    规则1 结构体成员的内部偏移量 内部地址 要被这个成员的数据类型大小整除 规则2 整个结构体的大小 必须是最大成员的size整数倍 否则就需要在末尾补充空白字节 规则3 对于结构体中的结构体 按照结构体展开之后的内存对齐来处理 规则4 人为
  • 余老师带你学习大数据框架全栈第十三章Hudi第一节核心技术

    1 前言 1 1为什么产生数据湖 数据量比较大 越来越不满足处理结构化的数据 比如说数仓 数仓就是处理结构化数据 什么是结构化数据 就是数据成数据库来的 传统型的数据库有 MySQL数据库 Oracle SQLserver 从这些库里面过来
  • TensorFlow基础(1)-中使用多个 Graph

    代码中有时候会遇到 with tf Graph as default 其实这个可以有也可以没有 可能是可以让自己的思路更加清楚吧 知道这里开始新建图了 tensorflow官方教程 翻译 简介 当我们训练一个模型时 通常的做法是用一个 Gr
  • 公开课机器学习笔记(13)支持向量机三 核函数

    2 2 核函数Kernel 2 2 1 特征空间的隐式映射 核函数 咱们首先给出核函数的来头 在上文中 我们已经了解到了SVM处理线性可分的情况 而对于非线性的情况 SVM 的处理方法是选择一个核函数 通过将数据映射到高维空间 来解决在原始
  • DCL详解

    一 什么是DCL问题 在Java中 DCL通常指的是Double Checked Locking 双重检查锁定 DCL是一种用于多线程环境下懒加载单例对象的技术 它的基本思路是在对象还未被实例化时 先通过一次判空 避免了每次获取对象时都需要
  • JavaScript 数组find() 方法

    定义和用法 find 方法返回通过测试 函数内判断 的数组的第一个元素的值 find 方法为数组中的每个元素都调用一次函数执行 当数组中的元素在测试条件时返回 true 时 find 返回符合条件的元素 之后的值不会再调用执行函数 如果没有
  • C++指针的用法/指针与引用的区别

    指针的简介 计算机程序本质上是对存储在内存中的数据进行的一系列操作 既然要对数据进行操作 首先要解决的第一个问题就是数据存储在什么地方 一般情况下我们通过int x 10 来定义一个变量 可以通过x来直接访问该变量存储的值 而指针提供了另外
  • 启动和关闭ADB服务(adb start-server和adb kill-server)

    经作者测试 模拟器在运行一段时间后 adb服务有可能 在Windows进程中可找到这个服务 该服务用来为模拟器或通过USB数据线连接的真机服务 会出现异常 这时需要重新对adb服务关闭和重启 当然 重启Eclipse可能会解决问题 但那比较
  • C语言

    1024G 嵌入式资源大放送 包括但不限于C C 单片机 Linux等 关注微信公众号 嵌入式大杂烩 回复1024 即可免费获取 函数指针有两种常用的用法 一种是作为结构体成员 关于函数指针作为结构体成员的用法可移步至上一篇 C语言笔记 函
  • javascript 对象的定义(JS中定义类的方式有很多种)

    javascript 对象的定义 2007 04 19 21 47 43 个人分类 JS javascr pt 对象的定义 JS中定义类的方式有很多种 1 工厂方式 function Car var car new Object ocar