JavaScript基础对象Object

最新推荐文章于 2024-11-16 14:11:26 发布

骤雨f

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量139

点赞数

分类专栏： JavaScript 前端文章标签： javascript

本文链接：https://blog.csdn.net/Brycee/article/details/119953875

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

Object.prototype.hasOwnProperty()

Object.prototype.propertyIsEnumerable()

Object原型属性及方法(原型方法，实例可以调用的方法)

constructor

hasOwnProperty(propertyName)

propertyIsEnumerable(propertyName)

valueOf()

toLocaleString()

toString()

isPrototypeOf(object)

对象Object

无序属性的集合，其属性可以包含基本值，对象，或者函数。可以将对象想象成散列表：键值对，其中值可以是数据或者函数。ECMAScript中的对象其实就是一组数据（属性）和功能（方法）的集合。

以下是本篇文章正文内容

对象的创建

对象创建有两种方式，构造函数模式和字面量模式。

字面量模式

var obj = {
  name: 'bry',
  age: '22',
  sayName: function() {
    console.log("my name is" + this.name);
  }
}

构造函数模式

使用Object或者使用自定义构造函数来初始化对象

var obj = new Object();
obj.name = 'bry';
obj.age = 22;
obj.sayName = function(){
  console.log("my name is",this.name);
}

对象的访问

属性访问

属性访问方式也有点访问和中括号访问

obj.name;
obj[name];
name = "age";
obj['name'];

方法访问

方法的访问主要是为了执行该对象中的方法，需要按照函数调用的方式去使用

//以下执行结果不一样
obj.sayName;
obj.sayName();//方法的使用

遍历对象中的属性

for..in用于遍历数组或者对象的属性

for(var key in obj){
	var value=obj[key];
}

删除对象中属性

只能删除对象的自有属性

delete obj.age;
delete obj['name'];

检测属性

in

检测某属性是否是某对象的自有属性或者是继承属性

var obj = {
  name: 'bry',
  age: 18,
  school: 'xx大学'
}
//in运算符的左侧为属性名称，右侧为对象
console.log('name' in obj); //true
console.log('age' in obj);  //true
console.log('gender' in obj); //false
//如果用in判断一个属性存在，这个属性不一定是obj的，它可能是obj继承得到的,如：
'toString' in obj;  //  true
因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以obj也拥有toString属性。

Object.prototype.hasOwnProperty()

检测给定的属性是否是对象的自有属性，对于继承属性将返回false

var book = {
  name: 'XX-code',
  date: '2021-08-26',
  page: 87,
  author: 'bry',
  _year: 2021,
  price: 59,
  content: '“免费”不是最重要的，“源代码公开”才是',
  sound: function() {
      console.log(this.content);
  }
}
console.log(obj.hasOwnProperty('name')); //true
console.log(obj.hasOwnProperty('page'));  //true
console.log(obj.hasOwnProperty('toString')); //false,toString为继承属性
console.log(obj.hasOwnProperty('gender')); //false

Object.prototype.propertyIsEnumerable()

propertyIsEnumerable()是hasOwnProperty()的增强版，除了是自身属性外，还要求是可枚举属性，即我们创建的属性。

var book = {
  name: 'XX-code',
  date: '2021-08-26',
  page: 87,
  author: 'bry',
  _year: 2021,
  price: 59,
  content: '“免费”不是最重要的，“源代码公开”才是',
  sound: function() {
      console.log(this.content);
  }
}
console.log(book.propertyIsEnumerable('page'));//true
console.log(book.propertyIsEnumerable('toString'));//false

Object原型属性及方法(原型方法，实例可以调用的方法)

在Object的构造函数的原型对象中的属性和方法都可以被Object构造函数的实例所继承。

Object原型中的所具有的任何属性和方法也同样存在于其他对象中，任何对象继承自Object。

Object原型中常用的方法：

constructor

保存用户创建当前对象的函数，与原型对象对应的构造函数

