js面向对象

100 阅读2分钟

js面向对象

创建对象的方式

// 创建一个对象, 对某一个事物进行抽象.
// 1.通过new Object() 
var obj = new Object()
obj.name = 'Fhup'
obj.age = 18
obj.run = function() { console.log(this.name, '在run') }

console.log(obj);
obj.run()

// 2.字面量形式
var xx = {
  name: 'fh',
  age: 18
}
console.log(xx);

defineProperty()的学习

// 对对象的属性进行操作
var obj = {
  name: 'Fhup',
  age: 18
}
// 删除对象属性
delete obj.name

// Object.defineProperty()方法会直接在该对象上定义一个新属性,修改这个对象的现有属性,并返回此对象.所以说,此方法不是一个纯函数.会产生副作用

Object.defineProperty(obj, 'height', { //参数 1.那个对象  2.那个属性  3.属性描述符(对象)
  // 很多的配置
  value: 1.88,
  enumerable: true //是否可以进行枚举
})
console.log(obj);

数据属性描述符

// name和age虽然没有使用属性描述符来定义, 但是它们也是具备对应的特性的
// value: 赋值的value
// configurable: true
// enumerable: true
// writable: true
var obj = {
  name: 'Fhup',
  age: 18
}

// 数据属性描述符
Object.defineProperty(obj, 'address', {
  value: '北京市', // address的默认值为undefined

  // false不可配置 (不可删除/不可以定义新的属性描述符) , true 可以配置
  configurable: false, // 默认值为false

  // true 可以进行枚举(for-in/Object.keys()).
  enumerable: true, // 默认值为false
  
  // true 可以进行赋值(写入值)
  writable: true // 默认值为false
})

// 测试configurable的作用
// delete obj.address
// console.log(obj.address);
// Object.defineProperty(obj, 'address', {
//   value: '咸阳市',
//   configurable: true
// })

// 测试enumerable的作用
// console.log(obj);
// console.log(Object.keys(obj));
// for(var key in obj) {
//   console.log(key);
// }

// 测试writable的作用
// obj.address = '宝鸡市'
// console.log(obj);

存取属性描述符

var obj = {
  name: 'Fhup',
  age: 18,
  _address: '北京市'
}

// 存取属性描述符
// 1.隐藏某一个私有属性,不被外界使用和赋值
// 2.截获某一个属性它的设置与访问,也会使用存取属性描述符
Object.defineProperty(obj, 'address', {
  enumerable: true,
  configurable: true,
  set: function(value){
    abc()
    this._address = value // this -> obj
  },
  get(){
    def()
    return this._address
  }
})

console.log(obj.address); // 默认调用get()

obj.address = '宝鸡市' // 默认调用set()
console.log(obj.address)


function abc(){
  console.log('设置一次值');
}
function def(){
  console.log('获取一次值');
}

定义多个属性描述符

var obj = {
  _age: 3, // 以_开头的属性默认为私有属性.(JS没有严格意义上的私有属性)
  // set age(value){
  //   this._age = value
  // },
  // get age(){
  //   return this._age
  // }
}
// 二个参数. 参数1: 那个对象 , 参数2: 属性描述符对象
Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: 'Fhup'
  },
  age: {
    configurable: false,
    enumerable: false,
    set: function(value) {
      this._age = value
    },
    get: function(){
      return this._age
    }
  }
})

console.log(obj);
console.log(obj.name);
obj.age = 18
console.log(obj.age);
console.log(Object.keys(obj));

// set age() 和 get age(){}
// obj.age = 123
// console.log(obj);

获取属性描述符

var obj = {
  _age: 3
}

Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: 'Fhup'
  },
  age: {
    configurable: false,
    enumerable: false,
    set: function(value) {
      this._age = value
    },
    get: function(){
      return this._age
    }
  }
})

// 获取某一个特定属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, 'name'));
console.log(Object.getOwnPropertyDescriptor(obj, 'age'));
// 获取对象所有的属性描述符
console.log(Object.getOwnPropertyDescriptors(obj));

Object的方法对对象属性进行限制

var obj = {
  name: 'Fhup',
  age: 18
}

// 1.禁止对象继续添加新的属性(阻止扩展)
Object.preventExtensions(obj)

obj.height = 1.88
console.log(obj);

// 2.让全部对象的属性不可配置/不可删除(密封起来)
Object.seal(obj) // seal密封

delete obj.age
console.log(obj);

// 3.让属性不可以修改(writable: false)(冻结起来)
Object.freeze(obj) // freeze冻结

obj.name = 'xxx'
console.log(obj.name);