Object 笔记

console.dir(Object)

Codepen:
https://codepen.io/MonguDykrai/pen/aQMmWv
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

Object.freeze()

这个方法返回传递的对象，而不是创建一个被冻结的副本。

const obj = {a: 1}
const obj2 = Object.freeze(obj)

obj.a = 2
console.log(obj.a) // 1

console.log(obj == obj2) // true

https://codepen.io/MonguDykrai/pen/KrYmyw
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

Object.seal()

不能做新属性的添加及旧属性的删除操作，只能做旧属性的修改。

const obj = {a: 1}

Object.seal(obj)

obj.a = 2

console.log(obj) // {a: 2}

obj.b = 3

console.log(obj) // {a: 2}

delete obj.a
console.log(obj) // {a: 2}

https://codepen.io/MonguDykrai/pen/PxrxLY
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal

Object.prototype.toString()

By default, the toString() method is inherited by every object descended from Object. If this method is not overridden in a custom object, toString() returns "[object type]", where type is the object type.

function Dog(name, breed, color, sex) {
  this.name = name;
  this.breed = breed;
  this.color = color;
  this.sex = sex;
}

theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female');

console.log(theDog.toString()) // "[object Object]"

function Cat(name) {
  this.name = name;
}

Cat.prototype.toString = function () {
  return this.name;
}

theCat = new Cat('Kitty');

console.log(theCat.toString()) // "Kitty"

Codepen: https://codepen.io/MonguDykrai/pen/pQYNzv

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

Object.keys

const stu = {name: 'jack', age: 18, gender: 'male'}
const keys = Object.keys(stu)
console.log(keys)

Codepen: https://codepen.io/MonguDykrai/pen/bQZYMR

in operator

// Arrays
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
console.log(0 in trees) // true
console.log('bay' in trees) // false
console.log('length' in trees) // true
console.log(Symbol.iterator in trees) // true

// Predefined objects
console.log('PI' in Math) // true

// delete
var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
delete mycar.make;
console.log('make' in mycar) // false

var trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple');
delete trees[3];
console.log(3 in trees) // false ( empty element )

// undefined
var mycar = {make: 'Honda', model: 'Accord', year: 1998};
mycar.make = undefined;
console.log('make' in mycar) // true

var trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple');
trees[3] = undefined;
console.log(3 in trees) // true

// The in operator returns true for properties in the prototype chain.
console.log('toString' in {}) // true

// Custom objects
var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
console.log('make' in mycar) // true

var color2 = 'coral';
console.log('length' in color2) // Uncaught TypeError: Cannot use 'in' operator to search for 'length' in coral

https://codepen.io/MonguDykrai/pen/mQgmEK
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in

getter

Note the following when working with the get syntax:

• It can have an identifier which is either a number or a string;
• It must have exactly zero parameters;
• It must not appear in an object literal with another get or with a data entry for the same property ({ get x() { }, get x() { } } and { x: ..., get x() { } } are forbidden);

It can have an identifier which is either a number or a string

const obj1 = {
  get 1() {return '1'},
  get b() {return 'b'}
}

console.log(obj1[1])
console.log(obj1.b)

https://codepen.io/MonguDykrai/pen/JeVeOm

It must have exactly zero parameters

const obj1 = {
  get a(b, c) {} // invalid
}

https://codepen.io/MonguDykrai/pen/mQgQwN

It must not appear in an object literal with another get or with a data entry for the same property

const obj1 = {
  get x() {}, // 会被覆盖
  get x() {}
}

console.log(obj1)

const obj2 = {
  get x() {}, // 会被覆盖
  x: 'x',
}

console.log(obj2)

https://codepen.io/MonguDykrai/pen/NEmEyb

A getter can be removed using the delete operator

const obj1 = {
  get x() {return 'x'}
}

console.log(obj1.x)

console.log(delete obj1.x)

console.log(obj1.x)

https://codepen.io/MonguDykrai/pen/NEmEyb

Using a computed property name

var expr = 'foo';

var obj = {
  get [expr]() { return 'bar'; }
};

console.log(obj.foo); // "bar"

https://codepen.io/MonguDykrai/pen/RqOqEN

参考资料：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

Object.assign

Object.defineProperty

《JavaScript教程》（Object.defineProperty）
Object.defineProperty ( MDN )

Error - getter ( 调用栈溢出 )

image.png

https://codepen.io/MonguDykrai/pen/ZmdqXd

Error - setter ( 调用栈溢出 )

image.png

https://codepen.io/MonguDykrai/pen/LXKgJx

getter

不写 return 返回值为 undefined ( 默认值 )

Object.defineProperty_getter_return-1.gif

https://codepen.io/MonguDykrai/pen/LXKXPj

setter

不需要写 return，联想 void set() {}

image.png

https://codepen.io/MonguDykrai/pen/rQEQOL

双向绑定案例

<input type="text" id="txt">
<span id="show"></span>

<script>
var obj = {}

Object.defineProperty(obj, 'txt', {
  get: function () {
    // return this.txt = this._txt
  },
  set: function (newValue) {
    document.getElementById('txt').value = newValue
    document.getElementById('show').innerHTML = newValue
    // this._txt = newValue
  }
})

document.addEventListener('keyup', function (e) {
  obj.txt = e.target.value
})
</script>

双向绑定案例-1.gif

https://codepen.io/MonguDykrai/pen/wQLxVK