JavaScript 对象相关方法整理


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 对象相关方法总结</title>
</head>
<body>

<h1>JavaScript 对象相关方法总结</h1>

<script>
//JavaScript 对象相关方法总结

function Animal(name, color, arrs) {
  this.name = name;
  this.color = color || "yellow";
  this.arrs = arrs;
}

Animal.prototype.run = function() {
  console.log("Animal run");
};

Animal.prototype.multi = ["a", "b", "c"];

function Cat(name, color, arrs, foo) {
  Animal.call(this, name, color, arrs);
  this.name = name;
  this.ids = [1, 2, 3, 4];
  this.foo = foo;
}

Cat.prototype = new Animal();

Cat.prototype.fly = function() {
  console.log("Cat fly");
};

Cat.prototype.progress = 88;

var cat = new Cat("皮特", "red", ["a", "啊", 1], "哈林");
console.log("cat", cat);

// instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
console.log("instanceof Animal", cat instanceof Animal);
console.log("instanceof Cat", cat instanceof Cat);

// isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。
console.log("Animal.prototype.isPrototypeOf(cat)", Animal.prototype.isPrototypeOf(cat));
console.log("Cat.prototype.isPrototypeOf(cat)", Cat.prototype.isPrototypeOf(cat));

// in 判断对象实例是否能够访问某个属性（包括原型链或实例上）
console.log("'fly' in cat", "fly" in cat);
console.log("'fly' in color", "color" in cat);
console.log("'fly' in run", "run" in cat);
console.log("'fly' in eat", "eat" in cat);

// 判断某一个属性是在原型里还是构造函数的实例里
console.log("Cat.hasOwnProperty('progress')", Cat.hasOwnProperty("progress"));
console.log("Cat.hasOwnProperty('color')", Cat.hasOwnProperty("color"));
console.log("Cat.hasOwnProperty('name')", Cat.hasOwnProperty("name"));

//Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或  null。
// Object.setPrototypeOf(cat, Cat.prototype);
//Object.getPrototypeOf() 方法返回指定对象的原型（内部[[Prototype]]属性的值）。
console.log("Object.getPrototypeOf(cat)", Object.getPrototypeOf(cat), Object.getPrototypeOf(cat) === cat.__proto__, Object.getPrototypeOf(cat) === Cat.prototype);
//Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
console.log("Object.create(cat)", Object.create(cat));

// Animal.prototype = Cat.prototype
console.log("Animal.prototype", Animal.prototype);
console.log("Cat.prototype", Cat.prototype);
console.log("cat.__proto__", cat.__proto__);
console.log("Cat.prototype === cat.__proto__", Cat.prototype === cat.__proto__);
console.log("Animal.prototype === cat.__proto__.__proto__", Animal.prototype === cat.__proto__.__proto__);

/*
* Reflect.defineProperty(target, propertyKey, attributes)
* target 目标对象。
* propertyKey 要定义或修改的属性的名称。
* attributes 要定义或修改的属性的描述。
*
* 参数的键	描述	默认值 (attributes)
* configurable	属性能否被删除或者重新定义	false
* enumerable	遍历对象的时候属性是否可见	false
* value	属性值，当设置后不能设置get和set	undefind
* writable	属性能否改变
* get	当获取属性的时候触发	undefind
* set	当设置属性的时候触发	undefind
* */

Object.defineProperty(cat, "name", {
  writable: true,
  value: "山姆",
  configurable: true,
});

console.log(cat.name);

Object.defineProperty(cat, "name", {
  enumerable: false,
  configurable: true,
  get: function getter() {
    console.log("get value");
    return this.value;
  },
  set: function setter(val) {
    console.log("set value", val);
    this.value = val;
  }
});

cat.name = "托尼";
console.log(cat.name);

Object.defineProperties(cat, {
  "name": {
    enumerable: true,
  }
});

/*
* Object.getOwnPropertyDescriptor(obj, prop)
* obj 需要查找的目标对象
* prop 目标对象内属性名称
* */
console.log("getOwnPropertyDescriptors", Object.getOwnPropertyDescriptor(cat, "name"));

console.log("getOwnPropertyDescriptors", Object.getOwnPropertyDescriptors(cat));

// 遍历对象所有可枚举和原型上的方法和属性
for (var key in cat) {
  console.log("key", key);
}

// 返回对象自身可枚举属性组成的数组
console.log("Object.keys", Object.keys(cat));
console.log("Object.keys", Object.values(cat));

/*
*es6 中添加的循环遍历语法；
*支持遍历数组，类数组对象（DOM NodeList），字符串，Map 对象，Set 对象；
*不支持遍历普通对象；
*遍历后输出的结果为数组元素的值；
*可搭配实例方法 entries()，同时输出数组的内容和索引；
* */
for (let [key, value] of Object.entries(cat)) {
  console.log("entries", key, value);
}

var fromEntries = Object.fromEntries([
  ["name", "bar"],
  ["foo", 100]
]);
console.log("fromEntries", fromEntries);

var map = new Map([
  ["name", "bar"],
  ["foo", 100]
]);

console.log(map);
console.log("fromEntries map", Object.fromEntries(map));

var obj1 = {
  name: "hello world"
};

var obj2 = {
  name: "hello world"
};
console.log("Object.is", Object.is(obj1, obj2));

var obj3 = {
  name: "obj 3",
};

var obj4 = {
  name: "obj 4",
  color: "blue",
  arrs: [1, 2, 3]
};
// Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。可以深拷贝一层对象
Object.assign(obj3, obj4);
obj4.color = "pink";
obj4.arrs[0] = 10;
console.log("Object.assign", obj3, obj4);
</script>
</body>
</html>