JavaScript Object对象

news2024/12/23 8:41:02

创建object类型对象的三种方式

ES中object类型的对象大致由三种创建方式:

  • 直接使用花括号创建
  • 使用function创建
  • 使用Object.create方法创建。

直接使用花括号创建

代码示例:

var obj = {
	v: 6,
	innerObj: {
		v: 7,
	},
	logV: function() {
		console.log(this.v);
	}
};
console.log(obj.v); // 6
console.log(obj.innerObj.v); // 7
obj.logV(); // 6

使用function创建

对于一个function类型的对象,使用new便是对象,不使用便是函数。一般是对象的话,首字母大写,方法首字母小写。

举例:

function F(){
  this.v = 1;
}
var obj = new F();
console.log(obj.v); // output: 1

使用Object.create方法创建

Object是ES中内置的一个function类型的对象,create是Object对象的一个属性方法,其作用是根据传入的参数创建object类型的对象。create方法的调用语法如下:
Object.create(prototype, [propertiesObject]);
第一个参数prototype是创建的对象所对应的prototype,相当于使用function创建时中的prototype属性对象,创建出来的object对象实例可以直接调用。
第二个参数propertiesObject为属性描述对象,是可选参数,用于描述所创建对象的自身属性。属性描述对象是object类型对象,它里面的属性名会成为所创建对象的属性名,属性值为属性的描述对象。
Object.getOwnPropertyNames(obj):获取obj自己所拥有的属性。
代码示例:

var obj = Object.create(
	{
		type: 'by create'
	},
	{
		color:{
			value: 'red',
			enumerable: true,
		},
		size:{
			value: '37',
			enumerable: true,
		}
	}
);
console.log(obj.type); // by create
console.log(obj.color); // red
console.log(obj.size); // 37
console.log(Object.getOwnPropertyNames(obj)); // ['color', 'size']

Object的prototype属性对象里面都有什么

Object的prototype属性对象在ES5.1和ES2015中都规定了constructor、toString()、toLocaleString()、valueOf()、哈sOwn Property(V)、isPrototypeOf(V)和propertyIsEnumerable(V)7个属性。

  • toString: 可以将对象转换为字符串,不同类型的对象可能会重写自己的toString方法。
  • toLocaleString: 会使用本地化格式来生成字符串,对于时间日期类型和数字类型的用处较大。
  • valueOf: 会返回原始值。例如Date的valueOf就是相应的数字。
  • hasOwnProperty: 判定是否包含指定属性。
  • isPrototypeOf: 判断某个对象是否是另一个对象所对应的prototype对象。
  • propertyIsEnumerable: 判断某个属性是否可以枚举。

标准中所规定的Object的prototype属性对象中的7个属性,但是不同的浏览器还会有自己的扩展。

对象的属性

对象是通过其属性发挥作用的,因此对象的属性是对象的核心。

三种属性类型

命名数据属性(named data properties)、命名访问器属性(named accessor properties)和内部属性(internal properties)。

命名数据属性

命名数据属性是我们平时使用最多的属性,由属性名和属性值组成。
代码示例:

var obj = {
	v: 6,
	innerObj: {
		v: 7,
	},
	logV: function() {
		console.log(this.v);
	}
};
console.log(obj.v); // 6
console.log(obj.innerObj.v); // 7
obj.logV(); // 6

命名访问器属性(getter/setter)

getter和setter是对应的方法,setter方法用于给属性赋值,而getter方法用于获取属性的值。如果只有getter、setter其中之一,就只能进行单一操作,例如只有getter方法的属性就是只读属性,只有setter方法的属性就是只可以写入的属性。
代码示例:

function log(msg){
	console.log(msg);
};

var car = {
	_color: 'red',
	_weight: 0,
	_age: 0,
	
	// color 可读,可写
	get color(){
		return this._color;
	},
	
	set color(col){
        log('color changed');
		this._color = col;
	},

	// weight只读不写
	get weight(){
		return this._weight;
	},

	// age 只写不读
	set age(age){
		this._age = age;
	},
};

car.color='blue';
log(car.color); // 'blue'

log(car.weight); // 0

car.age=10;
log(car.age); // undefined

内部属性

