확장 js 원본 대상의 정확한 자세

선언

우선 개인은 원생 대상을 수정하는 것을 추천하지 않는다.두 가지 이유가 있습니다.

필요 없어요.제3자 라이브러리와 사용자 정의 클래스는 수요를 충족시킬 수 있다.

유지 관리 문제.

그러나 프로젝트에서 이런 상황을 만날 수 있다. 원생의 js 대상은 수정되었지만 수법은 매우 졸렬하다.
그럼 시작합시다.여기서 우리는 Array를 예로 들자.

2 부정확한 자세

2.1 Array.method

이렇게 하면array 대상에 새로운 방법을 추가할 수 없습니다.

2.2 Array.prototype.method

메소드 메소드를 추가했고, 그 다음에 새로 만든 모든 Array 대상에 메소드라는 메소드가 추가되었습니다.

        Array.prototype.method = function(){
            console.log('I am an user defined method!');
        }

        var a = [];
        a.method();

console에서 I am an user defined method 가 출력되었습니다.완벽해 보이네.
그러나 우리가 for in을 이 그룹을 두루 훑어보았을 때,method도 결과에 나타난 것을 발견했다.이것은 분명히 우리가 바라는 결과가 아니다.

        for(x in a){
            console.log(x+':'+a[x])
        }

console에서 출력됨:

method:function (){
            console.log('I am an user defined method!');
        }

보아하니 이런 방법은 부작용이 있는 것 같다.앞으로 for in을 사용할 때 이 method를 수동으로 필터해야 합니다.
예를 들어 typeof를 이용하다

        for(x in a){
            if(typeof a[x] === 'function') continue;
            console.log(x+':'+a[x])
        }

3 바른 자세

이것이 올바른 방법입니다. 먼저 코드를 올리십시오.

        Object.defineProperty(Array.prototype,'method',{
            writable:false,
            enumerable:false,
            configurable:true,
            value:function(){
                console.log('I am an user defined method!');
            }
        });

효과가 있는지 없는지는 여러분이 직접 시도해 보셔도 됩니다. 다음은 그 중의 매개 변수를 설명해 드리겠습니다.

Array.prototype은 Array의prototype에 속성이 추가됨을 나타냅니다. 이렇게 하면 모든 새 그룹의 대상이 이 속성을 가지게 됩니다.

'method'속성명으로 변수를 사용할 수 있습니다.이렇게 하면 동적으로 일부 속성을 추가할 수 있다.

{} 네 개의 속성을 포함하는 대상입니다. 어떤 속성이 제공되지 않을 때 기본값은false 또는undefined입니다.writable enumerable를 일일이 열거할 수 있는지 여부입니다.false로 설정하면 for in에 옮겨다니지 않습니다.configurable value 속성의 값

writable와configurable의 규칙은 비교적 복잡하며 글씨체처럼 간단하지 않다.당분간 설명 안 할게요.
한 번에 여러 속성을 정의하려면

        Object.defineProperties(Array.prototype,
            {
                method1:{
                    writable:true,
                    enumerable:false,
                    configurable:true,
                    value:function(){
                        console.log('I am an user defined method 1!');
                    }
                },
                method2:{
                    writable:true,
                    enumerable:false,
                    configurable:true,
                    value:function(){
                        console.log('I am an user defined method 2!');
                    }
                }
            }
        );

이런 방식은 동적 함수 이름을 전달하기에 불편하다는 것을 주의해라.

4 요약

JavaScript는 원본 클래스의 속성을 수정하고 확장할 수 있으며, 수정 가능, 열거 가능, 설정 가능 등 속성의 특성에 대한 선택을 제공합니다.이러한 속성의 조합을 통해 실제 수요에 더욱 부합되는 유형을 설계할 수 있다.예를 들어 우리는 Person 종류를 설계할 수 있는데, Person의 성별이 초기화된 후에 다시 수정하는 것을 허락하지 않는다. (개별적인 상황은 허용된다.)