深入理解JavaScript 对象

最新推荐文章于 2024-09-12 18:43:37 发布
最新推荐文章于 2024-09-12 18:43:37 发布
阅读量940 收藏 20
点赞数 27
分类专栏： 强基训练 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35607202/article/details/135593866
版权

目录

1. 理解对象

1.1 属性的类型

1.1.1 数据属型

1.1.2 访问器属性

1.2 定义多个属性

1.3 读取属性的特性

1.4 合并对象

2.创建对象

2.1 工厂模式

2.2构造函数模式

2.3 原型模式

2.3.1 理解原型

2.3.2 原型层级

 2.3.3 原型和in操作符

3. 对象迭代

3.1其他原型语法

3.2 原型的动态性

3.3 原生对象原型

3.4 原型的问题

1. 理解对象

Object是 JavaScript 的一种数据类型，它用于存储各种键值集合和更复杂的实体。可以通过 object()构造函数或者使用对象字面量的方式创建对象。

// 通过构造函数创建
let person = new Object();
// 通过字面量创建
let person = {};

1.1 属性的类型

属性分两种：数据属性和访问器属性.

1.1.1 数据属型

数据属性包含一个保存数据值的位置，值在这个位置读取/写入，有4个特性描述它们的行为。

1.[[Configurable]]： 属性是否可配置，默认为true，表示属性可以通过delete删除并重新定义，可修改及改为访问器属性。

2.[[Enumerable]]：属性是否可枚举，默认为true，表示属性可以通过for-in循环返回。

3.[[Writable]]：属性的值是否可修改，默认为true，表示属性的值可修改。

4.[[Value]]：属性的值，默认为undefined, 为读取和写入属性值的位置。

可以通过Object.defineProperty()来修改属性的默认特性。该方法接受三个参数：要给其添加属性对象，属性的名称和特性对象（4个特性）

在严格模式下，尝试修改只读属性的值和删除不可配置的属性值会抛出错误。

 let person = {};
 Object.defineProperty(person, "name", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: "JIE"
 })

可以对同一个属性多次调用Object.defineProperty()，但在把configurable设置为false之后就会受限制了。

 let person = {};
 Object.defineProperty(person, "name", {
  configurable: false,
  value: "JIE"
 })
 // 抛出错误
 Object.defineProperty(person, "name", {
  configurable: true,
  value: "JIE"
 })

注： 在调用Object.defineProperty()时，configurable、enumerable和writable的值如果不指定，则都默认为false

1.1.2 访问器属性

访问器属性不包含数据值，包含一个获取（getter）函数和一个设置（setter）函数。

访问器有4个特性

1.[[Configurable]]： 属性是否可配置，默认为true，表示属性可以通过delete删除并重新定义，可修改及改为访问器属性。

2.[[Enumerable]]：属性是否可枚举，默认为true，表示属性可以通过for-in循环返回。

3. [[Get]]：获取函数，在读取属性时调用，默认值为undefined。

4. [[Set]]：设置函数，在写入属性时调用，默认值为undefined。

访问器不能直接定义，必须使用Object.defineProperty()。

在严格模式下，尝试写入只定义了获取函数（意味着属性为只读）的属性会抛出错误。类似地，只有一个设置函数的属性是不能读取的，非严格模式下读取会返回undefined，严格模式下会抛出错误。

let person = {
  name: 'JIE',
  edition: 1
 };
 Object.defineProperty(person, "name1", {
  get() {
    return this.name;
  },
  set(newValue) {
    this.name = newValue;
    this.edition ++;
  }
 });
 person.name1 = 'jack';
 console.log(person.edition); // 2

1.2 定义多个属性

Object.define-Properties()方法

 let person = {age_:20};
 Object.defineProperties(person, {
  name: {
    value: 'JIE'
  },
  age: {
    get () {
      return this.age_
    }
  }
 }
 );
 console.log(person.age);

1.3 读取属性的特性

Object.getOwnPropertyDescriptor()方法

 // 接上段代码
let descriptor = Object.getOwnPropertyDescriptor(person, "name");
console.log(descriptor.value);
console.log(descriptor.configurable); // false
console.log(descriptor.enumerable); // false
console.log(descriptor.writable); // false

Object.getOwnPropertyDescriptors()方法

 let person = {age_:20};
 Object.defineProperties(person, {
  name: {
    value: 'JIE'
  },
  age: {
    get () {
      return this.age_
    }
  }
 }
 );