内部属性是对象的一种特殊的属性。它没有自己的名字,当然也就不可以像前两种属性那样直接访问了。正是因为内部属性没有名字所以前面两种属性才叫命名属性。内部属性使用两对方括号表示。例如, [[Extensible]]表示Extensible内部属性。
内部属性的作用是用来控制对象本身的行为。所有对象共有的内部属性共12个:[[ptototype]]、[[Class]]、[[Extensible]]、[[Get]]、[[GetOwnProperty]]、[[GetProperty]]、[[Put]]、[[CanPut]]、[[HasProperty]]、[[Delete]]、[[DefaultValue]]、[[DefineOwnProperty]]除了这12个之外,不同的对象可能还会有自己的内部属性。
下面简单介绍一种内部属性:[[Prototype]]
它就是使用function创建对象时function中的prototype属性。
注意使用Object.getPrototypeOf()方法来获取prototype.
代码示例:

function Car(){}

Car.prototype = {color: 'red'};

var car = new Car();

console.log(typeof car.prototype); // undefined
console.log(Object.getPrototypeOf(car)); // 'red'

5种创建属性的方式

1. 使用花括号创建

代码示例:

var obj = {
	v: 1, // 直接量属性
	
	// function 对象属性
	getV: function() {
		return this.v;
	},

	// 访问器属性(name)
	_name: 'object',
	get name() {
		return this._name;
	},
	set name(name){
		this._name = name;
	}
};

console.log(obj.v); // 1

console.log(obj.getV()); // 1

console.log(obj.name); // 'object'

obj.name = 'objChanged';
console.log(obj.name); // 'objChanged'

2. 使用点操作符创建

当使用点操作符给一个对象赋值时,如果对象存在此属性则会修改属性的值,否则会添加相应的属性并赋予相应的值。
代码示例:

var person = {name: 'zzh'};
person.name = 'zh';
person.age = 18;

console.log(person); // { name: 'zh', age: 18 }

3. Object的create方法

第一个参数为创建对象的[[Prototype]]属性,第二个参数为属性描述对象。
代码示例:

var obj = Object.create(
	{
		type: 'by create'
	},
	{
		color:{
			value: 'red',
			enumerable: true,
		},
		size:{
			value: '37',
			enumerable: true,
		}
	}
);
console.log(obj.type); // by create
console.log(obj.color); // red
console.log(obj.size); // 37
console.log(Object.getOwnPropertyNames(obj)); // ['color', 'size']

4.Object的defineProperty、defineProperties方法

使用Object的defineProperty和defineproperties方法给对象添加属性。defineProperty方法可添加单个属性,defineProperties方法可以添加多个属性。
代码示例:

var person = {};
Object.defineProperty(person, 'name', {
	enumerable: true,
	value: 'zzh'
});

console.log(Object.getOwnPropertyNames(person)); // ['name']
console.log(person.name); // zzh

Object.defineProperties(person, {
	name: {
	enumerable: true,
	value: 'zzh'
	},
	age: {
	enumerable: true,
	value: 18
	}
});

console.log(Object.getOwnPropertyNames(person)); // ['name', 'age']
console.log(person.name); // zzh
console.log(person.age); // 18

5. 通过prototype属性创建

使用function创建的object实例对象可以使用function对象的prototype属性对象中的属性。
代码示例:

function Person(){}

var person = new Person();

Person.prototype.name = 'zzh';

console.log(person.name); // zzh

属性的描述

属性的描述也可以称为属性的特征,类似于对象的内部属性,其主要作用就是描述属性自己的一些特征。

命名数据属性的4个特征

  • [[Value]]: 表示属性的值
  • [[Writable]]: 表示属性值是否可以修改
  • [[Enumerable]]: 表示属性是否可枚举, 若为false则不会被for-in循环遍历到。
  • [[Configurable]]:表示属性是否可以被删除和属性的特性(除[[value]]外)是否可修改。

代码示例:

var person = {};
Object.defineProperty(person, 'name', {
	enumerable: true,
	value: 'zzh',
	writable: false, // 不可修改
	configurable: true
});

console.log(Object.getOwnPropertyNames(person)); // ['name']
console.log(person.name); // zzh

person.name = 'zh'; // not work
console.log(person.name); // zzh

命名访问器属性的4个特征

  • [[Get]]:getter方法
  • [[Set]]: setter方法
  • [[Enumerable]]:表示属性是否可枚举, 若为false则不会被for-in循环遍历到。
  • [[Configurable]]:表示属性是否可以被删除和属性的特性(除[[value]]外)是否可修改。
    代码示例:
function log(msg){
	console.log(msg);
}
var person = {_name: '007'};
Object.defineProperty(person, 'name', {
	get: function(){
		log('getting name');
		return this._name;
	},
	
	set: function(newName){
		log('name is changed to ' + newName);
		this._name = newName;
	}
});

log(Object.getOwnPropertyDescriptor(person, 'name')); 
//{ get: [Function: get],set: [Function: set], enumerable: false,configurable: false }

console.log(person.name); // 007

person.name = 'zzh'; 
console.log(person.name); // zzh

关于我

  • 一个推崇全栈开发的前端开发人员
  • 微信: itrzzh
  • 公众号:全栈道
    • 进群
    • 思维脑图
  • 知识星球:全栈道
    • 1v1 辅导
    • 笔记资料
    • 思维脑图原件
    • 其他资源
  • 个人网站:https://www.iotzzh.com
  • B站:https://space.bilibili.com/285025688
  • 抖音:全栈道
  • github:https://github.com/iotzzh
  • gitee: https://gitee.com/iotzzh

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

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

相关文章

C#求水仙花数

目录 1.何谓水仙花数 2.求三位数的水仙花数 3.在遍历中使用Math.DivRem方法再求水仙花数 1.何谓水仙花数 水仙花数(Narcissistic number)是指一个 n 位正整数,它的每个位上的数字的 n 次幂之和等于它本身。例如,153 是一个 3 …

慢sql优化

1.避免使用select *,而是明确列出需要的列, 2.小表驱动大表,in适用于左边大表,右边小表。 exists适用于左边小表,右边大表。 3.批量操作:如果每次插入数据库数据,都要连接一次数据库&#xf…

【LeetCode每日一题】2684. 矩阵中移动的最大次数

