如何理解javascript的对象?

WEB前端开发社区 2021-07-23

1.1 什么是对象?

对象是事物,在现实世界中,一个球,一张桌子,一辆汽车都是对象。

对象就是具有可描述特征的事物,我们可以用某种特定的方式去影响和操作它。

在JS中或者说在面向对象的编程语言中,对象是一系列属性和方法的组合。

一个属性包含属性名和属性值,这个值可以是任意类型的数据,也可以是个函数,这种情况下函数也被称为方法。

而在JS中,你遇到的所有东西几乎都是对象,那么我们来了解一下对象的细节。

1.2 对象的特征?

对象有属性,也就是对象的特征,可以通过点符号来访问一个对象的属性。

objectName.propertyName;

如果把对象比作现实中的一个球,那这个球就是一个对象,拥有属性,有颜色有大小。这些可以这样表示:

var ball = new Object();ball.color = “red";ball.size = 12;

对象还有方法,方法用于定义对象的行为方式。

比如这个球可能有滚动的方法可以计算能滚多远,有弹跳的方法可以计算跳多高。

可以这样表示:

ball.roll = function() {return this.size * laps}

1.3 访问对象的属性

前面讲过我们可以通过点符号来访问对象的属性,但如果是这样的情况,还能通过点符号访问对象的属性吗:

var ball = new Object();ball.color = “red";ball.size = 12;var spec = “color”;ball.spec ??

这里假设有一个变量spec,我们需要通过这个变量spec来访问对象属性。

但如果用点符号将会访问ball的spec属性然后返回一个undefined,说明这里直接将spec当做了一个属性而不是变量。

如果我们想要获得变量的值,来作为对象的属性那应该怎么做呢?

可以使用方括号标记访问,这个标记法在属性名称那里是动态判定的,这样就可以通过存储在变量中的字符串来访问属性了:

ball[spec]; // red

1.4 枚举对象的属性

另外我们可以通过for in循环语句来枚举对象的所有属性:

var ball = {color: “red”, size: 12, border: 2};for (var prop in ball) {console.log(“ball.” + prop + “=“ + obj[prop]);}// ball.color = red// ball.size = 12// ball.border = 2// 如果希望继承的属性不显示,那么可以用hasOwnProperty函数来过滤一遍var bar = {a: 1, b: 2, c: 3};function Foo() {this.color = 'red';}Foo.prototype = bar;var obj = new Foo();for (var prop in obj) {if (obj.hasOwnProperty(prop)) {console.log(prop);}}

也可以通过Object.keys(obj)的方法来返回一个属性名集合的数组:

var obj = {a: “123”, b: “das”, c: “web”};console.log(Object.keys(obj)); // [“a”,”b”,”c”];var arr = [“a”, “b”, “c”];console.log(Object.keys(arr)); // [“0”,”1”,”2”];
声明:
本文于网络整理,版权归原作者所有,如来源信息有误或侵犯权益,请联系我们删除或授权事宜。
(0)

相关推荐

  • es6新增新特性简要总结

    es6简介 es6是在2015年6月正式颁布的新标准,es6基本上实现了所有ECMAScript 规范,以后每年的6月都会发布新版本,但改动不大. let 变量 使用let 关键字来申明的变量拥有以下 ...

  • JavaScript 基础四

    遍历对象的属性 for...in 语句用于对数组或者对象的属性进行循环操作. for (变量 in 对象名字) { 在此执行代码 } 这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或则 k ...

  • 遍历数组,对象和JSON

    遍历数组 var arr2 = [3,4,5,6,7,8]; //第一种方法 for(var i =0;i<arr.length;i++){ console.log(arr2[i]); } // ...

  • 深入理解JavaScript面向对象的程序设计(一)——对象的创建

    JavaScript面向对象的程序设计(一)--对象的创建 目录 JavaScript面向对象的程序设计(一)--对象的创建 5.1 三个属性(三个指针) 5.2 理解原型对象 5.3 读取对象的属性 ...

  • 朗读,《同理心》,理解沟通的对象,你就成功了一半

    朗读,《同理心》,理解沟通的对象,你就成功了一半

  • JavaScript删除对象的某个属性的方法

    WEB前端开发社区 5天前 1.delete  delete是删除对象的属性没有任何剩菜,剩下的唯一真正的方法,但它的工作比其"替代"设置慢100倍 object[key] = u ...

  • JavaScript Promise 对象 | 菜鸟教程

    ECMAscript 6 原生提供了 Promise 对象. Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息. Promise 对象有以下两个特点: 1.对象的状态不受外界影响. ...

  • 深入理解JVM(三) -- 对象的内存布局和访问定位

    一 对象的内存布局: 在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域:对象头(Header),实例数据(Instance Data)和对齐填充(Padding). HotSpot的对 ...

  • 深入理解JavaScript作用域和作用域链

    目录 前言 作用域(Scope) 1.什么是作用域 2.全局作用域和函数作用域 3.块级作用域 作用域链 1.什么是自由变量 2.什么是作用域链 3.关于自由变量的取值 作用域与执行上下文 解释阶段: ...

  • JavaScript入门-对象(二)

    JavaScript对象(二) 本篇,主要讲了面向对象.this的指向问题,模拟继承过程 面向对象编程 什么面向对象编程? 编程,编程就是人们用计算机能懂的语言,告诉计算机自己想做的事情. 面向对象的 ...

  • 前端教程:Javascript Boolean对象

    Boolean对象表示两个值:"true"或"false". Syntax: 创建一个boolean对象: var val = new Boolean(valu ...

  • javascript 数组 对象的一些方法记录

    记录一下常用的数组和对象的一些方法 数组 push() 数组后添加元素 // 作用:把一个元素或多个元素,从数组后面添加到数组里面: // 参数:添加的数据 // 返回:添加后的数组的长度: let ...