JavaScript 基础系列之对象（五）

炳子
206 阅读4分钟

介绍

在 JavaScript 中，几乎“所有事物”都是对象，即万物皆对象。所有JavaScript除了原始值都是对象。

  • 布尔值是对象（new 定义）
  • 数字是对象（new 定义）
  • 字符串是对象（new 定义）
  • 日期是对象是对象
  • 正则表达式是对象
  • 算术是对象
  • 数组是对象
  • 函数是对象
  • 对象永远是对象
JavaScript原始值
  • string
  • number
  • boolean
  • null
  • undefined
对象是包含变量的变量

对象也是变量。但是对象能够包含很多值。 格式： 键(名称): 值

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

命名的值（键、名称）被称为属性

创建对象

字面量创建

使用对象文字，您可以在一条语句中定义和创建对象。
对象文字指的是花括号 {} 中的名称:值对。

var obj = {
    name: '张三',
    age: 18
}
console.log(typeof obj) // object
关键词 new 创建
var obj = new Object()
obj.name = '张三'
obj.age = 18
console.log(obj) // {name: "张三", age: 18}

对象是易变的

var obj = {
    name: '张三',
    age: 18
}
var b = obj
b.name = '李四'
console.log(b.name) // 李四
console.log(obj.name) // 李四

image.png

解决方法：

  • 对象：assign
  • 数组：slice
  • 使用...赋值新变量， 数组对象皆可
  • JSON.parse(JSON.stringify(obj))
var obj = { name: '张三', age: 18 }
var b = Object.assign( {}, obj) 
b.name = '李四'
console.log(b.name)
console.log(obj.name)

image.png

属性

属性指的是与 JavaScript 对象相关的值。可以被修改、删除、添加。

访问属性
var obj = { name: '张三', age: 18 }

// 1、obj.property
obj.name

// 2、obj["property"]
obj['name']
遍历对象的属性

for...in 遍历对象属性。

var obj = { name: '张三', age: 18 }
for (var key in obj) {
    console.log(key, obj[key])
}

image.png

添加属性
var obj = { name: '张三', age: 18 }
obj.sex = '男'
obj['phone'] = '125245'
console.log(obj) // {name: "张三", age: 18, sex: "男", phone: "125245"}
删除属性

delete 删除对象属性。
delete 关键词不会删除被继承的属性，但是如果您删除了某个原型属性，则将影响到所有从原型继承的对象。

var obj = { name: '张三', age: 18 }
delete obj.name
console.log(obj) // {age: 18}

对象方法

JavaScript 方法是能够在对象上执行的动作。

this 关键词

this 指的是拥有该 JavaScript 代码的对象。
在函数中使用时，this 是“拥有”该函数的对象。
this 是关键词，不是变量，无法改变this的值。

访问对象方法
var obj = { name: '张三', age: 18, fnc: function() {console.log(this.name)} }

// object.methodName()
obj.fnc() // 张三
其他方法
// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)

// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

// 以数组返回所有属性
Object.getOwnPropertyNames(object)

// 以数组返回所有可枚举的属性
Object.keys(object)

// 访问原型
Object.getPrototypeOf(object)

// 阻止向对象添加属性
Object.preventExtensions(object)

// 如果可将属性添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（而不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)

属性元数据

writable : true      // 属性值可修改
enumerable : true    // 属性可枚举
configurable : true  // 属性可重新配置

对象访问器

Getter 和 Setter 允许您定义对象访问器（被计算的属性）。

Getter (get关键词)
var obj = { name: '张三', age: 18 }
// 使用 getter 来赋值来自对象的数据
var b = obj.name
console.log(b) // 张三
Setter (set关键词)
var obj = { name: '张三', age: 18, sex: '' }
// 使用 setter 来设置对象属性的值
obj.sex = '女'
console.log(obj) // {name: "张三", age: 18, sex: "女"}
函数中的 get 和 set
var obj = {
    name: '张三',
    age: 18,
    sex: '',
    get getName() {
        console.log('它的名字是：' + this.name)
        return '它的名字是：' + this.name
    },
    set setSex(sex) {
        this.sex = sex
        console.log(this.sex)
    }
}
obj.setSex = 20 // 20
obj.getName() // 它的名字是：张三
defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
三个参数：要定义属性的对象、要定义或修改的属性的名称、要定义或修改的属性的内容。

var obj = {name: '张三', sex: ''}
Object.defineProperty(obj, 'setSex', {
  set: function(val) {
      this.sex = val
  }
})
Object.defineProperty(obj, 'getName', {
  get: function() {
      console.log('name：' + this.name)
  }
})
obj.setSex = '男'
console.log(obj) // {name: "张三", sex: "男"}
obj.getName // name：张三
getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor()  方法返回指定对象上一个自有属性对应的属性描述符。
两个参数：需查找的对象、需查找对象的属性。
返回值:

  • value: 该属性的值
  • writable: 当且仅当属性的值可以被改变时为true
  • get: 获取该属性的访问器函数（getter）
  • set: 获取该属性的设置器函数（setter）
  • enumerable: 当且仅当指定对象的属性描述可以被改变或者属性可被删除时，为true。
  • configurable: 当且仅当指定对象的属性可以被枚举出时，为 true。
var obj = {name: '张三', sex: '男'}
var desc = Object.getOwnPropertyDescriptor(obj, 'name')
console.log(desc) // {value: "张三", writable: true, enumerable: true, configurable: true}
console.log(desc.value) // 张三

对象构造器

创建一种“对象类型”的方法，是使用对象构造器函数。
通过 new 关键词调用构造器函数可以创建相同类型的对象。

function Person (name, age, sex) {
    this.name = name
    this.age = age
    this.sex = sex
}
var p1 = new Person('A', 15, '女')
console.log(p1) // Person {name: "A", age: 15, sex: "女"}
this指向

this 的值，在对象使用时，就是对象本身。
在构造函数中，this 是没有值的。他是新对象的替代物。当新对象被创建时，它就指向新对象。

function Person (name, age, sex) {
    this.name = name
    this.age = age
    this.sex = sex
    console.log(this)
    this.getName = function() {
        console.log('name：' + this.name)
    }
}
var p1 = new Person('A', 15, '女')
console.log(p1) // Person {name: "A", age: 15, sex: "女"}
p1.setSex = function(sex) {
    this.sex = sex
    console.log(this.sex)
}
p1.setSex('男')
p1.getName()

image.png

avatar
文章
阅读
粉丝