JavaScript中的Objects

2024-05-27 05:18
文章标签 java script objects

本文主要是介绍JavaScript中的Objects，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JavaScript中的Objects

在JavaScript中，创建Objects有两种方式，declarative (literal) form和 constructed form。

首先，声明式如下：

var myObj = {key: value// ...
};

构造式如下：

var myObj = new Object();
myObj.key = value;

声明式与构造式创建的对象完全相同，只不过构造式的需要一个个地添加添加属性，一般情况下我们都是采用声明式的创建对象。

JavaScript中的原始类型

JavaScrip中有六种原始类型：

  • string
  • number
  • boolean
  • null
  • undefined
  • object

他们并不属于对象类型，值得注意的是，null有时候被认为是对象类型，主要原因是typeof null的返回值为object（该语言的bug），实际上，null属于原始类型。

还有一种误解

everything in JavaScript is an object

显然这也是错误的。

对象类型中还有一些对象类型的子类型的（ object sub-types），function是其子类型（专业术语称之为callable object），在JavaScript被认作是第一等的（first class），相比一般对象，function具有调用属性（callable behavior），还有一种对象类型的子类型为数组（Arrays ），相比一般对象，其内容更结构化。

JavaScript中还有一些内置对象的子类型，我们称之为内置对象（built-in objects），有如下几种：

  • String
  • Number
  • Boolean
  • Object
  • Function
  • Array
  • Date
  • RegExp
  • Error

这些内置对象表现出来的特性甚至与Java中的class的特性一致，实际上，它们都是内置函数（built-in functions），这些内置函数都被用作构造器（constructor ），关于JavaScript 中的构造器，

传统的面向对象的语言中，构造器属于class的特殊方法，当我们使用new实例化一个类时，其构造器被调用，JavaScript 中的构造器与此很不同，JavaScript 中的构造器只是一般的函数（functions ），其恰好在函数前面使用了new操作符，它们与class无关，也不是用来实例化一个类，它们只是一个很普通的函数，只不过被new操作符 控制 调用了而已，它们不是constructor functions，只是construction calls of functions而已。

var strPrimitive = "I am a string";
typeof strPrimitive;                            // "string"
strPrimitive instanceof String;                 // falsevar strObject = new String( "I am a string" );
typeof strObject;                               // "object"
strObject instanceof String;                    // true// inspect the object sub-type
Object.prototype.toString.call( strObject );    // [object String]

strPrimitive属于原始类型，strObject 属于对象类型，当我们如果要检查strPrimitive的长度，获取其内容时，我们需要String类型的对象类完成操作。

幸运的是，当我们将原始类型的string转化（coerces ）为对象类型的String时，这些操作都被自动完成了，因此，一般来说，我们并不需要创建对象类型的变量，只需创建其对应的原始类型的变量即可，在需要时，JavaScript会自动帮我们转化为对应的对象类型。

var strPrimitive = "I am a string";console.log( strPrimitive.length );         // 13console.log( strPrimitive.charAt( 3 ) );    // "m"

null 和undefined没有相应的对象类型，Date 类型没有对应的原始类型，Object, Array, Function, 和RegExp，无论我们使用literal还是使用constructor方式构建，其均为对象类型。

Error对象我们一般很少创建，其都是在出现异常时自动创建。

一般来说，对象中的内容不一定存储在对象内部，其主要依赖于浏览器的实现，很多情况下，他们并不存储在对象容器中，真正存储在对象中的是对象的属性名，他们主要用来作为引用指向他们对应的值的地方。

var myObject = {a: 2
};myObject.a;     // 2myObject["a"];  // 2

使用 . 操作符的其名称与使用[""]的区别是后者可以使用UTF-8/unicode兼容的属性名，如[“Super-Fun!”]，而前者则不可以通过. 操作符获得对应的属性值。

对象的属性名都是string类型，我们可以通过变量的值来作为指向对象属性值的地址：

var wantA = true;
var myObject = {a: 2
};var idx;if (wantA) {idx = "a";
}// laterconsole.log( myObject[idx] ); // 2

