Object, I met you

what is an object

In life, we often hear the word object, where is your object, have you talked about an object? And so on~~
At work, we still cannot escape the problem of facing objects, so what is an object?
The subject is a person? Yes, you are an object.
Object is an object? That's right, that object is an object.
The object is a movie? Yes, a movie is an object too.
What? ? ? How everything is an object. That's right, everything in the world can be regarded as an object. An object is an abstract concept that can be used to summarize the attributes and methods you describe an object. In life, for example: a car is an object, and a car has color, size, and weight and other properties, methods include start, stop, etc. In the work, a certain class can be planned as an object, and we can plan the properties and methods of this class to this object

object properties

Object.assign()

 1.1 浅拷贝对象 相同的值会被覆盖为新值
 1.2 参数1为接受拷贝的对象，参数2为传递拷贝的对象
 1.3 结果会改变第一个参数对象，同时会返回这个参数对象
```javascript
var aaa = { 'a': 1, 'b': 2 }
var bbb = { 'b': 3, 'c': 4 }
var ccc = { ...aaa, ...bbb }
console.log(aaa)  // {"a":1,"b":2}
console.log(bbb)  // {"b":3,"c":4}
console.log(ccc)  // {"a":1,"b":3,"c":4}

console.log('----------------------')

const target = { a: 1, b: 2 }
const source = { b: 3, c: 4 }
const result = Object.assign(target, source)
console.log(target)  //  { a: 1, b: 3, c: 4 }
console.log(source)  //  {"b":3,"c":4}
console.log(result)  //  {"a":1,"b":3,"c":4}
console.log(target === result) // true
console.log(source === result) // false

```

Note: If it is an extension operator, it will not affect the original object. If it is Object.assign, both the object and the new object will be executed at the new memory address, which will be modified to the new object

Object.create()

1.1 创建一个新对象，新对象继承原来创建的对象
1.2 Object.create() 是一个深拷贝
1.3 Object.create于传统创建对象的区别是在新旧对象之间增加了一层，这样引用地址就是解耦的 obj === newObj 是false 新旧对象之间就互不影响
```javascript
var aaa = {
  a: 1,
  b: 2,
  c: {
    d: 3,
    e: 4
  }
}

var bbb = Object.create(aaa)
console.log(aaa)  // {"a":1,"b":2,"c":{"d":3,"e":4}}
console.log(bbb)  // {}
console.log(bbb.a)  // 1
bbb.a = 2 
console.log(aaa) // {"a":1,"b":2,"c":{"d":3,"e":4}}
console.log(bbb)  // {"a":2}
```
Object.create()  可应用于继承
```javascript
function Person(name) {
  this.name = name;
  this.permission = ["user", "salary", "vacation"];
}

Person.prototype.say = function () {
  console.log(`${this.name} 说话了`);
};

function Staff(name, age) {
  Person.call(this, name);
  this.age = age;
}

Staff.prototype = Object.create(Person.prototype, {
  constructor: {
      // 若是不将Staff constructor指回到Staff, 此时的Staff实例		     zs.constructor则指向Person
      value: Staff,
  },
});

Staff.prototype.eat = function () {
  console.log("吃东西啦～～～");
};
```

Object.is()

 1.1 用于判断两个对象是不是一致
```javascript
Object.is('foo', 'foo') // true
Object.is([], []) // false

Object.is(null, null) // true
Object.is(NaN, NaN) // true

// 特别的：
Object.is(0, -0)            // false
Object.is(+0, -0)           // false
Object.is(0, +0)            // true
Object.is(-0, -0)           // true
Object.is(NaN, 0/0)         // true

```

Object.keys()、Object.values()、Object.entries()、Object.fromEntries()

1.1 Get the key, value, key-value pair, and key-value pair array of the object and convert it into an
object```javascript
let obj = { name: 'ruovan', age: 24 }

console.log(Object.keys(obj)) // ["name","age"]
console.log(Object.values(obj)) // ["ruovan",24]
console.log(Object.entries(obj)) // [["name","ruovan"],["age",24]]

let arr = Object.entries(obj)
console.log(Object.fromEntries(arr)) // {"name":"ruovan","age":24}
```