let descriptors = Object.getOwnPropertyDescriptors(person);
console.log(JSON.stringify(descriptors));
// {
//   age_: { value: 20, writable: true, enumerable: true, configurable: true },
//   name: {
//     value: "JIE",
//     writable: false,
//     enumerable: false,
//     configurable: false,
//   },
//   age: { enumerable: false, configurable: false },
// };

1.4 合并对象

Object.assign()方法

Object.assign()实际上对每个源对象执行的是浅复制。如果多个源对象都有相同的属性，则使用最后一个复制的值。

let targetObj,sourceObj,result;
targetObj= {};
sourceObj = {name:'JIE'};
result = Object.assign(targetObj,sourceObj);
// Object.assign修改目标对象
// 也会返回修改后的目标对象
console.log(targetObj === result); // true
console.log(targetObj !== sourceObj); // true
console.log(result); // {name:'JIE'}
console.log(targetObj); // {name:'JIE'}

2.创建对象

虽然使用Object构造函数或对象字面量可以方便地创建对象，但这些方式也有明显不足：创建多个对象时需要重复编写相同代码。

2.1 工厂模式

工厂模式是一种众所周知的设计模式，广泛应用于软件工程领域，用于抽象创建特定对象的过程。

这种工厂模式虽然可以解决创建多个类似对象的问题，但没有解决对象标识问题（即新创建的对象是什么类型）。

function createPerson(name, age, job) {
    let o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
      console.log(this.name);
    };
    return o;
  }
  let person1 = createPerson("Nicholas", 29, "Software Engineer");
  let person2 = createPerson("Greg", 27, "Doctor");

2.2构造函数模式

构造函数用于创建特定类型对象；

任何函数只要使用new操作符调用就是构造函数，而不使用new操作符调用的函数就是普通函数；

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
      console.log(this.name);
    };
  }
  let person1 = new Person("Nicholas", 29, "Software Engineer");
  let person2 = new Person("Greg", 27, "Doctor");
  person1.sayName();   // Nicholas
  person2.sayName();   // Greg

构造函数的问题

会在每个实例上都创建一遍

console.log(person1.sayName == person2.sayName); // false

因为都是做一样的事，所以没必要定义两个不同的Function实例，可以通过原型模式来解决。

2.3 原型模式

每个函数都会创建一个prototype属性，这个属性是一个对象，是通过调用构造函数创建的对象的原型。使用原型对象的好处是，属性和方法可以被对象实例共享。

2.3.1 理解原型

默认情况下，所有原型对象自动获得一个名为constructor的属性，指回与之关联的构造函数。

通过代码理解

/＊＊
    ＊ 构造函数可以是函数表达式
    ＊ 也可以是函数声明，因此以下两种形式都可以：
    ＊    function Person() {}
    ＊    let Person = function() {}
    ＊/
  function Person() {}
  /＊＊
    ＊ 声明之后，构造函数就有了一个
    ＊ 与之关联的原型对象：
    ＊/
  console.log(typeof Person.prototype);
  console.log(Person.prototype);
  // {
  //    constructor: f Person(),
  //    __proto__: Object
  // }
  /＊＊
    ＊ 如前所述，构造函数有一个prototype属性
    ＊ 引用其原型对象，而这个原型对象也有一个
    ＊ constructor属性，引用这个构造函数
    ＊ 换句话说，两者循环引用：
    ＊/
  console.log(Person.prototype.constructor === Person); // true
  /＊＊
    ＊ 正常的原型链都会终止于Object的原型对象
    ＊ Object原型的原型是null
    ＊/
  console.log(Person.prototype.__proto__ === Object.prototype);    // true
  console.log(Person.prototype.__proto__.constructor === Object); // true
  console.log(Person.prototype.__proto__.__proto__ === null);      // true
  console.log(Person.prototype.__proto__);
  // {
  //    constructor: f Object(),
  //    toString: ...
  //    hasOwnProperty: ...
  //    isPrototypeOf: ...
  //    ...
  // }
  let person1 = new Person(),
      person2 = new Person();
  /＊＊
    ＊ 构造函数、原型对象和实例
    ＊ 是3 个完全不同的对象：
    ＊/
  console.log(person1 ! == Person);              // true
  console.log(person1 ! == Person.prototype); // true
  console.log(Person.prototype ! == Person);   // true
  /＊＊
    ＊ 实例通过__proto__链接到原型对象，
    ＊ 它实际上指向隐藏特性[[Prototype]]
    ＊
    ＊ 构造函数通过prototype属性链接到原型对象
    ＊
    ＊ 实例与构造函数没有直接联系，与原型对象有直接联系
    ＊/
  console.log(person1.__proto__ === Person.prototype);    // true
  conosle.log(person1.__proto__.constructor === Person); // true
  /＊＊
    ＊ 同一个构造函数创建的两个实例
    ＊ 共享同一个原型对象：
    ＊/
  console.log(person1.__proto__ === person2.__proto__); // true
  /＊＊
    ＊ instanceof检查实例的原型链中
    ＊ 是否包含指定构造函数的原型：
    ＊/
  console.log(person1 instanceof Person);              // true
  console.log(person1 instanceof Object);              // true
  console.log(Person.prototype instanceof Object);   // true

