이 글은 JavaScript의 typeof와 instanceof의 차이점을 소개합니다(코드 예제). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
JavaScript의 typeof와 인스턴스of는 변수가 비어 있는지 또는 어떤 유형인지 확인하는 데 자주 사용됩니다. 하지만 둘 사이에는 여전히 차이점이 있습니다.
typeof
typeof는 피연산자 앞에 배치되는 단항 연산이며 피연산자는 모든 유형이 될 수 있습니다.
반환 값은 피연산자의 유형을 설명하는 문자열입니다. (typeof 연산자는 표현식의 데이터 유형을 나타내는 데 사용되는 문자열을 반환합니다.)
typeof는 실제로 매개 변수 유형을 결정하는 인스턴스입니다.
typeof는 일반적으로 다음 결과만 반환할 수 있습니다. , "문자열", "부울", "객체", "함수" 및 "정의되지 않음".
피연산자는 숫자입니다. typeof(x) = "number"
String typeof(x) = "string"
Boolean value typeof(x) = "boolean"
Object, array and null typeof(x) = "object"
function typeof(x) = "function"
console.log(typeof (123));//typeof(123)返回"number" console.log(typeof ("123"));//typeof("123")返回"string" var param1 = "string"; var param2 = new Object(); var param3 = 10; console.log(typeof(param1)+"\n"+typeof(param2)+"\n"+typeof(param3)); // string object number
대신에 if(typeof a!="undefine"){alert("ok")}와 같이 typeof를 사용하여 변수가 존재하는지 확인할 수 있습니다. a가 존재하지 않으면(선언되지 않음) 오류가 발생하므로 if(a)를 사용하십시오. Array 및 Null과 같은 특수 객체에 typeof를 사용하면 항상 object가 반환됩니다.
배열은 동일한 이름을 가진 여러 입력과 같이 js에서 자주 사용됩니다. 동적으로 생성되는 경우 제출 시 배열인지 여부를 확인해야 합니다.
if(document.mylist.length != "undefined" ) {} //这个用法有误. 正确的是 `if( typeof(document.mylist.length) != "undefined" ) {}` 或 `if( !isNaN(document.mylist.length) ) {}`
typeof의 피연산자는 정의되지 않으며 반환되는 값입니다.
JavaScript에서는 typeof 연산자를 사용하여 변수 유형을 결정하는 데 자주 사용됩니다. 참조 유형을 사용하여 값을 저장할 때 문제가 발생합니다. "개체"를 반환합니다. 객체가 다른 객체의 인스턴스인지 여부를 감지하려면 인스턴스가 필요합니다.
instanceof
instanceof 연산자는 객체의 프로토타입 체인에 생성자의 프로토타입 속성이 있는지 테스트하는 데 사용됩니다.
구문: object 인스턴스of 생성자
매개변수: 개체(감지할 개체) 생성자(생성자)
설명: 인스턴스오브 연산자는 매개변수 개체의 프로토타입 체인에 constructor.prototype이 존재하는지 여부를 감지하는 데 사용됩니다.
instance: 인스턴스, example
a instanceof b?alert("true"):alert("false"); //a는 b의 인스턴스인가요? True: False
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) 会返回true alert(a==b); //flase
Case:
另外,更重的一点是 `instanceof` 可以在继承关系中用来判断一个实例是否属于它的父类型。 例如: function Foo(){} Foo.prototype = new Aoo();//JavaScript 原型继承 var foo = new Foo(); console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true 上面的代码中是判断了一层继承关系中的父类,在多层继承关系中,instanceof 运算符同样适用。 又如: console.log(Object instanceof Object);//true console.log(Function instanceof Function);//true console.log(Number instanceof Number);//false console.log(String instanceof String);//false console.log(Function instanceof Object);//true console.log(Foo instanceof Function);//true console.log(Foo instanceof Foo);//false
// 定义构造函数 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
instanceof에 관해서는 함수의 인수인 질문을 하나 더 삽입해야 합니다. 모두가 인수가 Array 라고 생각할 수 있지만, 테스트를 위해 instanceof 를 사용하면 인수가 비슷해 보이지만 Array 객체가 아니라는 것을 알게 될 것입니다.
또한:
Test var a=new Array();if (객체 인스턴스) Alert('Y');else Alert('N');
got'Y'
but if (창 인스턴스 오브 객체) ) Alert('Y');else Alert('N');
gets'N'
그래서 여기에서 instanceof로 테스트한 객체는 dom 모델 객체가 아닌 js 구문의 객체를 참조합니다.
typeof
alert(typeof(window))를 사용하면 객체를 얻을 때 약간의 차이가 있습니다
식이 obj instanceof Foo가 true를 반환한다고 해서 식이 항상 true를 반환한다는 의미는 아닙니다. 왜냐하면 Foo .prototype 속성의 값이 변경될 수 있고, 변경된 값이 obj의 프로토타입 체인에 존재하지 않을 수 있기 때문입니다. 이 경우 원래 표현식의 값은 false가 됩니다. 또 다른 경우에는 원래 표현식의 값도 변경됩니다. 즉, 객체 obj의 프로토타입 체인이 변경됩니다. 비록 현재 ES 사양에서는 객체의 프로토타입을 읽을 수만 있고 변경할 수는 없지만 비표준 __proto__ 마법 속성의 도움을 받을 수 있습니다. 예를 들어, obj.__proto__ = {}를 실행한 후 obj instanceof Foo는 false를 반환합니다.
예: String 객체와 Date 객체가 모두 Object 유형에 속함을 보여줍니다.
다음 코드는 String 및 Date 객체도 Object 유형에 속함을 증명하기 위해 instanceof를 사용합니다.
위 내용은 JavaScript에서 typeof와 instanceof의 차이점 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!