由于对象的属性名都是sting类型，如果不是string类型，JavaScript首先将其转化为string类型，我们在使用时要注意这一点：

var myObject = { };myObject[true] = "foo";
myObject[3] = "bar";
myObject[myObject] = "baz";myObject["true"];               // "foo"
myObject["3"];                  // "bar"
myObject["[object Object]"];    // "baz"

ES6中我们可以使用myObject[..]这种语法来计算出对象的属性名：

var prefix = "foo";var myObject = {[prefix + "bar"]: "hello",[prefix + "baz"]: "world"
};myObject["foobar"]; // hello
myObject["foobaz"]; // world

这种计算对象属性名主要是用在Symbol（new primitive data type which has an opaque unguessable value， technically a string value）上，对象中的函数同样也是不属于对象本身，其获取与属性的获取没有什么不同。

对于数组，我们需要注意的是，当我们向数组中添加属性时，如果该属性是数字类型的话，那么将作为数组的元素添加到数组中，而不是像一般的属性添加到数组对象中去：

var myArray = [ "foo", 42, "bar" ];myArray["3"] = "baz";myArray["a"]="a";myArray.length; // 4myArray[3];     // "baz"myArray.a;      //"a"

对象的Writable，Configurable，Enumerable等属性

ES5中，对象的属性可以通过 property descriptor来进行描述:

var myObject = {a: 2
};Object.getOwnPropertyDescriptor( myObject, "a" );
// {
//    value: 2,
//    writable: true,
//    enumerable: true,
//    configurable: true
// }

对象的属性有三个特征：writable, enumerable, 和configurable，他们的默认值如上例所示。我们可以Object.defineProperty(..)来为对象新添加一个属性，或者修改对象属性（如果是configurable的）：

var myObject = {};Object.defineProperty( myObject, "a", {value: 2,writable: true,configurable: true,enumerable: true
} );myObject.a; // 2

当writable=false，相当于其对象没有setter方法：

var myObject = {};Object.defineProperty( myObject, "a", {value: 2,writable: false, // not writable!configurable: true,enumerable: true
} );myObject.a = 3;myObject.a; // 2

如果在strict mode下，则会报错：

"use strict";var myObject = {};Object.defineProperty( myObject, "a", {value: 2,writable: false, // not writable!configurable: true,enumerable: true
} );myObject.a = 3; // TypeError

configurable=false是单向操作，不可逆：

var myObject = {a: 2
};myObject.a = 3;
myObject.a;                 // 3Object.defineProperty( myObject, "a", {value: 4,writable: true,configurable: false,    // not configurable!enumerable: true
} );myObject.a;                 // 4
myObject.a = 5;
myObject.a;                 // 5Object.defineProperty( myObject, "a", {value: 6,writable: true,configurable: true,enumerable: true
} ); // TypeError

需要注意的一点是，当configurable=false时，我们可以配置writable的值从true到false，但是不能从false到true。

configurable=false还有一个作用就是阻止我们使用delete操作符删除该属性。

var myObject = {a: 2
};myObject.a;             // 2
delete myObject.a;
myObject.a;             // undefinedObject.defineProperty( myObject, "a", {value: 2,writable: true,configurable: false,enumerable: true
} );myObject.a;             // 2
delete myObject.a;
myObject.a;             // 2

对于enumerable，主要是用来控制for..in循环中是否可显示。

var myObject = { };Object.defineProperty(myObject,"a",// make `a` enumerable, as normal{ enumerable: true, value: 2 }
);Object.defineProperty(myObject,"b",// make `b` NON-enumerable{ enumerable: false, value: 3 }
);myObject.b; // 3
("b" in myObject); // true
myObject.hasOwnProperty( "b" ); // true// .......for (var k in myObject) {console.log( k, myObject[k] );
}
// "a" 2

我们可以调用propertyIsEnumerable来判断属性是否可枚举：

var myObject = { };Object.defineProperty(myObject,"a",// make `a` enumerable, as normal{ enumerable: true, value: 2 }
);Object.defineProperty(myObject,"b",// make `b` non-enumerable{ enumerable: false, value: 3 }
);myObject.propertyIsEnumerable( "a" ); // true
myObject.propertyIsEnumerable( "b" ); // falseObject.keys( myObject ); // ["a"]
Object.getOwnPropertyNames( myObject ); // ["a", "b"]