文章目录 [2684. 矩阵中移动的最大次数](https://leetcode.cn/problems/maximum-number-of-moves-in-a-grid/)思虑:代码: 2684. 矩阵中移动的最大次数 思虑: 1.将第一列的所有行坐标,用IntStream 来生成一个范围 [0, m) 内的整数…

一命通关递归

递归 简介 递归是我们在学C语言的时候,就已经接触到了的一个概念,相信大家的递归都是从这里开始的: 但是,在老师念ppt的时候,伴随着一些前轱辘不转后轱辘转的语言,我们往往都没有太去了解递归的工作原理和…

【C语言】字符函数与字符串函数以及内存函数 { 超详细攻略,一篇学会 }

今日分享:字符、字符串函数和内存函数 内存函数就是对内存进行操作的函数 字符串函数就是对字符串进行操作的函数 字符函数就是对字符进行操作的函数 str前缀的函数是字符串函数,头文件string.h mem前缀的函数是内存函数,头文件stdlib.h 字符…

【pynput】监控是否打开百度贴吧网页

文章目录 简介Demo 简介 有网友提过一个要求,用 Python 实现一个 电脑打开某网站就自动关机的功能。 想到的思路有两个: 【windows 平台】, 获取活动的窗口标题,如果标题里包含了某些网站名称, 那就使用关机命令 可以定时拉取标题, 也可以使…

代码算法训练营day9 | 28. 实现 strStr() 、459.重复的子字符串

day9: 28. 实现 strStr()KMP的主要应用:什么是前缀表:前缀表是如何记录的: 如何计算前缀表:构造next数组:1、初始化2、处理前后缀不相同的情况3、处理前后缀相同的情况 代码: 459.重复的子字符串…

P1303 A*B Problem(高精度乘法)

题目描述&#xff1a; 图解&#xff1a; 此图来源于ACwing一位大佬的题解 AC代码&#xff1a; #include<iostream> #include<vector>using namespace std;vector<int> mul(vector<int> &A,vector<int> &B) {vector<int> C(A.…

C#创建第一个PIESDK模版的项目

目录 环境配置创建项目方式 环境配置 1软件安装 通过安装光盘或者U盘等介质读取PIE软件的安装程序和使用文档。程序安装过程比较简单&#xff0c;软件本身不借助与任何第三方程序&#xff0c;直接双击安装程序【PIESDK.Net_V6.3_Windows_X64.exe】安装文件&#xff0c;即可安装…

Java Swing游戏开发学习12

内容来自RyiSnow视频讲解 这一节讲的是实现游戏中的NPC(Non Player Character)非玩家角色。 添加了一个老人NPC&#xff0c;一个简单的AI&#xff08;人工智能&#xff09;拄着拐杖四处走。老人与树木、玩家的碰撞检测。 NPC四处走动 实现NPC四处走动 一开始&#xff0c;每一…

掌握Go语言:深入encoding/gob包的高效数据序列化

掌握Go语言&#xff1a;深入encoding/gob包的高效数据序列化 引言理解Gob和它的使用场景Gob的概念和设计目标Gob的适用场景和优势 开始使用Gob基本的Gob编码和解码示例代码编码&#xff08;序列化&#xff09;解码&#xff08;反序列化&#xff09; Gob编码高级应用自定义类型的…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Tabs)

通过页签进行内容视图切换的容器组件&#xff0c;每个页签对应一个内容视图。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 该组件从API Version 11开始默认支持安全区避让特性(默认值为&#x…

炸裂!全球首个AI程序员!

近年来&#xff0c;人工智能&#xff08;AI&#xff09;在多个领域取得了显著进展&#xff0c;不断拓展其能力边界。一个引人注目的突破是全球首个AI程序员——Devin的诞生。 这一创新不仅展示了AI技术的快速进步&#xff0c;而且对软件开发领域和未来的工作场景产生了深远的影…

【重新定义matlab强大系列十八】Matlab深度学习长短期记忆 (LSTM) 网络生成文本

&#x1f517; 运行环境&#xff1a;Matlab &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 #### 防伪水印——左手の明天 #### &#x1f497; 大家好&#x1f917;&#x1f91…

嵌入式开发基础总结

学习目标 1.了解嵌入式开发 2.开发环境的搭建 3.Linux操作系统的基本操作 一、了解嵌入式开发 以应用为中心&#xff0c;以计算机技术为基础&#xff0c;软硬件可裁剪&#xff0c;适应应用系统对功能、可靠性、成本、体积、功耗严格要求的专用计算机系统。 1.嵌入式可以干…

【C++算法模板】预处理算法:一维前缀和、二维前缀和总结,详解带例题

文章目录 0&#xff09;概述1&#xff09;一维前缀和2&#xff09;二维前缀和 0&#xff09;概述 因为前缀和这个板子的推导比较简单&#xff0c;因此本博客重点在于知识点归纳而不在于证明 1&#xff09;一维前缀和 一维数组的前缀和计算公式&#xff1a; s [ i ] ∑ i 1…

SVM-支持向量机实验分析(软硬间隔,线性核,高斯核)

目录 一、前言 二、实验 0. 导入包 1. 支持向量机带来的效果 2. 软硬间隔 3. 非线性支持向量机 4. 核函数变换 线性核 高斯核 对比不同的gamma值对结果的影响 一、前言 学习本文之前要具有SVM支持向量机的理论知识&#xff0c;可以参考支持向量机&#xff08;Support Vector …

win10 配置 oh-my-posh

win10 配置 oh-my-posh 0. 前置1. 安装1.1. 软件1.2. 字体1.3. 激活1.3.1. Git Bash1.3.2. PowerShell 2. 配置2.1. 效果2.2. 说明2.3. 其他2.3.1. 新版PowerShell2.3.2 conda问题 0. 前置 这个东西毕竟是个&#xff0c;命令行美化工具&#xff0c;所以需要先有一个命令行&…

从MFC迁移到wxWidgets视频教程

犹他州C程序员团队发布了一个关于从MFC迁移到wxWidgets的新视频&#xff08;需要科学上网&#xff09;&#xff0c;并附带了一个包含详细步骤说明的要点。 希望这对那些希望使其现有的MFC应用程序可移植&#xff0c;或者只是希望切换到维护更活跃的框架的人来说会有所帮助。 附…

NPM 仓库的超集 JSR 来了!

引言 今天在 Deno 博客中看到了一篇文章&#xff0c;介绍了一个叫 JSR 的包管理注册中心&#xff0c;简单尝试了一下觉得还不错&#xff0c;本文将结合原文章和个人体验对 JSR 进行一个详细的介绍。 在现如今的前端开发中&#xff0c;包管理注册中心 (如 npmjs.com) 扮演着至…