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。

相关文章

SpringBoot使用Apache Tika检测敏感信息

SpringBoot使用Apache Tika检测敏感信息

《SpringBoot使用ApacheTika检测敏感信息》ApacheTika是一个功能强大的内容分析工具,它能够从多种文件格式中提取文本、元数据以及其他结构化信息,下面我们来看看如何使用Ap... 目录Tika 主要特性1. 多格式支持2. 自动文件类型检测3. 文本和元数据提取4. 支持 OCR（光学
阅读更多...
Java内存泄漏问题的排查、优化与最佳实践

Java内存泄漏问题的排查、优化与最佳实践

《Java内存泄漏问题的排查、优化与最佳实践》在Java开发中,内存泄漏是一个常见且令人头疼的问题,内存泄漏指的是程序在运行过程中,已经不再使用的对象没有被及时释放,从而导致内存占用不断增加,最终... 目录引言1. 什么是内存泄漏？常见的内存泄漏情况2. 如何排查 Java 中的内存泄漏？2.1 使用 J
阅读更多...
JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》：本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma
阅读更多...
Java 字符数组转字符串的常用方法

Java 字符数组转字符串的常用方法

《Java字符数组转字符串的常用方法》文章总结了在Java中将字符数组转换为字符串的几种常用方法,包括使用String构造函数、String.valueOf()方法、StringBuilder以及A... 目录1. 使用String构造函数1.1 基本转换方法1.2 注意事项2. 使用String.valu
阅读更多...
java脚本使用不同版本jdk的说明介绍

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.
阅读更多...
Spring MVC如何设置响应

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2
阅读更多...
Spring常见错误之Web嵌套对象校验失效解决办法

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》：本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时，我们会提供了一个 API 接口去
阅读更多...
Java操作ElasticSearch的实例详解

Java操作ElasticSearch的实例详解

《Java操作ElasticSearch的实例详解》Elasticsearch是一个分布式的搜索和分析引擎,广泛用于全文搜索、日志分析等场景,本文将介绍如何在Java应用中使用Elastics... 目录简介环境准备1. 安装 Elasticsearch2. 添加依赖连接 Elasticsearch1. 创
阅读更多...
Spring核心思想之浅谈IoC容器与依赖倒置(DI)

Spring核心思想之浅谈IoC容器与依赖倒置(DI)

《Spring核心思想之浅谈IoC容器与依赖倒置(DI)》文章介绍了Spring的IoC和DI机制,以及MyBatis的动态代理,通过注解和反射,Spring能够自动管理对象的创建和依赖注入,而MyB... 目录一、控制反转 IoC二、依赖倒置 DI1. 详细概念2. Spring 中 DI 的实现原理三、
阅读更多...
SpringBoot 整合 Grizzly的过程

SpringBoot 整合 Grizzly的过程

《SpringBoot整合Grizzly的过程》Grizzly是一个高性能的、异步的、非阻塞的HTTP服务器框架,它可以与SpringBoot一起提供比传统的Tomcat或Jet... 目录为什么选择 Grizzly？Spring Boot + Grizzly 整合的优势添加依赖自定义 Grizzly 作为
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2