JavaScript 기본 객체(구성 및 공유)에 대한 자세한 설명

이 기사는 JavaScript의 객체에 대한 관련 지식을 제공합니다. JavaScript의 객체도 변수이지만 객체에는 이 기사를 읽은 후 도움이 되기를 바랍니다.

1 객체의 기본

1.1 유형

JavaScript에는 6가지 주요 언어 유형이 있습니다:

string, number, boolean, undefine, null, object

기본 유형: string, number, boolean, undefine, null; 기본 유형 자체는 객체가 아닙니다.

null

그러나 null은 때때로 객체로 간주되며 typeof null은 객체를 반환합니다. 실제로 null은 기본 유형입니다. 그 이유는 하위 레벨에서는 서로 다른 객체가 바이너리로 표현되기 때문입니다. 자바스크립트에서는 바이너리의 처음 세 자리가 모두 0이면 객체 유형으로 판단하고, null은 모두 0을 의미하므로 typeof는 객체를 반환합니다. .

특수 개체 하위 유형

Arrays

배열도 몇 가지 추가 동작이 있는 개체 유형입니다. 배열의 구성은 일반 객체보다 더 복잡합니다.

Function

Function은 호출할 수 있다는 점을 제외하면 기본적으로 일반 함수와 동일하므로 객체처럼 함수를 조작할 수 있습니다.

1.2 내장 Object

String
Number
Date
Boolean
Object
Function
Array

1.3 Content

.a를 속성 액세스, ['a']를 연산자 액세스라고 합니다.

//对象中的属性名始终是字符串
myobj={}

myobj[myobj]='bar'//赋值

myobj['[object object]'] //'bar'

1.4 계산 가능한 속성 이름

es6 계산 가능한 속성 이름이 추가되었습니다. 텍스트 형식에서 []를 사용하여 표현식을 속성 이름으로 래핑할 수 있습니다.

var perfix = 'foo'

var myobj={
    [perfix + 'bar'] :'hello'
}

myobj['foobar']//hello

1.5 속성 설명자

es5부터 모든 속성에는 속성이 포함됩니다. 예를 들어 디스크립터를 사용하면 속성이 읽고 쓸 수 있는지 여부를 직접 확인할 수 있습니다.

/*
 * 重要函数：
 * Object.getOwnPropertyDescriptor(..) //获取属性描述符
 * Object.defineProperty(..) //设置属性描述符
 */
 writeble（可读性）
 configurable（可配置性）
 enumerable （可枚举性）

1.6 Traversal

for in

for in은 객체의 열거 가능한 속성 목록([[Prototype]] 체인 포함)을 탐색하는 데 사용할 수 있으며 속성 값을 수동으로 가져와야 합니다. 배열 및 일반 개체를 순회할 수 있습니다.

for of

es6은 새로운 기능이며 배열의 속성 값을 순회하는 데 사용할 수 있습니다. for of 루프는 먼저 액세스된 개체에서 반복자 개체를 요청한 후 next를 호출합니다. (반복자 객체의) 메서드를 사용하여 모든 반환 값을 반복합니다.
배열에는 @@iterator가 내장되어 있습니다.

for of 작업은 어떻게 되나요?

var arr = [1, 2, 3]
var it = arr[Symbol.iterator]()//迭代器对象
console.log(it.next());//{value: 1, done: false}
console.log(it.next());//{value: 2, done: false}
console.log(it.next());//{value: 3, done: false}
console.log(it.next());//{value: undefined, done: true}

/*
 * 用es6 的Symbol.iterator 来获取对象的迭代器内部属性。
 * @@iterator本身并不是一个迭代器对象，而是一个返回迭代器对象的函数。
 */

속성 값을 탐색하기 위해 객체에 @@iterator가 어떻게 내장되어 있나요?

객체에 @@iterator가 내장되어 있지 않기 때문에 for...of 순회가 자동으로 완료될 수 없습니다. 그러나 탐색하려는 모든 객체에 대해 @@iterator를 정의할 수 있습니다. 예:

  var obj={
      a:1,b:2
  }
  
   Object.defineProperty(obj, Symbol.iterator, {
        enumerable: false,
        writable: false,
        configurable: true,
        value: function () {
            var self = this
            var idx = 0
            var ks = Object.keys(self)
            return {
                next: function () {
                    return {
                        value: self[ks[idx++]],
                        done: (idx > ks.length)
                    }
                }
            }
        }
    })
    
    //手动遍历
    var it = obj[Symbol.iterator]()//迭代器对象
    console.log(it.next());//{value: 1, done: false}
    console.log(it.next());//{value: 2, done: false}
    console.log(it.next());//{value: undefined, done: true}

   //for of 遍历
    for (const v of obj) {
        console.log(v);
    }
    //2
    //3

기타 배열 탐색 함수

 /*
 forEach：会遍历所有并忽略返回值
 some：会一直运行到回调函数返回 true（或者"真"值）
 every：会一直运行到回调函数返回 false（或者"假"值）
 map：
 filter：返回满足条件的值
 reduce：
 some和every 和for的break语句类似，会提前终止遍历
 */

