js面向对象集合

面向对象

创建自定义对象

/**
 * 创建自定义对象
 *  对象字面量
 *  工厂模式 new Object()
 *  构造函数
 */
// 创建1 - 对象字面量
var obj1 = {}
var obj2 = {
  name: 'falcon',
  age: 21,
}
var obj3 = {
  name: 'alice',
  age: 21,
  detail: {
    teacher: 'rose',
    lesson: 'Chinese',
  },
  showName: function () {
    console.log(this.name)
  },
}
/**
 * 对象字面量 vs json
 * json中的属性一定要用双引号引起来；对象字面量可以省略
 * json中很少放函数
 * json和对象字面量都没有length属性，不可for循环遍历
 * json的遍历使用for...in
 */
for (let v in obj2) {
  console.log(obj2[v])
}
// 创建2 - 工厂模式(创建的对象都是object类型，导致无法区分不同的对象)
function person(name, age, sex) {
  var obj = new Object()
  obj.name = name
  obj.age = age
  obj.sex = sex
  obj.showName = function () {
    console.log(this.name)
  }
  return obj
}
var obj4 = person('alice', 21, '女')
console.log(obj4)
console.log(typeof obj4)
// 创建3 - 构造函数
/**
 * 主要用来创建和初始化对象，和new使用才有意义
 * 主要用来将对象公共的属性和方法抽取出来
 * 和普通函数的区别：
 *  书写时首字母一般大写
 *  普通函数直接调用；构造函数使用new调用
 *  this指向不同：
 *    以函数(包括普通函数、定时器函数、立即执行函数)的形式调用时，this永远指向window
 *    以方法的形式调用，this指向调用方法的那个对象
 *    以构造函数的形式调用，this指向实例对象
 */
function fun(name) {
  this.name = name
  this.sayHi = function () {
    console.log(`${name},great！`)
  }
}
var obj5 = new fun('jerry')
/**
 * 静态成员 - 在在构造函数本身添加的成员
 * 实例成员 - 在构造函数内部的this上添加的成员
 * 一个构造函数称为一个 类
 * 通过一个构造函数创建的对象，称为该类的 实例
 */
function demo(name, age, sex) {
  name = 'falcon'
  age = 21
  console.log(name)
  // console.log(sex) 报错，访问不到
  var obj6 = new Object()
  obj6.sex = sex
  return obj6
}
demo()
var res = new demo('alice', 22, '男')
console.log(res.sex)

对象的基本操作

/**
 * 对象的基本操作
 */
// 创建
var obj = new Object()
// 添加属性
obj.name = 'falcon'
obj.age = 21
obj.sex = '女'
// 获取对象属性
console.log(obj.name)
console.log(obj['sex'])
// 修改对象属性
obj.name = 'alice'
console.log(obj)
// 删除对象属性
delete obj.sex
console.log(obj)
// in - 判断对象中是否有某个属性
console.log('name' in obj)
// 遍历：for...in   for...of遍历数组和map对象
for (let v in obj) {
  console.log(obj[v])
}

浅拷贝和深拷贝

/**
 * 浅拷贝 - 只拷贝最外一层数据，拷贝引用的时候，属于传地址
 * 深拷贝 - 不同层级都拷贝
 */
// 浅拷贝实现1 - for...in
var obj = {
  name: 'falcon',
  age: 21,
  info: {
    lesson: 'Chinese',
  },
}

var copyObj = {}
for (let v in obj) {
  copyObj[v] = obj[v]
}
copyObj.name = 'alice'
copyObj.info.lesson = 'Math'
console.log(obj) // { name: 'falcon', age: 21, info: { lesson: 'Math' } }
console.log(copyObj) // { name: 'alice', age: 21, info: { lesson: 'Math' } }
// 浅拷贝实现2 - Object.assign()
var copyObj1 = Object.assign({}, obj)
console.log(copyObj1)
// 将多个对象拷贝到一个新的对象
var obj1 = {
  name: 'falcon',
  age: 28,
}
var obj2 = {
  name: 'alice',
  age: 22,
  city: 'Beijing',
}
var copyObj2 = Object.assign({}, obj1, obj2)
console.log(copyObj2) //{ name: 'alice', age: 22, city: 'Beijing' }
// 将一个对象copy到另一个对象
var obj3 = {
  name: 'alice',
  sex: '女',
}
var obj4 = {
  name: 'jerry',
  lesson: 'Chinese',
  hobby: 'eating',
}
var copyObj3 = Object.assign(obj3, obj4)
console.log(copyObj3) //{ name: 'jerry', sex: '女', lesson: 'Chinese', hobby: 'eating' }
// 深拷贝的实现 - for...in递归(对拷贝后的修改不会影响原对象，是对原对象的完全复刻)
var deepObj = {
  name: 'falcon',
  age: 21,
  color: ['red', 'yellow', 'green'],
  info: {
    desc: 'hello vue',
  },
}

function deepCopy(newObj, oldObj) {
  for (let v in oldObj) {
    let item = oldObj[v]
    if (item instanceof Array) {
      newObj[v] = []
      deepCopy(newObj[v], item)
    } else if (item instanceof Object) {
      newObj[v] = {}
      deepCopy(newObj[v], item)
    } else {
      newObj[v] = item
    }
  }
  return newObj
}

var newDeep = {}
console.log(deepCopy(newDeep, deepObj))
newDeep.name = 'alice'
newDeep.color[2] = 'pink'
newDeep.info.desc = 'hello react'
console.log(newDeep)
console.log(deepObj)

对象冻结

/**
 * Object.freeze()
 * 一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值
 * 此外，冻结一个对象后该对象的原型也不能被修改
 * freeze() 返回和传入的参数相同的对象
 */
var obj = {
  name: 'falcon',
  age: 21,
  color: ['red', 'yellow', 'green'],
  info: {
    desc: 'hello vue',
  },
}
Object.freeze(obj)
obj.name = 'alice'
console.log(obj.name) //falcon