Object.toString()、Object.toLocaleString()

1.1  对象字符串（每一个对象都有这个方法）

1.2 Use toLocaleString to convert the object to a string according to the locale```javascript
let
date = new Date()

console.log(date.toString()) //  Fri Apr 07 2023 17:11:04 GMT+0800 (中国标准时间)
console.log(date.toLocaleString()) //  2023/4/7 17:11:04

let num = 123456789
num.toLocaleString() // '123,456,789'


let obj = { a: 1, b: 2 }
let arr = [1,2,3]
let str = '123'

obj.toString() // [object Objetc]
arr.toString() // 1,2,3
str.toString() // 123
```

Object.getPrototypeOf()、 Object.setPrototypeOf()、Object.prototype.isPrototypeOf()

1.1 Object.getPrototypeOf()  用于返回指定对象的原型，如果没有则是null
1.2 Object.setPrototypeOf()  用于设置指定对象的原型
1.3 Object.prototype.isPrototypeOf()  用于检测一个对象是否存在于另一个对象的原型链上
```javascript
let obj = {
  name: 'zs',
  age: 20
}

console.log(Object.getPrototypeOf(obj)) // true
console.log(Object.getPrototypeOf(obj) === obj.__proto__) // true
console.log(Object.getPrototypeOf(Object) === Function.prototype) // true

/***
 * getPrototypeOf 作用和 __proto__ 效果一样  但是 __proto__有兼容性问题 在生产环境下 还是用 getPrototypeOf
 * Object 也是构造函数， 因此，返回的是函数的原型对象
 */

console.log('------获取原型-------')

function PersonObj(name, age) {
  this.name = name
  this.age = age
}


function testObj(like) {
  this.like = like
}


PersonObj.prototype.say = function () {
  console.log(this.name + '说话了')
}

const person1 = new PersonObj('zs', 20)
console.log(Object.getPrototypeOf(person1)) // {}
console.log(person1.__proto__) // {}


Object.setPrototypeOf(person1, testObj)

console.log(Object.getPrototypeOf(person1)) 
// function testObj(like){
//   this.like = like
// }


console.log('----设置原型------')


let obj1 = {}
let obj2 = new Object()

console.log(obj1.__proto__.isPrototypeOf(obj2)) // true

/**
 * isPrototypeOf 检测一个对象是不是另一个对象的实例
 * 类似方法还有 instanceof A instanceof B
 */
```

Object.freeze()、Object.isFrozen()、Object.preventExtensions()、Object.seal()、Object.isExtensible()

1.1 Object.freeze() can be used to freeze an object. After freezing, all properties and methods of the object cannot be modified. 1.2 Object.freeze()
freezes a shallow object, and the objects inside the object can be modified.
1.3 The frozen object cannot be modified To unfreeze, you can only redefine an object before operating it.
1.4 Object.freeze() can be used to improve performance.
1.5 Object.freeze() is read-only for all properties and cannot be modified
. properties and methods. But it can be modified and deleted
1.7 Object.seal() The object can be modified but cannot be deleted
1.8 Object.isFrozen() Judge
whether the object is frozen preventExtensions() together

	var obj = {
    
    
	  a: 1,
	  b: 2,
	  c: {
    
    
	    aa: 11,
	    bb: 22
	  }
	}
	Object.freeze(obj)
	console.log(Object.isFrozen(obj)) // 是否冻结对象
	obj.c.aa = 33
	obj.a = 0
	console.log(obj) // 浅冻结 {"a":1,"b":2,"c":{"aa":33,"bb":22}}
	var bbb = Object.assign({
    
    }, obj) //解冻对象
	bbb.a = 0
	console.log(bbb) // {"a":0,"b":2,"c":{"aa":33,"bb":22}}
	console.log('-------freeze---------')
	var obj1 = {
    
    
	  a: 1,
	  b: 2,
	  c: {
    
    
	    aa: 11,
	    bb: 22
	  }
	}
	Object.seal(obj1) // 对象只能修改 不能删除
	
	obj1.a = 2
	delete obj.b
	console.log(obj1) // {"a":2,"b":2,"c":{"aa":11,"bb":22}}
	
	console.log('-----seal-----')
	
	var obj2 = {
    
    
	  a: 1,
	  b: 2,
	  c: {
    
    
	    aa: 11,
	    bb: 22
	  }
	}
	Object.preventExtensions(obj2) //不可新增 可编辑和删除
	obj2.a = 11
	delete obj2.b
	obj2.d = 000
	console.log(obj2) // {"a":11,"c":{"aa":11,"bb":22}}

