javascripe理解对象

最新推荐文章于 2022-09-08 20:00:08 发布

京拾

最新推荐文章于 2022-09-08 20:00:08 发布

阅读量271

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/qq_48109675/article/details/126644117

版权

现实生活中，每一个人都是一个对象。对象有它的属性，如身高和体重，方法有走路或跑步等；所有人都有这些属性，但是每个人的属性都不尽相同，每个人都拥有这些方法，但是方法被执行的时间都不尽相同，本文将从一下方面理解对象。

对象的创建
对象的访问
新增、删除对象中的属性
Obje原型属性及方法详解
检测属性
数据属性
检测属性

1、对象的创建

第一种：字面量模式

定义：对象使用"{}"作为对象的边界，对象是由多个属性组成，属性与属性之间通过","隔开，属性名与属性值通过":"隔开;属性名一般不添加引号（当属性名中出现特殊字符的时候需要添加引号），属性值如果是字符串的一定添加引号。
var person = {
  name: 'zhangsan',
  age: 19,
  gender: '男',
  sayName: function () {
    console.log(this.name); //方法中的this指向当前对象
  }
}
第二种：构造函数模式

定义：使用Object或者使用自定义构造函数来初始化对象
var person2 = new Object()
person2.name = 'larry'
person2.age = 18
person2.gender = '男'
person2.sayName = function () {
  console.log(this.name);
}
console.log(person2)

对象的访问

访问对象中的属性

第一种：点语法对象名.属性名   例：person.name

点后面直接跟的是对象的属性，如果属性存在可以访问到，如果属性不存在，得到undefined

第二种：中括号对象名['属性名']    例：person['name']

访问对象中的方法对象名.方法名()    例：person.sayName（）
var person = {
  name: 'zhangsan',
  age: 19,
  gender: '男',
  sayName: function () {
    console.log(this.name); //方法中的this指向当前对象
  }
}
// 点语法
console.log(person.name);
// 中括号
console.log(person['age']);
person.sayName()

新增、删除、修改对象中的属性

新增：对象名.新的属性名=值

删除：delete 对象名.属性名 / delete 对象名['属性名'] /delete 对象名.方法名

注意：删除只能删除对象的自有属性

（以字面量模式创建的 person为例）
// 3.2删除对象属性——delete
delete person.age
console.log(person);

// 3.3新增属性 实例对象名称.新增对象属性 / 直接赋值
person.height = 1.78
console.log(person);

//3.4 修改
person.name = 'lisi'
console.log(person);

Object原型属性及方法详解

定义：

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，实例都包含一个指向原型对象的内部指针。
在Object的构造函数的原型对象中的属性和方法都可以被Object构造函数的实例所继承
Object原型中的所具有的任何属性和方法也同样存在于其他对象中，任何对象继承自Object

指针关系：

构造函数中有prototype指向——>原型对象
原型对象中有constructor指向——>构造函数
实例对象中有_proto_指向——>原型对象

图解：

Object原型中常用的方法

使用方法：实例对象名.xx方法()

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

hasOwnProperty(propertyName)——检查给定的属性名是否是对象的自有属性

propertyIsEnumerable(propertyName)——检查给定的属性在当前对象实例中是否存在

valueOf()——返回对象的字符串，数值，布尔值的表示

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

toString()——返回对象的字符串表示

isPrototypeOf(object)——检查传入的对象的原型
// 使用构造函数创建实例对象
var obj = new Object()

// 调用原型对象中继承的方法
console.log(obj.toString());
console.log(obj.__proto__.toString());

// 构造函数 Object
console.log(Object);  //[Function: Object]
// 原型对象 Object.prototype
console.log(Object.prototype);  // {}
// 原型对象中的constructor属性  原型对象中的constructor属性指向构造函数
console.log(Object.prototype.constructor);  //[Function: Object]
// 实例__proto__ 指向 原型对象
console.log(obj.__proto__ === Object.prototype);  //true

检测一个属性是否属于某个对象方法

