javascript의 코드 스니핑은 기본 객체와 프로토타입을 확장합니다.javascript 팁

참고: 번역에 부적절한 내용이 있으면 정정해 주세요. 모두 즐거운 연휴 보내세요!
특별한 필요 없이 네이티브 객체와 프로토타입을 확장하는 것은 좋지 않습니다

코드 복사 코드는 다음과 같습니다.

//하지 마세요
Array.prototype.map = function() {
// 일부 코드
}

예를 들어 일부 오래된 브라우저에 일부 ECMAScript5 메서드를 추가하는 것은 가치 있는 일입니다.
이 경우 일반적으로 다음과 같이 합니다.

코드 복사 코드는 다음과 같습니다.

if (!Array.prototype.map) {
Array.prototype.map = function() {
//일부 코드
}
}

편집증이 심한 경우 다른 사람이 map을 true 또는 기타와 같은 다른 예상치 못한 값으로 정의하는 것을 방지하기 위해 감지 코드를 다음과 같이 변경할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

if (typeof Array.prototype.map !== "function") {
Array.prototype .map = function() {
// 일부 코드
};
}

(이렇게 하면 다른 개발자의 지도 정의가 손상되고 해당 기능 구현에 영향을 주지만)
하지만 적대적이고 경쟁적인 환경에서는(즉, js 라이브러리를 제공하거나 사용할 때) 누구도 신뢰해서는 안 됩니다. 다른 사람의 js 코드가 자신의 코드보다 먼저 로드되고 ES5와 완전히 호환되지 않는 map() 메서드를 정의하여 코드가 제대로 실행되지 않는 경우 어떻게 해야 합니까?

그러나 Webkit 커널이 map() 메소드를 구현한다면 이 메소드는 확실히 정상적으로 실행될 것이므로 안심하셔도 됩니다. 그렇지 않으면 코드를 사용하여 이를 감지해야 합니다.

다행히 이는 JavaScript에서 구현하기 쉽습니다. 네이티브 함수의 toString 메서드를 호출하면 함수의 문자열이 반환됩니다.
예를 들어 Chrome 콘솔에서:

코드 복사 코드는 다음과 같습니다.

> ; Array.prototype.map.toString();
"function map() { [native code] }"

올바른 코드 검사는 항상 약간 불쾌한 일입니다. 다른 브라우저에서는 공백과 줄 바꿈을 너무 가볍게 처리하기 때문입니다. 테스트 내용은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

Array.prototype .map.toString() .replace(/s/g, '*');
// "*function*map()*{*****[native*code]*}*" // IE
// " function*map()*{*****[native*code]*}" // FF
// "function*map()*{*[native*code]*} " // Chrome

s를 제거하면 더욱 실용적인 문자열이 됩니다.

코드 복사 코드는 다음과 같습니다.

Array.prototype.map.toString().replace(/s/g, '')// "functionmap(){[nativecode] }"

재사용 가능한 shim() 함수로 캡슐화할 수 있으므로!

Array.prototype... 같은 모든 작업을 반복할 필요가 없습니다. 운영. 이 함수는 객체를 매개변수(예: Array.prototype), 추가할 속성(예: 'map'), 추가할 함수로 받아들입니다.

코드 복사 코드는 다음과 같습니다.

function shim(o, prop, fn) {
var nbody = "function" prop "(){[nativecode]}"
if (o.hasOwnProperty(prop) &&
o[prop].toString().replace(/s/ g, ' ') === nbody) {
//테이블 이름은 네이티브입니다!
true 반환
}
//새로 추가됨
o[prop] = fn
}

테스트:

코드 복사 코드는 다음과 같습니다.

//이것이 네이티브 메소드입니다
shim(
Array.prototype, 'map',
function(){/*...*/}
) / / true
//새로 추가된 메소드입니다
shim(
Array.prototype, 'mapzer',
function(){alert(this)}
); 1,2,3].mapzer(); // 경고 1,2,3

(끝)^_^