2. 혼합 클래스 객체

인터뷰 질문

1.

관련 지식

기본 유형 및 참조 유형

위에서 언급한 것처럼 JavaScript에는 6가지 주요 언어 유형이 있습니다. 문자열, 숫자, 부울, null, 정의되지 않음, 객체 처음 5개는 기본 유형이고 마지막 개체는 참조입니다. 유형.

JavaScript 변수의 저장 방법: 스택 및 힙

스택: 메모리 공간을 자동으로 할당하고 시스템에 의해 자동으로 해제됩니다. 기본 유형 값과 참조 유형 주소를 저장합니다.

힙: 동적 할당 메모리의 크기는 다음과 같습니다. 변수이며 자동으로 해제되지 않습니다. 참조 유형 값이 저장됩니다

기본 유형과 참조 유형의 가장 큰 차이점은 값 전달과 주소 전달의 차이입니다

기본 유형은 값 전달을 사용합니다. 참조 유형은 주소(포인터) 전달을 사용합니다. 스택 메모리에 주소를 저장합니다. 수신된 변수에 값을 할당합니다.

얕은 복사와 깊은 복사가 무엇인가요?

얕은 복사본: 개체의 얕은 복사본은 '기본' 개체를 복사하지만 개체 내부의 개체는 복사하지 않습니다. '내부 개체'는 원본 개체와 복사본 간에 공유됩니다.

Deep copy: 객체의 전체 복사는 원본 객체의 각 속성을 하나씩 복사할 뿐만 아니라, 깊은 복사를 사용하여 원본 객체의 각 속성에 포함된 객체를 새 객체에 반복적으로 복사합니다. 메서드를 사용하므로 한 개체를 수정해도 다른 개체에는 영향을 미치지 않습니다.
예:

var anotherObject={
    b:"b"
}

var anotherArray=[]

var myObject={
    a:'a',
    b:anotherObject, //引用，不是副本
    c:anotherArray //另外一个引用
}

anotherArray.push(anotherObject,myObject)

/*
  如何准确的复制 myObject?
 浅复制 myObject，就是复制出 新对象中的 a 的值会复制出对象中a 的值，也就是 'a'，
 但是对象中的 b、c两个属性其实只是三个引用，新对象的b、c属性和旧对象的是一样的。
 
 深复制 myObject，除了复制 myObject 以外还会复制 anotherObject 和 anotherArray。
 但是这里深复制 myObject会出现一个问题，anotherArray 引用 anotherObject 和 myObject，
 所以又需要复制 myObject，这样就会由于循环引用导致死循环。
 后面会介绍如何处理这种情况。
*/

얕은 복사 구현 방법

object

object.asset(), 스프레드 연산자 (...)

var obj1 = {x: 1, y: 2}
var obj2 = Object.assign({}, obj1);
console.log(obj1) //{x: 1, y: 2}
console.log(obj2) //{x: 1, y: 2}
obj2.x = 2; //修改obj2.x
console.log(obj1) //{x: 1, y: 2}
console.log(obj2) //{x: 2, y: 2}

var obj1 = {
    x: 1, 
    y: {
        m: 1
    }
};
var obj2 = Object.assign({}, obj1);
console.log(obj1) //{x: 1, y: {m: 1}}
console.log(obj2) //{x: 1, y: {m: 1}}
obj2.y.m = 2; //修改obj2.y.m
console.log(obj1) //{x: 1, y: {m: 2}}
console.log(obj2) //{x: 2, y: {m: 2}}

Array

slice(), concat, Array.from(), 스프레드 연산자 기호(...), concat, for 루프

var arr1 = [1, 2, [3, 4]], arr2 = arr1.slice();
console.log(arr1); //[1, 2, [3, 4]]
console.log(arr2); //[1, 2, [3, 4]]

arr2[0] = 2 
arr2[2][1] = 5; 
console.log(arr1); //[1, 2, [3, 5]]
console.log(arr2); //[2, 2, [3, 5]]

딥 카피 구현 방법

JSON.parse(JSON.stringify(obj))

JSON.stringify()의 직렬화 과정에서 정의되지 않은 임의 함수 및 기호 값은 직렬화 중에 무시되거나(배열이 아닌 객체의 속성 값에 나타나는 경우) null로 변환됩니다(배열에 나타나는 경우).

var obj1 = {
    x: 1, 
    y: {
        m: 1
    },
    a:undefined,
    b:function(a,b){
      return a+b
    },
    c:Symbol("foo")
};
var obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj1) //{x: 1, y: {m: 1}, a: undefined, b: ƒ, c: Symbol(foo)}
console.log(obj2) //{x: 1, y: {m: 1}}
obj2.y.m = 2; //修改obj2.y.m
console.log(obj1) //{x: 1, y: {m: 1}, a: undefined, b: ƒ, c: Symbol(foo)}
console.log(obj2) //{x: 2, y: {m: 2}}

딥 카피 기능의 간단한 구현