In vue2, the principle of two-way binding is to use Object.defineProperty, the object instantiated by vue, vue will traverse all the properties of this object, convert all these properties into getters and setters, and come when the properties are accessed and modified Notification changes. But if you encounter Object.freeze() to freeze the object, you will not add data hijacking methods such as getter and setter to the object. The performance improvement effect comparison is as follows:
For example, if we render a 1000*10 table,
why is the performance of Object.freeze() better when Object.freeze is turned on?

Object.freeze() can improve performance. If you are operating a large amount of data, if you are sure that the amount of data will not be changed later, you can freeze the data, which can greatly improve performance

Object.hasOwn () 、Object.prototype.hasOwnProperty()

1.1 These two methods are used to detect whether there are properties on the object. They can only detect static properties and cannot detect inherited properties.
1.2 Object.hasOwn() is an alternative to Object.prototype.hasOwnProperty(), and now Object. hasOwn()

let obj = {
    
    
  foo: '222'
}

console.log(Object.hasOwn(obj, "foo")) // true
console.log(Object.hasOwn(obj, "foo1")) // false
console.log(Object.hasOwn(obj, 'toString')) // false
console.log(obj.hasOwnProperty("foo")) // true
console.log(obj.hasOwnProperty("foo1")) // false
console.log(obj.hasOwnProperty('toString')) // false

Why use Object.hasOwn() instead of Object.hasOwnProperty(), Object.hasOwnProperty() is the method above the prototype, when the prototype of the object is changed, this method can be used, so it defines the object itself A method that functions the same as Object.hasOwnProperty()

Object.defineProperty()、Object.defineProperties()、Object.getOwnPropertyDescriptor()、Object.getOwnPropertyDescriptors()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()

1.1 Object.defineProperty() will directly define a new property on an object, or modify an existing property of an object, and return this object
1.2 Object.defineProperties() is the duplicate form of Object.defineProperty()
1.3 Object.getOwnPropertyDescriptor() Returns the property descriptor corresponding to an own property on the specified object (own property is a static property, no need to search from the prototype chain) 1.4 The Object.getOwnPropertyDescriptors()
method is used to obtain the descriptors of all the own properties of an object
1.5 The Object.getOwnPropertyNames() method returns an array of the property names of all the properties of the specified object (including non-enumerable properties but excluding properties with Symbol values ​​as names) 1.6 The Object.getOwnPropertySymbols() method returns a given object
itself An array of all Symbol properties for

let Person = {
    
    }
let value = ''
Object.defineProperty(Person, 'name', {
    
    
  // value: 'jack',
  // writable: true, // 是否可以改变
  enumerable: true, // 是否可以枚举,
  configurable: true, // 是否可配置
  set(val) {
    
    
    value = val
  },
  get() {
    
    
    return value
  }
})

Person.name = "rose"; // 当writable是false 是{"name":"jack"} 当时true时  是{"name":"rose"}
console.log(Person) // 当enumerable是false 是空对象 当时true时  是{"name":"rose"}
delete Person.name // 无法删除  configurable是true才可删除 

console.log('--------Object.defineProperty()------')

var obj3 = {
    
    };
Object.defineProperties(obj3, {
    
    
  'property1': {
    
    
    value: true,
    writable: true
  },
  'property2': {
    
    
    value: 'Hello',
    writable: false
  }
})

console.log('--------Object.defineProperties()------')


const object1 = {
    
    
  property1: 42,
  property2: 42
};

var a = Symbol("a");
var b = Symbol.for("b");

object1[a] = "localSymbol";
object1[b] = "globalSymbol";

