Object 객체 메소드 요약

주로 Object 객체의 메서드와 해당 객체가 작성된 인스턴스의 메서드입니다.일반적으로 서로 다른 실례 대상에 사용할 수 있는 방법.

Object 메서드

Object.assign(targetObj,copyObg)

한 대상의 방법을 다른 대상에 복사하다

function Fruit(name) { 
    this.name = name;
}
Fruit.prototype.sayName = function () { 
    console.log(this.name);
}
var Apple = {
    color:"red"
}
var ft = new Fruit("apple");
Object.assign(Apple,ft);  //  ft            Apple 
console.log(Apple);

Object.keys()

대상의 모든 속성 이름을 가져올 수 있는 그룹을 가져옵니다. 대상의 원형에 있는 속성은 가져올 수 없습니다.

function Plant(){
    this.desc = "   "
}
Plant.prototype.sayHi = function () { 
    console.log("hi");
}
function Apple() { 
    this.desc = "       ";
    Plant.call(this);
}
Apple.prototype = Object.create(Plant.prototype);
Apple.prototype.constructor = Apple;

//   Object.keys()
var bigApple = new Apple();
console.log(bigApple);  // Apple{desc: "   "}
console.log(Object.keys(bigApple));  // ["desc"]

Object.getOwnPropertyNames()

대상 자체의 속성을 가져옵니다. 대상의 원형적인 속성을 포함하지 않습니다. console.log(Object.getOwnPropertyNames(bigApple)); // ["desc"]

Object.getPrototypeOf()

객체 원형 가져오기

function Plant(){
    this.desc = "   "
}
var obj = new Plant();
console.log(obj.__proto__ === Object.getPrototypeOf(obj)); // true
console.log(Plant.prototype === Object.getPrototypeOf(obj))// true

실례의 __proto__ 속성과 같다

Object.setPrototypeOf()

객체의 원형 설정

//       
var obj1 = {
    name:"obj1"
};
var obj2 = {
    age:18
}
Object.setPrototypeOf(obj1,obj2);
console.log(Object.getPrototypeOf(obj1) === obj2);  // true

obj1 대상의 원형을 obj2로 설정합니다

new 원리

new 한 대상의 원리는 사실:1.빈 객체 obj 2.이 대상의 원형을 Plant.prototype3으로 설정합니다.구조 함수Plant를 사용하여 대상을 초기화합니다.(구조 함수를 호출하여this지향을obj대상으로 수정하면 됩니다)

function Plant(){
    this.desc = "   "
}
// var plt = new Plant;
var obj = {};
Object.setPrototypeOf(obj,Plant.prototype);
Plant.call(obj);
console.log(obj.desc);  //    
console.log(obj instanceof Plant);  // true

Object.create()

대상을 불러옵니다. 이 대상을 원형으로 새 대상을 만듭니다.

var obj1 = {
    name:"obj1"
};
var obj2 = Object.create(obj1);
// getPrototypeOf      
console.log(Object.getPrototypeOf(obj2) === obj1);  // true

Object 인스턴스 메서드

대상 실례상의 방법

valueOf()

계산식에서만 대상이 이 방법을 사용해서 대상을 값으로 변환한다

var obj1 = {
    name:"obj1"
};
console.log(obj1.valueOf());  // {name: "obj1"}  
obj1.valueOf = function () { 
    return 3;
}
console.log(obj1+2);   // 5

toString() 및 toLocaleString()

대상의 문자열 형식을 되돌려줍니다. 기본적으로 형식 문자열을 되돌려줍니다.

var obj1 = {
    name:"obj1"
};
function fn() {  };
var date = new Date();
console.log(obj1.toString());  // [object Object]    -》    
console.log(String("33").toString());  // 33     =》     
console.log(Number(128).toString());  // 128    =》 
console.log([1,3,5].toString());  // 1,3,5      =》  ,          ，     join(",")
console.log(fn.toString());  //  function fn() {  }    =》    
console.log(date.toString());  // Sat May 09 2020 19:09:55 GMT+0800 (      )    =》   