对象关系图

2.3.2 原型层级

hasOwnProperty()判断属性是否在实例上

function Person() {}
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function() {
    console.log(this.name);
  };
  let person1 = new Person();
  let person2 = new Person();
  console.log(person1.hasOwnProperty("name")); // false
  person1.name = "Greg";
  console.log(person1.name); // "Greg"，来自实例
  console.log(person1.hasOwnProperty("name")); // true
  console.log(person2.name); // "Nicholas"，来自原型
  console.log(person2.hasOwnProperty("name")); // false
  delete person1.name;
  console.log(person1.name); // "Nicholas"，来自原型
  console.log(person1.hasOwnProperty("name")); // false

图示

 2.3.3 原型和in操作符

无论属性在实例上还是在原型上都返回true

"name" in person

如果要确定某个属性是否存在于原型上，则可以像下面这样同时使用hasOwnProperty()和in操作符：

function hasPrototypeProperty(object, name){
    return ! object.hasOwnProperty(name) && (name in object);
  }

3. 对象迭代

ES7新增:Object.values()返回对象值的数组，Object.entries()返回键/值对的数组。


const o = {
    foo: 'bar',
    baz: 1,
    qux: {}
  };
  console.log(Object.values(o));
  // ["bar", 1, {}]
  console.log(Object.entries((o)));
  // [["foo", "bar"], ["baz", 1], ["qux", {}]]

3.1其他原型语法

为了减少代码冗余，也为了从视觉上更好地封装原型功能，直接通过一个包含所有属性和方法的对象字面量来重写原型成为了一种常见的做法，如下面的例子所示：

function Person() {}
  Person.prototype = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName() {
      console.log(this.name);
    }
  };

这样重写之后，Person.prototype的constructor属性就不指向Person了；

在创建函数时，也会创建它的prototype对象，同时会自动给这个原型的constructor属性赋值；

而上面的写法完全重写了默认的prototype对象，因此其constructor属性也指向了完全不同的新对象（Object构造函数），不再指向原来的构造函数；

// 接上段代码
let friend = new Person();
  console.log(friend instanceof Object);        // true
  console.log(friend instanceof Person);        // true
  console.log(friend.constructor == Person);   // false
  console.log(friend.constructor == Object);   // true

如果constructor的值很重要，则可以像下面这样在重写原型对象时专门设置一下它的值：

function Person() {
  }
  Person.prototype = {
    constructor: Person,
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName() {
      console.log(this.name);
    }
  };

但要注意，以这种方式恢复constructor属性会创建一个[[Enumerable]]为true的属性。而原生constructor属性默认是不可枚举的。可以使用Object.defineProperty()方法来定义constructor属性：

function Person() {}
  Person.prototype = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName() {
      console.log(this.name);
    }
  };
  // 恢复constructor属性
  Object.defineProperty(Person.prototype, "constructor", {
    enumerable: false,
    value: Person
  });

3.2 原型的动态性

对原型对象所做的修改会在实例上反映出来

let friend = new Person();
  Person.prototype.sayHi = function() {
    console.log("hi");
  };
  friend.sayHi();    // "hi"

重写整个原型会切断最初原型与构造函数的联系，但实例引用的仍然是最初的原型。

实例只有指向原型的指针，没有指向构造函数的指针。来看下面的例子：

function Person() {}
  let friend = new Person();
  Person.prototype = {
    constructor: Person,
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName() {
      console.log(this.name);
    }
  };
  friend.sayName();   // 错误