注意：Object.prototype.xxxx说明该方法是原型对象中的方法，可以实例对象名.xxxx调用
第一种：in 检测某属性是否是某对象的自有属性或者是继承属性
语法：‘属性名’in 对象名
var obj = {
  name: 'zhansan',
  age: 19,
  gender: '男'
}

// 1、in 检测自身或继承属性
console.log('name' in obj); //true
console.log('toString' in obj); //true
第二种：Object.prototype.hasOwnProperty() 检测是否为自身属性，继承为false
var obj = {
  name: 'zhansan',
  age: 19,
  gender: '男'
}
console.log(obj.hasOwnProperty('name')); //true
console.log(obj.hasOwnProperty('toString')); //false
第三种：Object.prototype.propertyIsEnumerable() 除了是自身属性外，还要求是可枚举属性，即我们创建的属性。
var obj = {
  name: 'zhansan',
  age: 19,
  gender: '男'
}
console.log(obj.propertyIsEnumerable('name')); //true
console.log(obj.propertyIsEnumerable('toString')); //false

深入理解对象：

ECMAScript中有两种属性：数据属性、访问器属性。这两种属性用于设置属性的高级属性，例如该属性是否可以配置，是否可以读写，是否可以遍历，并且可以通过setter,getter来监听数据的改变。

1、数据属性

例如person.name =‘zhangsan’这属性，我们可以进行设置 name是否可修改、是否可删除、

是否可遍历，当我们对象新增一个数据属性时，后台会默认Configurable 、Enumerable 、Writable 都为true。我们可以通过Object.defineProperty( )手动修改以上的三个属性

Configurable 设置属性是否可以被delete删除掉、在数据属性中默认为true、在访问器属性中默认为false

Enumerable 控制是否可以被forin循环遍历出来（默认取值同上）

Writable 控制属性值是否可以被修改（默认取值同上）

value 属性值

2、Object.defineProperty（）方法

作用：定义新属性或修改原有属性

语法：

注意：当我们创建一个对象并且为对象设置一个属性的时候，该属性默认特性Configurable、Enumerable、Writable默认都为true，value为该属性的值。

例子：
var person = {
  name: 'zhangsan'
}
// 2、使用defineProperty  添加一个新属性并控制属性特性或修改已有属性的属性特性
Object.defineProperty(person, 'age', {
  // 设置是否可以被delete删除掉
  configurable: false,
  // 是否可以被forin循环遍历出来
  enumerable: true,
  // 是否可以修改值
  writable: false,
  // 值
  value: 20
})
// 假设删除
delete person.age
console.log(person.age);
// for-in循环
for (var key in person) {
  console.log(key);
}
// 假设修改值
person.age = '12'
console.log(person.age);
3、Object.defineProperties()方法

作用：定义多个新属性

语法：

例子：
var person = {
  name: 'zhangsan'
}
Object.defineProperties(person, {
  // 身高
  height: {
    configurable: true,
    value: 1.80
  },
  // 性别
  gender: {
    value: '男'
  }
})
console.log(person.height);
console.log(person.gender);
console.log(person);
4、访问器属性

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

四个特性：

Configurable：设置属性是否可以被delete删除掉

Enumerable：控制是否可以被for-in循环遍历出来（默认取值同上）

get：获取属性触发的方法（点语法时触发）

set：在写入属性时调用的函数（新增或修改时触发）

注意：

访问器属性：访问器属性不包含数值，它包含的是一对getter和setter函数

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

例子：访问器属性中Object.defineProperty()方法的使用
var person = {
  // 使用“_”看成内部属性
  _birthDay: 2000,
  age: 1
}
// 新增一个访问属性（birthDay） 根据一个值的变化动态改变另外一个值
Object.defineProperty(person, 'birthDay', {
  // 获取值
  get: function () {
    console.log(this);
    return this._birthDay


  },
  // 设置值
  set: function (newValue) {
    if (newValue != this._birthDay) {
      this._birthDay = newValue
      // console.log(this); //this指向person  因为get set 是person对象的内部函数

    }
  }
})
person.birthDay = 2001
console.log(person._birthDay);