서로 다른 유형의 대상에 대해 서로 다른 값을 되돌려줍니다

toLocaleString

로컬 습관을 사용하여 반환 값을 정의합니다.보통 시간, 그룹, 숫자에 대해 이 방법을 맞춤형으로 만들었다

// toLocalString
console.log(Number(128).toLocaleString());  // 128  
console.log([1,3,5].toLocaleString());  // 1,3,5   
console.log(date.toLocaleString());  // 2020/5/9   7:13:24    =》                   

isPrototypeof()

a가 b의 원형인지 아닌지를 판단하다

var obj1 = {
    name:"obj1"
};
var obj2 = {
    age:18
}
Object.setPrototypeOf(obj1,obj2);  //   obj1    obj2
console.log(obj2.isPrototypeOf(obj1));  // true
console.log(Object.prototype.isPrototypeOf(obj1));  // true  Object.prototype obj1   

사실 원형 체인 해석에 따르면 Object.prototype는 모든 대상의 원형 대상이다.

hasOwnProperty()

이 실례가 자신의 속성이 있는지 아닌지를 판단하다

var obj1 = {
    name:"obj1"
};
var obj2 = {
    age:18
}
Object.setPrototypeOf(obj1,obj2);  //   obj1    obj2
console.log(obj1.hasOwnProperty("name"));  // true
console.log(obj1.hasOwnProperty("age"));  // false

이 방법은 하나의 속성이 그 대상의 자신인지 아닌지를 판단하는 데 쓰이는 것이지 계승하는 방법이 아니다.

속성 객체 설명자

속성 대상 설명자는 일반적으로 대상의 한 속성이 수정, 삭제, 열거 등 조작을 할 수 있는지 제어하는 데 사용된다.

Object.getOwnPropertyDescriptor()

객체의 속성을 가져오는 속성 설명자 매개 변수는 한 객체, 두 번째 매개 변수는 객체의 속성입니다.

var obj1 = {
    name:"haha"
}
//   obj1   name        
console.log(Object.getOwnPropertyDescriptor(obj1,"name"));
//  {value: "haha", writable: true, enumerable: true, configurable: true}
console.log(obj1.propertyIsEnumerable("name"));  // true

Object.getOwnPropertyNames()

열거 가능한 속성과 옮길 수 없는 속성 가져오기

var obj1 = {
    name:"haha"
}
Object.defineProperty(obj1,"age",{
    value:18,
    writable:false,
    enumerable:true
})
console.log(Object.getOwnPropertyNames(obj1));  // ["name", "age"]

propertyIsEnumerable()