const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1');
console.log(descriptor1) // {"value":42,"writable":true,"enumerable":true,"configurable":true}
const descriptor2 = Object.getOwnPropertyDescriptors(object1);
console.log(descriptor2) // {"property1":{"value":42,"writable":true,"enumerable":true,"configurable":true},"property2":{"value":42,"writable":true,"enumerable":true,"configurable":true}}
const descriptor3 = Object.getOwnPropertyNames(object1);
console.log(descriptor3) // ["property1","property2"]
const descriptor4 = Object.getOwnPropertySymbols(object1);
console.log(descriptor4) // [Symbol(a), Symbol(b)]

deep clone

```javascript
function deepClone(obj) {
  let newObj = {}
  for (let key in obj) {
    let item = obj[key]
    if (Object.prototype.toString.call(item) === '[object Object]') {
      newObj[key] = deepClone(item)
    } else {
      newObj[key] = obj[key]
    }
  }
  return newObj
}

var aaaa = {
  a: 1,
  b: 2,
  c: {
    d: 3,
    e: 4
  }
}
var bbbb = deepClone(aaaa)

bbbb.a = 11
console.log(aaaa.a)  // 1
console.log(bbbb.a) // 11
console.log(bbbb) // {"a":11,"b":4,"c":{"d":3,"e":4}}
```

The difference between object defineProperty and Proxy proxy object

The Proxy object is used to create a proxy for an object, and is used to monitor related operations of an object. The proxy object can monitor our operations on the original object.
When instantiating the Proxy object, the get method is used to obtain the object properties, and the set method is used to set the object properties.

const object = {
    
    
  name: 'zhangsan'
}

const objProxyPrototype = {
    
    
  count: 2
}

const objProxy = new Proxy(object, {
    
    
  get(target, key) {
    
    
    console.log('获取属性')
    return target[key]
  },
  set(target, key, val) {
    
    
    console.log('设置属性')
    target[key] = val
  },
  has(target, key) {
    
    
    return !!target[key]
  },
  getPrototypeOf(target) {
    
    
    // return Object.getPrototypeOf(target)
    return objProxyPrototype
  },
  isExtensible(target) {
    
    
    return Object.isExtensible(target);
  },
  preventExtensions(target) {
    
    
    return Object.preventExtensions(target);
  }
})

console.log(objProxy.name)

objProxy.name = 'lisi'
console.log('name' in objProxy) // true
console.log('age' in objProxy) // false

console.log(Object.getPrototypeOf(objProxy)) // {"count":2}
console.log(Object.getPrototypeOf(objProxy) === objProxyPrototype) // true
console.log(Object.isExtensible(objProxy)) // true

Object.preventExtensions(objProxy);
console.log(Object.isExtensible(objProxy)) // false

The proxy proxy object does not intercept the proxy object this, so it cannot be guaranteed to be consistent with the internal object this. as follows:

const obj={
    
    
 name:'_island',
 foo:function(){
    
    
   return this === objProxy
 }
}

const objProxy=new Proxy(obj,{
    
    })
console.log(obj.foo()); // false
console.log(objProxy.foo()); // true

The principle of two-way binding in vue2 is realized by using Object.defineProperty(), while in vue3 it is realized by using Proxy proxy. So why should this be optimized in vue3? ? ?
When we were using vue2, did we encounter a problem, when our data obviously changed, but why the page was not updated? ? ? Because the original intention of Object.defineProperty design is not to monitor and intercept an object, it can't realize richer operations, such as adding, deleting and other operations, so when we operate data, the data obviously changes, but Object. If defineProperty cannot monitor changes, our DOM will not be updated. In vue3, our Uda is optimized with Proxy

object prototype chain

When introducing object attributes,
self-owned attributes (static attributes), inherited
attributes, etc. are often used , just like you are a rich second generation, obviously you have not earned money, but you still have money that you can’t spend,
every object will have a prototype object, and there are some properties and methods on the prototype object, then the instance of this object The method inherits the properties and methods on the object's prototype object.
Interested treasurers can check the prototype chain. Not much introduction here. . .
The prototype chain diagram is as follows: