返回

关于对象

开头

因为js特性的原因，所以创建对象有很多中形式，各自有各自的优缺点/对应使用的场景，而且关于对象也会涉及到原型等比较重要的知识，所以总结一下

正文

关于js对象

定义

属性类型

数据属性的4个描述行为的特性

let sx = {
  name: "sx",
  age: 22,
};
// 通过Object.defineProperty来管理目标对象的属性行为
// 添加对sx对象的name属性的拦截器
Object.defineProperty(sx, "name", {
  // 定义能否delete删除该属性 默认为true
  configurable: false,
  // 定义能否通过forin循环到该属性，默认为true
  enumerable: false,
  // 定义能否修改该属性，默认为true
  writable: false,
  // 如果这里定义，会覆盖初始化对象时的值
  // value:"wade"
});
// 即使做出了修改/删除的操作，但无效
sx.name = "shuaxin";
delete sx.name;
console.log(sx);
for (let key in sx) {
  console.log(`${key}=${sx[key]}`);
}

访问器属性(属性的描述符)

let sx = {
  name: "shuaxin",
  age: 0,
  // _的属性表示该属性只能通过对象方法来访问
  _sex: "女",
};
// 创建属性拦截器
Object.defineProperty(sx, "sex", {
  // 当读取sex属性的值时，触发，返回_sex的值
  get() {
    console.log(this._sex);
    return this._sex;
  },
  // 当对sex属性进行写入操作时触发
  set(newVal) {
    // 判断_sex和sex是否一致，否在做修改
    if (this._sex !== newVal) {
      this._sex = newVal;
    }
  },
});
sx.sex = "男";

定义多个属性

let obj = {
  name: "shuaxin",
  age: 22,
  _sex: "男",
};
Object.defineProperties(obj, {
  name: {
    configurable: false,
    enumerable: false,
    writable: false,
  },
  age: {
    configurable: false,
    enumerable: false,
    writable: false,
  },
  sex: {
    get() {
      console.log(this._sex);
      return this._sex;
    },
    // 当对sex属性进行写入操作时触发
    set(newVal) {
      // 判断_sex和sex是否一致，否在做修改
      if (this._sex !== newVal) {
        this._sex = newVal;
      }
    },
  },
});

关于创建对象的各种方式（下面按创建对象实例后能否识别对象类型来划分）

无法识别对象类型的

无法识别对象类型的表现为，typeof的结果都是Object

字面量创建

let obj = {
  name: "obj",
};

使用object构造函数创建

let obj = new Object();
obj.name = "obj";

工厂模式创建

function createObj(name) {
  let obj = new Object();
  obj.name = name;
  return obj;
}
let obj = createObj("obj");

寄生构造函数模式

function Person(name) {
  let obj = new Object();
  obj.name = name;
  return obj;
}
let sx = new Person("sx");

稳妥构造函数模式

function Person(str) {
  let name = str;
  let obj = new Object();
  obj.getName = function () {
    return name;
  };
  obj.setName = function (str) {
    name = str;
  };
  return obj;
}
let sx = Person("sx");
console.log(sx.name); //undefined
console.log(sx.getName()); //sx

可以识别对象类型的

表现为可以使用instanceof来判断具体的类型，比如

let obj = new Object();
console.log(typeof obj); //object
function Person(name) {
  this.name = name;
}
let sx = new Person("sx");
console.log(sx instanceof Person); //true

自定义构造函数创建

function Person(name) {
  this.name = name;
}
let shuaxin = new Person("shuaxin");

使用原型创建

function Person() {}
Person.prototype.name = "shuaxin";
function Person(name) {
  this.name = name;
}
Person.prototype.sayHi = function () {
  console.log(`你好我是${this.name}`);
};
function Person(name) {
  this.name = name;
  if (typeof this.sayhi !== "function") {
    Person.prototype.sayhi = function () {
      console.log(`大家好，我是${this.name}`);
    };
  }
}
let shuaxin = new Person("shuaxin");

关于对象的一些api

Object.assign(target,…source)

const man = {
  name: "shuaxin",
};
const sex = {
  sex: "男",
};
let res = Object.assign(man, sex);
console.log(man); // {name:"shuaxin",sex:"男"}
console.log(res); // {name:"shuaxin",sex:"男"}

Object.create(proto,{propertiesObject})

let man = {
  sex: "男",
};
let sx = Object.create(man, {
  // 注：这里如果不设置枚举属性为true，默认为false，即不能被forin遍历到
  age: {
    value: 22,
  },
  name: {
    value: "shuaxin",
  },
});
console.log(sx); //{name:"shauxin",age:22}
console.log(sx.__proto__); //{sex:"男"}

Object.entries(target)

let sx = {};
Object.defineProperties(sx, {
  name: {
    value: "shuaxin",
    enumerable: true,
  },
  idCard: {
    value: "199x-x-x-x",
    enumerable: false,
  },
});
console.log(Object.entries(sx)); //[["name", "shuaxin"]]

Object.freeze(target)/Object.isFrozen(target)/ Object.isExtensible(targst)

let sx = {
  name: "shuaxin",
};
Object.freeze(sx);
sx.name = "update";
sx.sex = "男";
delete sx.name;
console.log(sx); //{name:"shuaxin"}
console.log(Object.isFrozen(sx));

Object.fromEntries(obj)

let list = [
  ["name", "shuaxin"],
  ["sex", "男"],
];
let map = new Map([
  ["name", "shuaxin"],
  ["sex", "男"],
]);
console.log(Object.fromEntries(list)); //{name: "shuaxin", sex: "男"}
console.log(Object.fromEntries(map)); //{name: "shuaxin", sex: "男"}

Object.getOwnPropertyDescriptor(obj)/Object.getOwnPropertyDescriptors(obj)

let shuaxin = {
  name: "shuaxin",
};
// {value: "shuaxin", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(shuaxin, "name"));

let sx = {
  name: "shuaxin",
  sex: "男",
};
// { name: {value: "shuaxin", writable: true, enumerable: true, configurable: true}, sex: {…}}
console.log(Object.getOwnPropertyDescriptors(sx));

Object.values(target)

const SEX = Symbol();
let shuaxin = {
  [SEX]: "男",
  name: "shuaxin",
};
console.log(Object.values(shuaxin));

Object.getOwnPropertyNames(target)/Object.getOwnPropertySymbols(target)/Object.keys(target)

const sex = Symbol("sex");
let sx = {
  [sex]: "男",
};
Object.defineProperties(sx, {
  name: {
    value: "shuaxin",
    enumerable: true,
  },
  idCard: {
    value: "199x-x-x-x",
    enumerable: false,
  },
});
// {name: "shuaxin", idCard: "199x-x-x-x", Symbol(sex): "男"}
console.log(sx);
// ["name", "idCard"]
console.log(Object.getOwnPropertyNames(sx));
// [Symbol(sex)]
console.log(Object.getOwnPropertySymbols(sx));
// ["name"]
console.log(Object.keys(sx));

Object.getPrototypeOf(target)

let man = {
  sex: "男",
};
let sx = Object.create(man, {
  name: {
    value: "shuaxin",
  },
});
// {sex: "男"}
console.log(Object.getPrototypeOf(sx));
// 同上
console.log(sx.__proto__);

Object.is()

Object.seal(target)/Object.isSealed(target)

Object.preventExtensions(target)/Object.isExtensible(target)

let sx = {
  name: "shuaxin",
};
Object.preventExtensions(sx);
sx.name = "update";
sx.sex = "男";
// {name: "update"}
console.log(sx);
delete sx.name;
// {}
console.log(sx);

Object原型上的一些api

isPrototypeOf

let man = {
  sex: "男",
};
let sx = Object.create(man);
// true
console.log(man.isPrototypeOf(sx));

hasOwnProperty

let man = {
  sex: "男",
};
let sx = Object.create(man, {
  name: {
    value: "shuaxin",
  },
});
// false
console.log(sx.hasOwnProperty("sex"));
// true
console.log(sx.hasOwnProperty("name"));

propertyIsEnumerable

上一篇
demo-cli
下一篇
关于JWT认证