JS的面向对象、对象属性的操作

1. 创建对象的方式

// new操作符创建
var obj = new Object()
obj.name = "hgf"
obj.age = 20
obj.height = 1.80

// 字面量形式
var obj = {
  name: "kobe",
  age: 18,
  height: 1.98
}

2.对对象的属性的操作

对对象的属性操作有一个API：

属性描述符：Object.defineProperty 对对象属性进行添加或者修改

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象现有的属性，并返回此对象

Object.defineProperty(obj, prop, descriptor)

接收的三个参数：

obj要定义属性的对象；

prop要定义或修改的属性的名称或Symbol；

descriptor要定义或修改的属性描述符；

返回值：被传递给函数的对象

属性描述符分为有两种：数据属性描述符、存取属性描述符

 

数据属性描述符

var obj = {
  name: "kobe",
  age: 18,
  height: 1.98
}

// 数据属性描述符
Object.defineProperty(obj, "address", {
	// 很多配置
  value: "广东省",
  // false时，不可删除  修改   后面也不可以通过Object.defineProperty重新定义
  configurable: false,
  // 该特性配置对应的属性（address）是否可以枚举
  enumerable: true,
  // 该特性配置对应的属性是否可以修改
  writable: false
})

delete obj.name  
console.log(obj.name)  // underfined
delete obj.address   // 对obj定义上面的属性描述后 不可删除obj里面的address属性
console.log(obj.address)  // 广东省

字面量创建对象时，没有使用属性描述符来定义，但是也是具备对应属性的,且有默认值

// 属性赋值的值

value: 赋值时的value

// 定义属性是否可配置

configurable: true

// 定义属性是否可枚举

enumerable: true

// 定义属性是否可修改

writable: true

但是通过Object.defineProperty定义一个对象的属性时，上面的配置都默认为false

存取属性描述符

// 存取属性描述符
// 1. 隐藏某一个私有属性不希望直接被外界使用和赋值
// 2. 如果希望截获某一个属性的访问和设置值的过程时，也会使用存取属性描述符
var obj = {
  name: "kobe",
  age: 18,
  _address: "广东省"
}

Object.defineProperty(obj, "address", {
	enumerable: true,
  configurable: true,
  get: function() {
    foo()
    return this._address
  },
  set: function(value) {
    bar()
    this._address = value
  }
})

console.log(obj.address)  // 广东省

obj.address = "上海市"
console.log(obj.address)  // 上海市

function foo(){
  console.log("获取了一次address的值")
}
function bar(){
  console.log("设置了address的值")
}

3. 定义多个属性描述符

 开发中默认下划线开头的参数或方法认为时私有方法， 不希望直接访问或调用

var obj = {
  _age: 18,
  _eating: function() {
    
  }
}
Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "gaofeng"
  },
  age: {
    configurable: true,
    enumerable: true,
    get: function () {
      return this._age
    },
    set: function (value) {
      this._age = value
    }
  }
})

console.log(obj) // {_age: 18, _eating:[Function: _eating], name: "gaofeng} 
                 // 看不到age
                 // 但是直接拿是可以拿到的
console.log(obj.age)  // 18

4. 创建对象方案-工厂模式

function createPersion(name, age, height, address) {
  var p = {}
  p.name = name;
  p.age = age;
  p.height = height;
  p.address = address;
  
  p.eating = function() {
    console.log(this.name + "在吃东西")
  }
  
  return p
}
// 工厂模式的缺点（获取不到对象最真实的类型）
// 即拿不到对象里面的属性类型
var p1 = createPersion("gaofeng", 20, 1.80, "惠州市")

工厂模式的缺点（获取不到对象最真实的类型）

5. 认识构造函数

构造函数的首字母一般大写

function Person() {
  
}

var p1 = new Person()
var p2 = new Person()

console.log(p1)   // Person{}

new操作符调用的作用

1. 在内存中创建一个新的对象

2. 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性

3. 构造函数内部的this，会指向创建出来的新对象

4. 执行函数的内部代码

5. 如果构造函数没有返回非空对象，则会返回创建出来的新对象

缺点：它在于我们需要为每个对象的函数去创建一个函数对象实例 ， 对内存消耗大