JavaScript对象的创建(超详细学习过程)

发布于:2023-01-22 ⋅ 阅读:(8) ⋅ 点赞:(0) ⋅ 评论:(0)

1. 什么是对象?

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

2、对象的创建:

  1. 字面量方式:
var obj = {
  name:"zhangsan",
  age:12,
  //函数属性
  sayName:function(){
    console.log("my name is ",this.name);
  }
}
  1. 构造函数方式:
var obj = new Object();
obj.name = "terry";
obj.age = 12;
obj.sayName = function(){
  console.log("my name is",this.name);
}

3. 对象的访问

  • 属性访问
    用. 或中括号
obj.name      //'zhangsan'
obj['name']     //'zhangsan'
name = "age"
obj['name']      //12
  • 方法的访问
    方法的访问主要是为了执行该对象中的方法,需要按照函数调用的方式去使用
//以下执行结果不一样
obj.sayName;
obj.sayName();//方法的使用
  • 遍历对象中的属性
    普通的for循环可以遍历数组,但无法遍历对象;使用for…in用于遍历数组或者对象的属性
//创建对象
var obj = new Object();
obj.name = "terry";
obj.age = 12;
obj.sayName = function(){
  console.log("my name is",this.name);
}
//遍历对象
for(var key in obj){
  console.log(key+"----"+obj[key])
}
//输出结果
/*name----terry
age----12
sayName----function(){
  console.log("my name is",this.name);
} */

3.新增删除对象中的属性

只能删除对象的自有属性:

delete obj['name']    //从obj对象中删除name属性
delete obj.sayName     //从obj对象中删除sayName属性

新增属性:

obj.newpropname=”value”

4.Object显示类型转换(强制类型转换)

ECMAScript中可用的强制类型有3种:

Boolean(value):

把给定的值转换成Boolean型;
转换表如下:

数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空的字符串 “”(空字符串)
Number 任何非0的数字 0和NaN
Object 任何对象 Null
Undefined undefined
var obj=null;
console.log(Boolean(obj)); //false
String(value)

​ 把给定的值转换成字符串。

Number(value)

​ 把给定的值转换成数字(可以是整数或浮点数)

5. 检测属性

检测一个属性是否属于某个对象。常用的方式主要有3种:

  • in
    检测某属性是否某对象的自有属性或者是继承属性
var obj={
  name:'lisi',
  age:'18'
}
console.log('name' in obj);  //true
  • Object.prototype.hasOwnProperty()
    检测给定的属性是否是对象的自有属性,对于继承属性将返回false
var obj ={
  name:'篮球',
  prize:'59',
  area:'made in China'
}
console.log(obj.hasOwnProperty('name')); //true
console.log(obj.hasOwnProperty('prize')); //true
console.log(obj.hasOwnProperty('toString')); //false,toString为继承属性 
console.log(obj.hasOwnProperty('team')); //false,obj中没有该属性
  • Object.prototype.propertyIsEnumerable()
    propertyIsEnumerable()是hasOwnProperty()的增强版,除了是自身属性外,还要求是可枚举属性,即我们创建的属性。