function deepClone(obj){
  let result = Array.isArray(obj)?[]:{};
  if(obj && typeof obj === "object"){
    for(let key in obj){
      if(obj.hasOwnProperty(key)){
        if(obj[key] && typeof obj[key] === "object"){
          result[key] = deepClone(obj[key]);
        }else{
          result[key] = obj[key];
        }
      }
    }
  }
  return result;
}

var obj1 = {
    x: {
        m: 1
    },
    y: undefined,
    z: function add(z1, z2) {
        return z1 + z2
    },
    a: Symbol("foo"),
    b: [1,2,3,4,5],
    c: null
};
var obj2 = deepClone(obj1);
obj2.x.m = 2;
obj2.b[0] = 2;
console.log(obj1);
console.log(obj2);

//obj1
{
a: Symbol(foo)
b: (5) [1, 2, 3, 4, 5]
c: null
x: {m: 1}
y: undefined
z: ƒ add(z1, z2)
}

//obj2
{
a: Symbol(foo)
b: (5) [2, 2, 3, 4, 5]
c: null
x: {m: 2}
y: undefined
z: ƒ add(z1, z2)
}

위의 딥 카피 방법은 순환 참조를 만나 순환 재귀 프로세스에 빠지게 되어 스택이 폭발하게 됩니다. 따라서 개선이 필요합니다.

딥 카피 기능 개선(루프 재귀 방지)

루프 재귀로 인한 스택 폭발 문제를 해결하려면 개체의 필드가 이 개체를 참조하는지 아니면 이 개체의 부모를 참조하는지 확인하기만 하면 됩니다.

function deepClone(obj, parent = null){ // 改进（1）
  let result = Array.isArray(obj)?[]:{};
  let _parent = parent;  // 改进（2）
  while(_parent){ // 改进（3）
    if(_parent.originalParent === obj){
      return _parent.currentParent;
    }
    _parent = _parent.parent;
  }
  if(obj && typeof obj === "object"){
    for(let key in obj){
      if(obj.hasOwnProperty(key)){
        if(obj[key] && typeof obj[key] === "object"){
          result[key] = deepClone(obj[key],{ // 改进（4）
            originalParent: obj,
            currentParent: result,
            parent: parent
          });
        }else{
          result[key] = obj[key];
        }
      }
    }
  }
  return result;
}

// 调试用
var obj1 = {
    x: 1, 
    y: 2
};
obj1.z = obj1;
var obj2 = deepClone(obj1);
console.log(obj1); 
console.log(obj2);

딥 카피 기능의 최종 버전(기본 데이터 유형, 프로토타입 체인, RegExp, 날짜 유형 지원)

function deepClone(obj, parent = null){ 
  let result; // 最后的返回结果

  let _parent = parent; // 防止循环引用
  while(_parent){
    if(_parent.originalParent === obj){
      return _parent.currentParent;
    }
    _parent = _parent.parent;
  }
  
  if(obj && typeof obj === "object"){ // 返回引用数据类型(null已被判断条件排除))
    if(obj instanceof RegExp){ // RegExp类型
      result = new RegExp(obj.source, obj.flags)
    }else if(obj instanceof Date){ // Date类型
      result = new Date(obj.getTime());
    }else{
      if(obj instanceof Array){ // Array类型
        result = []
      }else{ // Object类型，继承原型链
        let proto = Object.getPrototypeOf(obj);
        result = Object.create(proto);
      }
      for(let key in obj){ // Array类型 与 Object类型 的深拷贝
        if(obj.hasOwnProperty(key)){
          if(obj[key] && typeof obj[key] === "object"){
            result[key] = deepClone(obj[key],{ 
              originalParent: obj,
              currentParent: result,
              parent: parent
            });
          }else{
            result[key] = obj[key];
          }
        }
      }
    }
  }else{ // 返回基本数据类型与Function类型,因为Function不需要深拷贝
    return obj
  }
  return result;
}

// 调试用
function construct(){
    this.a = 1,
    this.b = {
        x:2,
        y:3,
        z:[4,5,[6]]
    },
    this.c = [7,8,[9,10]],
    this.d = new Date(),
    this.e = /abc/ig,
    this.f = function(a,b){
        return a+b
    },
    this.g = null,
    this.h = undefined,
    this.i = "hello",
    this.j = Symbol("foo")
}
construct.prototype.str = "I'm prototype"
var obj1 = new construct()
obj1.k = obj1
obj2 = deepClone(obj1)
obj2.b.x = 999
obj2.c[0] = 666
console.log(obj1)
console.log(obj2)
console.log(obj1.str)
console.log(obj2.str)

참고: 함수 유형의 딥 카피:

bind(): 함수의 전체 복사본을 만들려면 fn.bind()를 사용하지만 이 포인터의 문제로 인해 사용할 수 없습니다.

eval(fn.toString()): 화살표 함수만 지원합니다. function fn() {}은 적용할 수 없습니다.

new Function(arg1, arg2,…,function_body): 매개변수와 함수 본문을 추출해야 합니다.

PS: 일반적으로 함수를 깊이 복사할 필요가 없습니다.

【관련 권장 사항: javascript 학습 튜토리얼】

위 내용은 JavaScript 기본 객체(구성 및 공유)에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!