대상의 매거 가능 여부를 판단하려면 대상 자체의 속성만 판단할 수 있고, 매거할 수 없는 속성이나 계승된 속성은 일률적으로false로 되돌아갈 수 있으며 구체적으로 설정할 수 있는 속성은 다음과 같다.
속성 이름
값
역할
value
“haha”
객체 값
writable
true
이 속성의 쓰기 가능 여부를 설정합니다.
enumerable
true
이 속성을 매거할 수 있는지 설정합니다. (예: for in 대상을 훑어볼 때 이 속성으로 훑어보기)
configurable
true
구성 가능, 객체 삭제 가능
set
undefined
객체 등록 정보를 설정할 때 호출합니다(예: obj.name=123.
get
undefined
대상 속성을 가져올 때 호출합니다. 예를 들어: obj.name주의

writable: 원형 대상의age 속성의writable가false일 때 실례 대상은 이 속성을 사용자 정의할 수 없습니다.그러나 하위 대상에 대한foo설명자를 맞춤형으로 설정하여 원형의foo대상설명자

를 덮어씁니다

enumrable: 일일이 열거할 수 있음을 나타낸다. 바로 이 속성이 옮겨갈 수 있는지를 나타낸다.

configurable:true일 때 속성을 삭제할 수 있습니다.false일 때value,writable,enumerable는 수정할 수 없습니다.writable는true에서false로만,false에서true로만 변경할 수 있습니다.

value: writable와configurable가true라면 수정할 수 있습니다

defineProperty()

객체의 속성을 정의하는 속성 설명자 매개 변수는 객체, 매개 변수 2는 속성, 매개 변수 3은 객체 설명자

var obj1 = {
    name:"haha"
}
Object.defineProperty(obj1,"age",{
    value:18,
    writable:false,
    enumerable:true
})
console.log(Object.getOwnPropertyDescriptor(obj1,"age"));
//  :{value: 18, writable: false, enumerable: true, configurable: false}

정의되지 않은 속성 설명자에 대해false로 기본값 설정

defineProperties()

여러 객체 속성을 정의하는 속성 설명자 매개 변수 1은 객체이고 2는 키 값 쌍 목록입니다(키는 속성 이름, 값은 속성 설명자).

var obj1 = {
    name:"haha"
}
Object.defineProperties(obj1,{
    p1:{
        value:"hello",
        writable:true
    },
    p2:{
        get:function () { 
            return this.name + " is sb"
        },
        set:function(newVal){
            console.log("set");
            this.name = newVal
        }
    }
})
console.log(Object.getOwnPropertyDescriptor(obj1,"p1"));  
// {value: "hello", writable: true, enumerable: false, configurable: false}
console.log(Object.getOwnPropertyDescriptor(obj1,"p2"));
// {enumerable: false, configurable: false, get: ƒ, set: ƒ}
console.log(obj1.p2);  // haha is sb
obj1.p2 = "apple";  // set

총결산

value와 get 방법은 하나만 사용자 정의할 수 있음

get을 설정하면 writable 속성을 사용할 수 없음

빈 속성 설명 대상을 설정할 때 기본 모든 속성은false

사례: Object 방법을 사용하여 객체의 깊이 있게 복사

얕은 복사와 깊은 복사 안내

js에는 기본 데이터 형식과 인용 데이터 형식이 있습니다

딥 카피

기본 데이터 형식은 등호를 사용하여 대상을 직접 복제한다

let a = 22;
let b = a;
b = 4;
console.log(a);  // 22
console.log(b);  // 4

b a의 값을 복제한 후 원 대상 a와 아무런 관계가 없다.b의 값이 수정되면 a의 값도 변하지 않는다.

얕은 복사

인용 형식 (대상, 그룹) 이라면, 직접 복사하면 변수는 대상의 메모리 주소가 아니라 대상의 값을 얻을 수 있습니다

//    
let arr1 = [1,4,5];
let arr2 = arr1;
arr2.push(66);
console.log(arr1);  // [1, 4, 5, 66]
console.log(arr2);  // [1, 4, 5, 66]
//    
let obj1 = {
    name:"apple",
    age:12
};
let obj2 = obj1;
obj2.name = "banana";
console.log(obj1);  // {name: "banana", age: 12}
console.log(obj2);  // {name: "banana", age: 12}

실현 방법

대상의 속성을 순서대로 두루 훑어보고 하나의 대상인지 아닌지를 판단하면 두루 훑어본다.그렇지 않으면 새 객체로 복사됩니다.

function deepCopy(oldObj,newObj) { //oldObj:        newObj：   ，        
    for(key in oldObj){
        // hasOwnProperty              ，        
        if(oldObj.hasOwnProperty(key)){
            if(oldObj[key] && typeof oldObj[key] === "object"){
                //          
                newObj[key] = oldObj[key].constructor === Array?[]:{};
                //     ，   /            
                deepCopy(oldObj[key],newObj[key]);

            }else{  //        ，         
                newObj[key] = oldObj[key];
            }
        }

    }
    return newObj
}
var obj1 = {
    name:"apple",
    color:['blue','green'],
    prop:{
        num:12
    }
};
var obj2 = deepCopy(obj1,{});
console.log(obj1);  // {name: "apple", color: Array(2), prop: {…}}
console.log(obj2);  // {name: "apple", color: Array(2), prop: {…}}
obj2.name = "banana";
obj2.color.pop();
console.log(obj1);  // {name: "apple", color: Array(2), prop: {…}}
console.log(obj2);  // {name: "banana", color: Array(1), prop: {…}}