hasOwnProperty(propertyName)

检查给定的属性名是否是对象的自有属性

propertyIsEnumerable(propertyName)

检查给定的属性在当前对象实例中是否存在

valueOf()

返回对象的字符串，数值，布尔值的表示

toLocaleString()

返回对象的字符串表示，该字符串与执行环境的地区对应

toString()

返回对象的字符串表示

isPrototypeOf(object)

检查传入的对象的原型

深入理解对象-定义属性

ECMAScript中有两种属性：数据属性、访问器属性。

数据属性特性

[[Configurable]]

表示是否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性(属性直接定义在对象中，默认为true)。当为false时，不能重新定义不能使用delete删除。

[[Enumerable]]

表示能否通过for-in循环返回属性。(属性直接定义在对象中，默认为true)

[[Writable]]

表示能否修改属性的值。(属性直接定义在对象中，默认为true)

[[Value]]

包含这个属性的数据值

Object.defineProperty()

Object.defineProperties()

定义新属性或修改原有的属性

//修改属性默认的特性
Object.defineProperty(book, "name", {writable: false})

Object.defineProperties(book, {
  name: {
    configurable: false,
    writable: false,
    enumerable: true
  },
  page: {
    value: 89,
    configurable: false,
    writable: true,
    enumerable: true
  }
});

//读取属性的特性
console.log(Object.getOwnPropertyDescriptor(book, "name"));

console.log(Object.getOwnPropertyDescriptors(book));

读取属性的特性

Object.getOwnPropertyDescriptor()

该方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

Object. getOwnPropertyDescriptors()

所指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。

//读取属性的特性
console.log(Object.getOwnPropertyDescriptor(book, "name"));

console.log(Object.getOwnPropertyDescriptors(book));

访问器属性特性

[[Configurable]]

表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为false

[[Enumerable]]

表示能否通过for-in循环返回属性,默认为false

[[Get]]

在读取属性时调用的函数,默认值为undefined

[[Set]]

在写入属性时调用的函数,默认值为undefined

访问器属性不能直接定义，要通过Object.defineProperty()这个方法来定义。

var book = {
  name: 'XX-code',
  date: '2021-08-26',
  page: 87,
  author: 'bry',
  _year: 2021,
  price: 59,
  content: '“免费”不是最重要的，“源代码公开”才是',
  sound: function() {
      console.log(this.content);
  }
}
Object.defineProperty(book, 'year', {
  get: function() {
    return this._year;
  },

  set: function(newYear) {
    if(newYear !== this._year) {
      this._year = newYear;
    }
  }
});
// 测试访问属性中的get，set方法
console.log('未修改的year:' + book.year);
book.year = 1998;
console.log('修改后的year:' + book.year);

在一个对象（book）中设置一个私有属性(_year:开头下划线代表私有属性)，再为这个对象设置访问器属性year（本身还未在对象中定义），当book.year进行修改时触发set函数，通过这个函数可以进行数据的操作，比如数据的判断赋值等一系列操作，从而实现数据的双向绑定。这个原理是vue的本质原理。vue是数据驱动框架，当数据发生改变的时候，视图自动更新。

对象序列化

对象序列化是指将对象的状态转换为字符串，也可以反序列化，将字符串还原为对象函数。

RegExp，Error对象，undefined值不能序列化和反序列化。

JSON.stringify(obj) 将对象序列化为JSON字符串,只能序列化对象可枚举的自有属性

JSON.parse(jsonStr) 反序列化

var book = {
  name: 'XX-code',
  date: '2021-08-26',
  page: 87,
  author: 'bry',
  _year: 2021,
  price: 59,
  content: '“免费”不是最重要的，“源代码公开”才是',
  sound: function() {
      console.log(this.content);
  }
}
// 将对象转换为JSON字符串
var str = JSON.stringify(book)
console.log(str);
// 将JSON字符串转换为对象
console.log(JSON.parse(str));