在这个例子中，Person的新实例是在重写原型对象之前创建的。在调用friend.sayName()的时候，会导致错误。这是因为firend指向的原型还是最初的原型，而这个原型上并没有sayName属性。

3.3 原生对象原型

所有原生引用类型的构造函数（包括Object、Array、String等）都在原型上定义了实例方法；

比如，数组实例的sort()方法就是Array.prototype上定义的；

console.log(typeof Array.prototype.sort);         // "function"

通过原生对象的原型可以取得所有默认方法的引用，也可以给原生类型的实例定义新的方法；

给String原始值包装类型的实例添加了一个startsWith()方法：

String.prototype.startsWith = function (text) {
    return this.indexOf(text) === 0;
  };
  let msg = "Hello world! ";
  console.log(msg.startsWith("Hello"));   // true

 注：不推荐在产品环境中修改原生对象原型，可能引发命名冲突和重写原生方法。推荐的做法是创建一个自定义的类，继承原生类型。

3.4 原型的问题

弱化了向构造函数传递初始化参数的能力；

导致所有实例默认都取得相同的属性值；

主要问题源自它的共享特性（修改引用类型），代码如下：

function Person() {}
  Person.prototype = {
    constructor: Person,
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    friends: ["Shelby", "Court"],
    sayName() {
      console.log(this.name);
    }
  };
  let person1 = new Person();
  let person2 = new Person();
  person1.friends.push("Van");
  console.log(person1.friends);   // "Shelby,Court,Van"
  console.log(person2.friends);   // "Shelby,Court,Van"
  console.log(person1.friends === person2.friends);   // true

不同的实例应该有属于自己的属性副本。这就是实际开发中通常不单独使用原型模式的原因。

