>웹 프론트엔드 >JS 튜토리얼 >JavaScript_Basic 지식에서 객체 유형을 결정하는 방법

JavaScript_Basic 지식에서 객체 유형을 결정하는 방법

WBOY
WBOY원래의
2016-05-16 17:16:221092검색

최근에 저는 JavaScript 유형을 판단하는 방법에 대해 이야기한 John Resig의 걸작 "Pro JavaScript Techniques"를 읽었습니다. 이 기사에서는 두 가지 방법을 소개합니다. 하나는 typeof를 사용하는 것이고, 다른 하나는 생성자를 사용하는 것입니다. jquery의 저자로서 jquery에서 사용하는 유형 판단 방법을 전혀 소개하지 않은 점이 아쉽습니다. 하지만 상관없습니다. 여기 있는 모든 사람을 위해 요약하겠습니다.

저는 먼저 모든 사람에게 매우 유용한 온라인 편집기를 추천합니다: http://jsfiddle.net/. jquery, mootools, 프로토타입 및 YUI의 세 가지 주류 js 프레임워크의 다양한 버전을 제공하며 간단한 js 테스트 프로그램을 작성해야 할 때 직접 사용할 수 있습니다. 이렇게 하면 편집 소프트웨어를 열고 다양한 유형의 파일을 만들 필요가 없습니다. 코드 수정 후 [실행] 버튼을 클릭하면 모든 작업이 완료됩니다.

1.유형

Typeof는 유형 판단을 할 때 가장 일반적으로 사용되는 방법입니다. 장점은 간단하고 기억하기 쉽다는 것입니다. 단점은 객체, null, 배열, 정규식 및 사용자 정의 객체를 잘 판단할 수 없다는 것입니다.

다음은 내 테스트 코드입니다.

코드를 복사하세요코드는 다음과 같습니다.

var str ='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={이름: '테스트'} ;
var nullObj=null;
var undefineObj=undefine;
var reg=/reg/;

function fn(){
Alert('이것은 함수입니다');
}

function User(이름){
this.name=name;
}
var user=new User('user');

console.log(str 유형);
console.log(arr 유형);
console.log(num 유형);
console.log(bool 유형);
console.log (obj 유형);
console.log(nullObj 유형);
console.log(undefineObj 유형);
console.log(reg 유형);
console.log(fn 유형);
console.log(사용자 유형);


코드 실행 결과:

2.생성자

이제 일반적으로 사용되지 않는 방법인 객체 생성자 생성자를 소개합니다. 장점은 대부분의 개체 유형에 대한 판단을 지원한다는 것입니다. 특히 사용자 정의 개체에 대한 판단을 지원한다는 점은 null 및 정의되지 않은 항목에 사용할 수 없다는 점입니다.

테스트 코드는 이전 코드와 유사하지만 차이점은 typeof 대신 XXX.constructor를 사용한다는 것입니다.

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

var str='str';
var arr =['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj= null;
var undefineObj=undefine;
var reg=/reg/;
function fn(){
Alert('이것은 함수입니다');
}
function 사용자 (이름) {
this.name=name;
}
var user=new User('user');

console.log(str.constructor);
console.log(arr.constructor);
console.log(num.constructor);
console.log(bool.constructor);
console.log(obj.constructor);
console.log(reg.constructor);
console.log(fn.constructor);
console.log(user.constructor);

console.log(nullObj.constructor);
console.log(undefineObj.constructor);

실행 결과:

console.log(nullObj.constructor);를 실행할 때 브라우저에서 다음 오류를 보고합니다. Uncaught TypeError: Cannot read property 'constructor' of null. 위의 console.log(undefineObj.constructor)에서도 유사한 문제가 발생합니다. Uncaught TypeError: Cannot read property 'constructor' of undef.

3.Object.prototype.toString.call()

마지막으로 소개할 것은 jquery에서 사용하는 메소드인 Object.prototype.toString.call()입니다. 장점은 대부분의 유형의 판단을 지원한다는 점이며, 유일한 단점은 사용자 정의 개체의 판단을 지원하지 않는다는 점입니다.

테스트 코드는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj ={name:'test'};
var nullObj=null;
var undefineObj=undefine;
var reg=/reg/;
function fn(){
    경고('this 함수입니다');
}
function User(name){
    this.name=name;
}
var user=new User('user');

var toString=Object.prototype.toString;

console.log(toString.call(str));
console.log(toString.call(arr));
console.log(toString.call(num));
콘솔. log(toString.call(bool));
console.log(toString.call(obj));
console.log(toString.call(reg));
console.log(toString.call (fn));
console.log(toString.call(user));
console.log(toString.call(nullObj));
console.log(toString.call(undefineObj));

运行结果:

console.log(toString.call(사용자)); 的返回结果为:[객체 객체] ,不能做进一步判断。

总结

javascript中经常使사용할 수 있는 도구는 typeof,constructor와Object.prototype.toString.call()입니다.但是信大가족통로 데모를 사용하는 사람들의 의견은 다음과 같습니다. Object.prototype.toString.call() XXX.toString() 형식 ?

저희는 浏览器中运行하면의 현대적: 查看运行结果:

null과 정의되지 않은 방법은 toString() 방식으로, 우리는 더 이상 사용할 수 없습니다. 우리는 더 이상 사용할 수 없습니다. .call()이 멋진 것 같아요内容差别很大。这是因为Object.prototype.toString()방법론被设计用来返回对象类型的。String、Array、Boolean、Regexp、Number and Function twitter继承自Object,同时也就继承객체의 기본 방법 toString(), toString()을 사용하는 방법은 다음과 같습니다. xxx.toString()을 사용하는 방법은 다음과 같습니다. 。


复主代码 代码如下:
var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefineObj=undefine;
var reg =/reg/;
function fn(){
    Alert('이것은 함수입니다');
}
function User(name){
    this.name=name;
}
var user=new User('사용자');
console.log(str.toString());

console.log(arr.toString());
console.log(num.toString());
console.log(bool .toString());
console.log(obj.toString());
console.log(reg.toString());
console.log(fn.toString());
console.log(user.toString());
console.log(nullObj.toString());
console.log(undefineObj.toString());

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.