在这里插入代码片
```var obj ={
  name:'篮球',
  prize:'59',
  area:'made in China'
}
Object.defineProperty(obj,'team',{
  configurable:true,
  // 设置是否可枚举
  enumerable:false,
  value:'Guangdong'
})
console.log(obj.hasOwnProperty('name')); //true
console.log(obj.hasOwnProperty('prize')); //true
console.log(obj.hasOwnProperty('toString')); //false,toString为继承属性 
console.log(obj.hasOwnProperty('team')); //true,obj中有该属性
console.log(obj.propertyIsEnumerable('team'));//false,team属性不可枚举

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

在Object 的构造函数的原型对象中的属性和方法都可以被Object构造函数的实例所继承。
Object原型的所具有的任何属性和方法也同样存在于其他对象中,任何对象继承自Object。
在这里插入图片描述

Object原型中常用的方法

  • constructor
    保存用户创建当前的对象,与原型对象对应的构造函数
  • hasOwnProperty(‘属性名’)
    检测给定的属性是否是对象的自有属性
  • propertyIsEnumerable(‘属性名’)
    检查给定的属性在当前对象实例中是否存在,是否可枚举
  • valueOf()
    返回对象的字符串,数值,布尔值的表示
  • toLocaleString()
    返回对象的字符串表示,该字符串与执行环境的地区对应,如输出中国地区的时间:
var nowTime = new Date()
console.log(nowTime.valueOf());
console.log(nowTime.toString());
console.log(nowTime.toLocaleString());
//分别输出:
/*
1660132493233
Wed Aug 10 2022 19:54:53 GMT+0800 (中国标准时间)
2022/8/10 下午7:54:53
*/
  • toString()
    返回对象的字符串表示
  • isPrototypeOf(object)
    ​ 检查传入的对象的原型。
    如a.isPrototypeOf(b) ,如果a是b的原型,则返回true。如果b不是对象,或者a不是b的原型,则返回false。

7. 对象的定义属性

1. 数据属性特性
包含一个属性值的位置,这个位置可以读取和写入值。数据属性特性如下:

[[Configurable]]

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

[[Enumerable]]

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

[[Writable]]

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

[[Value]]

​ 包含这个属性的数据值 name:jacky

  • Object.defineProperty(属性所在的对象,属性的名字,一个描述符对象)
    对象是由多个键/值对组成的无序的集合。对象中每个属性可以是任意类型的值。
    定义对象可以使用构造函数或字面量的形式:
    使用Object.defineProperty定义新属性或修改原有的属性:
//语法
Object.defineProperty(obj, prop, descriptor)
//1. obj:必需。目标对象
//2. prop:必需。需定义或修改的属性的名字
//3. descriptor:必需。目标属性所拥有的特性
Object.defineProperty(obj,'name',{
    //设置是否可以被delete删除
   configurable:true,
    //是否可以被for in循环遍历
   enumerable:true,
    //是否可以修改值
   writable:true,
   value:'terry'
})
  • Object.defineProperties()
//语法
//Object.defineProperties(obj, props) 一次性定义多个属性
//1.obj:必需。目标对象
//2.props:该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置
Object.defineProperties(person,{
    //身高
    height:{
        configurable:true,
        value:180
    },
    //性别
    gender:{
        value:"男"
    }
})

2. 读取属性的特性
Object.getOwnPropertyDescriptor()
该方法返回指定对象上一个自有属性对应的属性描述符。(自有属性的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

//语法: 
Object.getOwnPropertyDescriptor(obj, prop)

obj:需要查找的目标对象
prop:目标对象内属性名称

var person = {
    name: '张三',
    age: 18
}

var desc = Object.getOwnPropertyDescriptor(person, 'name'); 
console.log(desc)
//输出结果
//{ value: '张三', writable: true, enumerable: true, configurable: true }

3. 访问器属性特性
访问器属性:这个属性不包含数据值,包含的是一对get和set方法,在读写访问器属性时,就是通过这两个方法来进行操作处理的。
访问器的四个特性:

[[Configurable]]

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

[[Enumerable]]

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

[[Get]]

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

[[Set]]

在写入属性时调用的函数,默认值为undefined
注意:访问器属性不能直接被定义,要通过Object.defineProperty()方法来定义,且特性的默认值数据属性特性的默认值不一样

/** 
 * 访问器属性:访问器属性不包含数值,它包含的是一对getter和setter函数;
 * 访问器属性不能像数据属性一样直接定义,它必须使用Object.defineProperty()方法来定义
 */
var book = {
  _year: 2020, //下划线表示是内部属性,只能通过对象的方法来读写
  editor: 1
};
Object.defineProperty(book, 'year', {
  get: function () {
    return this._year;
  },
  // 若只指定get方法,不指定set方法,那就默认该属性是只读的
  set: function (newYear) {
    if (newYear !== this._year) {
      this._year = newYear
      this.editor ++
    }
  }
});
// 测试访问属性中的get,set方法
console.log('未修改的year:' + book.year);
book.year = 2021;
console.log('修改后的year:' + book.year);
console.log('修改year后的editor:' + book.editor);
// 问器属性可以通过Object.getOwnPropertyDescriptor()查询
console.log(Object.getOwnPropertyDescriptor(book, '_year'));

由此可以想到数据的双向绑定:

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

8. 对象序列化

对象序列化是指将对象的状态转换为字符串,也可以反序列化,将字符串还原为对象函数。
注意:RegExp,Error对象,underfined值不能序列化和反序列化。
JSON.stringify(obj) 将对象序列化为JSON字符串,只能序列化对象可枚举的自有属性

JSON.parse(jsonStr) 反序列化

// 将对象转换为JSON字符串
// {"name":"briup","age":12}
var obj = {
	name:"briup",
	age:12
};
console.log(obj);  
//object类型打印的结果  {name:'briup',age:12}
// 将对象转换为JSON字符串
var json = JSON.stringify(obj);
console.log(json);//string类型的字符串
// 将JSON字符串转换为对象
var obj = JSON.parse(json);
console.log(obj);

//输出结果
/*
{ name: 'briup', age: 12 }
{"name":"briup","age":12}
{ name: 'briup', age: 12 }
*/