CJ-杰
关注
专栏目录
【004JavaScript 对象 实例】深入理解JavaScript对象实例
燃正科技
06-08 3878
【代码】【004JavaScript 对象 实例】
关于JavaScript(JS)的基本对象
weixin_44126720的博客
01-17 2239
JS中的对象分为三类：①.内置对象(静态对象)：js本身已经写好的对象，可以直接使用不需要定义。常见的内置对象有Global、Math(它们也是本地对象，根据定义的每个内置对象都是本地对象)。②.本地对象(非静态对象)：必须实例化才能使用其方法和属性的就是本地对象。常见的本地对象有Object、Function、Date、Array、String、Boolean、Number、RegExp、Error等。
JavaScript学习手册四：JS对象
qq_45823118的博客
04-18 5912
JS对象引言A、对象的创建任务描述相关知识代码文件B、属性的增删改查任务描述相关知识代码文件C、属性的检测和枚举任务描述相关知识代码文件 引言 1、JavaScript是基于对象的语言，在JavaScript中，一切都可以被称为对象，包括字符串、数字、布尔型、HTML Element等。这些JavaScript中已有的对象称为内置对象，而用户自己定义的对象叫做自定义对象。自定义对象是数据和函数（也叫方法）的集合。 2、这里要特别提醒的是，JavaScript虽然也是一门基于对象的语言，但是它实现对象的
js对象:
最新发布
aaaaaaaallllll的博客
09-12 681
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。子字符串位置 indexOf(string,[index]) //返回子字符串abc在字符串中第一次出现的位置（从0开始计算），不存在返回-1。返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；如果不写长度，表示截取到字符串的末尾。
初学JavaScript：js中的对象（对象+原型对象）
lalala_dxf的博客
04-03 6284
js中的对象
前端学习之JavaScript——内置对象
Jane_xxxxxy的博客
08-11 837
1. 内置对象 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象：Math、 Date 、Array、String等 2. 查文档 2.1 MDN 学习一个内置对象的使用，只要
Javascript学习之对象
m0_53450739的博客
03-31 199
在Javascript中，对象是一个复杂数据类型，是存储了一些基本数据类型的集合。对象就是一些键值对的集合，就像是我们准备一个房子，把我们想要的数据放进去，然后把房子的地址给到变量名，当我们需要某一个数据的时候，就可以根据变量名里面存储的地址找到对应的房子，然后去房子里面找到对应的数据。（1）方式一：字面量方式创建一个对象输出如下：（2）方式二：内置构造函数的方式创建对象。
深入学习JavaScript对象
10-23
JavaScript对象是语言的核心组成部分，它们提供了数据存储和方法调用的能力。...总之，深入理解JavaScript对象，包括其创建、属性、原型链以及继承机制，对于编写高效和可靠的JavaScript代码至关重要。
深入理解JavaScript系列
09-30
第3部分深入探索JavaScript，介绍了语法、值、运算符、布尔类型、数字、字符串、语句、异常捕获、函数、变量、对象与继承、数组、正则表达式、Date、Math、JSON、标准全局变量、编码和JavaScript、ECMAScript 5的新...
深入理解javascript构造函数和原型对象
10-25
在深入理解JavaScript的过程中，构造函数和原型对象是两个核心概念。JavaScript是一种基于对象（Object-based）和原型（Prototype-based）的语言，其对象模型与传统的基于类（Class-based）语言有所不同。理解构造...
深入理解JavaScript中的对象
10-24
在深入探讨JavaScript对象的实质前，首先需要明确，JavaScript作为一门面向对象的编程语言，其对象系统具备面向对象编程（OOP）语言的所有典型特征，包括封装、聚合、继承和多态。在JavaScript的世界里，对象可以是...
JavaScript入门——（6）对象
weixin_48719464的博客
10-10 787
对象（object）：JavaScript里的一种数据类型可以理解为是一种无序的数据集合，注意数组是有序的数据集合用来详细的描述某个事物，例如描述一个人。
第三章 ，面向对象程序的开发
weixin_73656040的博客
09-19 493
属性、方法和事件属性属性是指对象包含的值,使用,对象名.属性名,的方式进行操作,如方法在代码里,使用,对象名.方法名()'来调用该对象的方法。事件响应用户操作、完成交互,如OnClick, OnKeyDown一般可以分为鼠标事件、键盘事件及其他事件通常情况下，我们可以通过一下两种方式来访问对象属性。（1）中括号表示法 ，如student【"name"】(2)点号表示法，如student.name。
JavaScript的对象详解
zayyo的博客
08-31 1038
对象是JavaScript中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起，更好的描述一个事物比如我们可以描述一辆车：Car，具有颜色（color）、速度（speed）、品牌（brand）、价格（price），行驶（travel）等等；又比如我们可以描述一个人：Person，具有姓名（name）、年龄（age）、身高（height），吃东西（eat）、跑步（run）等等；
JavaScript对象详解，深入理解js对象
sgegv的博客
04-07 943
点击这里即可获取，包括答案解析。由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）点击这里即可获取，包括答案解析。[外链图片转存中…(img-you7p05m-1712430505777)]
JavaScript对象
weixin_67224308的博客
09-20 393
indexOf("子字符串")方法返回一个整数值,表示string字符串对象内第1次出现子字符串的位置（索引值）。方法从字符串对象中返回单个字符，使用时通常会设置一个起始位置的参数，然后返回位于该位置的字符值。JavaScript把对象定义为:“无序属性的集合，其属性可以包含基本值、对象或者函数。常用的字符串截取函数有 slice()、substr()、substring()。属性是指对象包含的值，使用’对象名,属性名’的方式进行操作。在代码里，使用’对象名.方法名()’来调用该对象的方法。
JavaScript 常用对象
qq_52447613的博客
05-05 1060
数组也是对象的一种，数组是一种用于表达有顺序关系的值的集合的语言结构，也就是同类数据元素的有序集合。数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据。但是在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关，此处不用纠结，我们大多数时候都是相同类型元素的集合。数组内的各个值被称作元素，每一个元素都可以通过索引（下标）来快速读取，索引是从零开始的整数。使用typeof检查一个数组对象时，会返回object。
JavaScript - 对象篇
qq_52499703的博客
07-02 664
为了成功地生活，少年人必须学习自立，铲除埋伏各处的障碍，在家庭要教养他，使他具有为人所认可的独立人格
【前端从0开始】JavaSript——Object对象和String对象
a1137588003的博客
08-22 168
按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面的代码却可以执行。为了方便操作基本数据类型，js提供了三个特殊的引用类型：string、，Number，Boolean。substring(起始位置,[结束位置]) //不包括截取结果的右边界字符。JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。javascript中的对象分为3种：自定义对象，内置对象，浏览器对象。结束位置：是一个下标值，不能为负值（不包括截取结果的右边界字符）方法是能够在对象上执行的动作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CJ-杰

打赏描述

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值