in 和 hasOwnProperty(..)的区别在于是否往上追溯[[Prototype]]链。

Object.keys(..) 和Object.getOwnPropertyNames(..)都只寻找该对象中的属性，不追溯[[Prototype]]链。

如果我们配置对象的属性为writable:false ，configurable:false，那么该属性不能被重新定义，不能改变，也不能delete。

var myObject = {};Object.defineProperty( myObject, "FAVORITE_NUMBER", {value: 42,writable: false,configurable: false
} );delete myObject.FAVORITE_NUMBER;console.log(myObject.FAVORITE_NUMBER);//42

如果我们防止继续往对象中添加新属性，使用preventExtensions即可：

var myObject = {a: 2
};Object.preventExtensions( myObject );myObject.b = 3;
myObject.b; // undefined

如果在strict mode下，会报TypeError错。

如果我们让对象不仅不能添加新的属性，而且还不能修改原来对象的属性，使用Seal即可，其首先调用preventExtensions()，然后再将对象属性配置为configurable:false。

freeze()是最高级别的让对象中的属性不可变，其先调用seal()方法，再将其属性的writable置为false。

注意一点，preventExtensions，Seal，Freeze都不会影响其对象中引用对象中属性的writable，configurable，enumerable的值。

[[Get]]和[[Put]]

var myObject = {a: 2
};myObject.a; // 2

上例中myObject.a，其能够获取到值实际上是执行了[[Get]]操作，[[Get]] 首先检查对象是否有a属性，如果有，那么将其对应的值返回。如果没有找到，则去对象的[[Prototype]]去寻找，直到Object，如果还没有找到，则返回undefined。

var myObject = {a: undefined
};myObject.a; // undefinedmyObject.b; // undefined

针对上述情况，我们没有办法区分对象中是否含有a属性或b属性。那么我们可以调用hasOwnProperty来判断是否含有该属性：

var myObject = {a: 2
};("a" in myObject);              // true
("b" in myObject);              // falsemyObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "b" ); // false

in操作符检查该对象中或者[[Prototype]]链上是否含有该属性，而hasOwnProperty（Object中的方法）只检查该对象上是否含有钙属性，不向上追溯。

如果我们创建的对象不继承自Object（如Object.create(null)），那么调用hasOwnProperty()会报错，我们可以通过Object.prototype.hasOwnProperty.call(myObject,”a”)来调用hasOwnProperty方法。

注意一点，in是检查属性名是否存在于对象中，并不检查属性值是否在对象中。

4 in [2, 4, 6]//false

对于[[Put]]，如果该对象有该属性，则

1.如果对象中含有accessor descriptor（即下文的Getters & Setters），调用该setter
2.对象的data descriptor中的writable是否为false，如果是，那么在non-strict mode下修改失败，不报错，在strict mode下报TypeError 。
3.其余情况下，则做正常修改。

如果对象没有该属性，情况会更复杂。

accessor descriptor：Getters & Setters

我们使用Getters & Setters可以覆盖对象属性默认的[[Put]] 和[[Get]]操作，当我们定义了对象属性的Getters & Setters时，则该属性的value 和writable失效。

var myObject = {// define a getter for `a`get a() {return 2;}
};Object.defineProperty(myObject,   // target"b",        // property name{           // descriptor// define a getter for `b`get: function(){ return this.a * 2 },// make sure `b` shows up as an object propertyenumerable: true}
);myObject.a; // 2myObject.b; // 4

上例中我们在对象上创建了两个属性，但是并没有定义其value，但是返回了我们定义的getter中的值。

var myObject = {// define a getter for `a`
    get a() {return 2;}
};myObject.a = 3;myObject.a; // 2

我们硬编码将a的返回值设置为2，故其默认[[Put]]操作无效，一般情况下我们都要设置其getter和setter方法：

var myObject = {// define a getter for `a`
    get a() {return this._a_;},// define a setter for `a`
    set a(val) {this._a_ = val * 2;}
};myObject.a = 2;myObject.a; // 4

