JavaScript에서 typeof와 instanceof의 비교 사용 예에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-07-22 15:41:471501검색
typeof
먼저 typeof에 대해 이야기해 보겠습니다. 가장 먼저 주목해야 할 점은 typeof 메소드가 데이터 유형을 나타내는 문자열을 반환한다는 것입니다.
typeof는 피연산자 앞에 배치되는 단항 연산이며 피연산자는 모든 유형이 될 수 있습니다.
반환 값은 피연산자의 유형을 설명하는 문자열입니다. Typeof는 일반적으로
숫자, 부울, 문자열, 함수, 객체, 정의되지 않은 결과만 반환할 수 있습니다. if(a)를 사용하는 대신 if(typeof a!="undefine"){alert("ok")}와 같이 변수가 존재하는지 여부를 확인하기 위해 typeof를 사용할 수 있습니다. 왜냐하면 a가 존재하지 않으면(선언되지 않음) will 오류가 발생하면 Array 및 Null과 같은 특수 개체에 대해 typeof를 사용하면 항상 개체가 반환됩니다. 이것이 typeof의 제한 사항입니다.
문법 설명
먼저 각 데이터 유형에 해당하는 typeof 값을 살펴보겠습니다.
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"
typeof Number(1) === 'number'; // 不要这样使用!
// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串
typeof String("abc") === 'string'; // 不要这样使用!
// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean'; // 不要这样使用!
// Symbols
typeof Symbol() === 'symbol';
typeof Symbol('foo') === 'symbol';
typeof Symbol.iterator === 'symbol';
// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量
// Objects
typeof {a:1} === 'object';
// 使用Array.isArray或者Object.prototype.toString.call方法可以从基本的对象中区分出数组类型
typeof [1, 2, 4] === 'object';
typeof new Date() === 'object';
// 下面的容易令人迷惑，不要这样使用！
typeof new Boolean(true) === 'object';
typeof new Number(1) ==== 'object';
typeof new String("abc") === 'object';
// 函数
typeof function(){} === 'function';
typeof Math.sin === 'function';데이터 유형을 판단하는데 있어서 typeof가 정확하지 않다는 문제를 발견하게 됩니다. 예를 들어 배열, 정규식, 날짜, 객체의 반환값 유형은 모두 객체이므로 일부 오류가 발생합니다.
따라서 유형을 판단하는 기준에 따라 데이터 유형을 추가로 판단하려면 Object.prototype.toString 메서드도 사용해야 합니다.
동일한 데이터 유형의 경우 toString 메소드와 typeof 메소드의 반환 값의 차이점을 살펴보겠습니다.
| data | toString | typeof |
|---|---|---|
| "foo" | String | string |
| new String("foo") | String | object |
| 새 숫자( 1.2) | Number | object |
| true | Boolean | boolean |
| new Boolean(true) | Boolean | object |
| new Date() | Date | object |
| new Error() | Error | object |
| 새 배열(1, 2, 3) | Array | object |
| /abc/g | RegExp | object |
| new RegExp("야옹") | RegExp | object |
可以看到利用toString方法可以正确区分出Array、Error、RegExp、Date等类型。
所以我们一般通过该方法来进行数据类型的验证
instanceof
接下来该说说instanceof方法了。instanceof运算符可以用来判断某个构造函数的prototype属性是否存在于另外一个要检测对象的原型链上。
instanceof 用于判断一个变量是否某个对象的实例，如 var a=new Array();alert(a instanceof Array); 会返回 true，同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。再如：function test(){};var a=new test();alert(a instanceof test) 会返回
谈到 instanceof 我们要多插入一个问题，就是 function 的 arguments，我们大家也许都认为 arguments 是一个 Array，但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象，尽管看起来很像。
如果对原型不太了解，可以看看深入理解原型。
下面我们看看instanceof的实例：
// 定义构造函数
function C(){}
function D(){}
var o = new C();
// true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C;
// false，因为 D.prototype不在o的原型链上
o instanceof D;
o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上
C.prototype = {};
var o2 = new C();
o2 instanceof C; // true
o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.
D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true但是这里我们需要注意一个问题：
function f(){ return f; }
document.write(new f() instanceof f);//false
function g(){}
document.write(new g() instanceof g);//true第一个为什么返回false呢？因为构造函数的原型被覆盖了。
위 내용은 JavaScript에서 typeof와 instanceof의 비교 사용 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!