这篇关于JavaScript中的Objects的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

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

相关文章

Java实现本地缓存的常用方案介绍

Java实现本地缓存的常用方案介绍

《Java实现本地缓存的常用方案介绍》本地缓存的代表技术主要有HashMap,GuavaCache,Caffeine和Encahche,这篇文章主要来和大家聊聊java利用这些技术分别实现本地缓存的方... 目录本地缓存实现方式HashMapConcurrentHashMapGuava CacheCaffe
阅读更多...
SpringBoot整合Sa-Token实现RBAC权限模型的过程解析

SpringBoot整合Sa-Token实现RBAC权限模型的过程解析

《SpringBoot整合Sa-Token实现RBAC权限模型的过程解析》：本文主要介绍SpringBoot整合Sa-Token实现RBAC权限模型的过程解析,本文给大家介绍的非常详细,对大家的学... 目录前言一、基础概念1.1 RBAC模型核心概念1.2 Sa-Token核心功能1.3 环境准备二、表结
阅读更多...
eclipse如何运行springboot项目

eclipse如何运行springboot项目

《eclipse如何运行springboot项目》：本文主要介绍eclipse如何运行springboot项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目js录当在eclipse启动spring boot项目时出现问题解决办法1.通过cmd命令行2.在ecl
阅读更多...
Java中的Closeable接口及常见问题

Java中的Closeable接口及常见问题

《Java中的Closeable接口及常见问题》Closeable是Java中的一个标记接口,用于表示可以被关闭的对象,它定义了一个标准的方法来释放对象占用的系统资源,下面给大家介绍Java中的Clo... 目录1. Closeable接口概述2. 主要用途3. 实现类4. 使用方法5. 实现自定义Clos
阅读更多...
Jvm sandbox mock机制的实践过程

Jvm sandbox mock机制的实践过程

《Jvmsandboxmock机制的实践过程》：本文主要介绍Jvmsandboxmock机制的实践过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、背景二、定义一个损坏的钟1、 Springboot工程中创建一个Clock类2、 添加一个Controller
阅读更多...
SpringBoot实现文件记录日志及日志文件自动归档和压缩

SpringBoot实现文件记录日志及日志文件自动归档和压缩

《SpringBoot实现文件记录日志及日志文件自动归档和压缩》Logback是Java日志框架,通过Logger收集日志并经Appender输出至控制台、文件等,SpringBoot配置logbac... 目录1、什么是Logback2、SpringBoot实现文件记录日志，日志文件自动归档和压缩2.1、
阅读更多...
MQTT SpringBoot整合实战教程

MQTT SpringBoot整合实战教程

《MQTTSpringBoot整合实战教程》：本文主要介绍MQTTSpringBoot整合实战教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录MQTT-SpringBoot创建简单 SpringBoot 项目导入必须依赖增加MQTT相关配置编写
阅读更多...
spring-gateway filters添加自定义过滤器实现流程分析(可插拔)

spring-gateway filters添加自定义过滤器实现流程分析(可插拔)

《spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔)》：本文主要介绍spring-gatewayfilters添加自定义过滤器实现流程分析(可插拔),本文通过实例图... 目录需求背景需求拆解设计流程及作用域逻辑处理代码逻辑需求背景公司要求，通过公司网络代理访问的请求需要做请
阅读更多...
Spring Security介绍及配置实现代码

Spring Security介绍及配置实现代码

《SpringSecurity介绍及配置实现代码》SpringSecurity是一个功能强大的Java安全框架,它提供了全面的安全认证(Authentication)和授权(Authorizatio... 目录简介Spring Security配置配置实现代码简介Spring Security是一个功能强
阅读更多...
SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

《SpringCloud使用Nacos配置中心实现配置自动刷新功能使用》SpringCloud项目中使用Nacos作为配置中心可以方便开发及运维人员随时查看配置信息,及配置共享,并且Nacos支持配... 目录前言一、Nacos中集中配置方式？二、使用步骤1.使用$Value 注解2.使用@Configur
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2