찾다
웹 프론트엔드JS 튜토리얼JavaScript에서 typeof와 instanceof의 차이점 소개(코드 예)

이 글은 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를 사용합니다.

rreee

위 내용은 JavaScript에서 typeof와 instanceof의 차이점 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 segmentfault에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
趣谈ChatGPT原理及算法趣谈ChatGPT原理及算法Apr 27, 2023 pm 08:46 PM

​去年12月1日,OpenAI推出人工智能聊天原型ChatGPT,再次赚足眼球,为AI界引发了类似AIGC让艺术家失业的大讨论。ChatGPT是一种专注于对话生成的语言模型。它能够根据用户的文本输入,产生相应的智能回答。这个回答可以是简短的词语,也可以是长篇大论。其中GPT是GenerativePre-trainedTransformer(生成型预训练变换模型)的缩写。通过学习大量现成文本和对话集合(例如Wiki),ChatGPT能够像人类那样即时对话,流畅的回答各种问题。(当然回答速度比人还是

深入解析MySQL MVCC 原理与实现深入解析MySQL MVCC 原理与实现Sep 09, 2023 pm 08:07 PM

深入解析MySQLMVCC原理与实现MySQL是目前最流行的关系型数据库管理系统之一,它提供了多版本并发控制(MultiversionConcurrencyControl,MVCC)机制来支持高效并发处理。MVCC是一种在数据库中处理并发事务的方法,可以提供高并发和隔离性。本文将深入解析MySQLMVCC的原理与实现,并结合代码示例进行说明。一、M

Golang实现继承方法的基本原理和方式Golang实现继承方法的基本原理和方式Jan 20, 2024 am 09:11 AM

Golang继承方法的基本原理与实现方式在Golang中,继承是面向对象编程的重要特性之一。通过继承,我们可以使用父类的属性和方法,从而实现代码的复用和扩展性。本文将介绍Golang继承方法的基本原理和实现方式,并提供具体的代码示例。继承方法的基本原理在Golang中,继承是通过嵌入结构体的方式实现的。当一个结构体嵌入另一个结构体时,被嵌入的结构体就拥有了嵌

深入解析Struts2框架的工作原理与实现方式深入解析Struts2框架的工作原理与实现方式Jan 05, 2024 pm 04:08 PM

解读Struts2框架的原理及实现方式引言:Struts2作为一种流行的MVC(Model-View-Controller)框架,被广泛应用于JavaWeb开发中。它提供了一种将Web层与业务逻辑层分离的方式,并且具有灵活性和可扩展性。本文将介绍Struts2框架的基本原理和实现方式,同时提供一些具体的代码示例来帮助读者更好地理解该框架。一、框架原理:St

深入理解Java反射机制的原理与应用深入理解Java反射机制的原理与应用Dec 23, 2023 am 09:09 AM

深入理解Java反射机制的原理与应用一、反射机制的概念与原理反射机制是指在程序运行时动态地获取类的信息、访问和操作类的成员(属性、方法、构造方法等)的能力。通过反射机制,我们可以在程序运行时动态地创建对象、调用方法和访问属性,而不需要在编译时知道类的具体信息。反射机制的核心是java.lang.reflect包中的类和接口。其中,Class类代表一个类的字节

深入探究Maven生命周期的功能和机制深入探究Maven生命周期的功能和机制Jan 04, 2024 am 09:09 AM

深入理解Maven生命周期的作用与原理Maven是一款非常流行的项目管理工具,它使用一种灵活的构建模型来管理项目的构建、测试和部署等任务。Maven的核心概念之一就是生命周期(Lifecycle),它定义了一系列阶段(Phase)和每个阶段的目标(Goal),帮助开发人员和构建工具按照预定的顺序执行相关操作。Maven的生命周期主要分为三套:Clean生命周

了解PHP底层开发原理:基础知识和概念介绍了解PHP底层开发原理:基础知识和概念介绍Sep 10, 2023 pm 02:31 PM

了解PHP底层开发原理:基础知识和概念介绍作为一名PHP开发者,了解PHP底层开发原理是非常重要的。正因为如此,本文将介绍PHP底层开发的基础知识和概念,帮助读者更好地理解和应用PHP。一、什么是PHP?PHP(全称:HypertextPreprocessor)是一门开源的脚本语言,主要用于Web开发。它可以嵌入到HTML文档中,通过服务器解释执行,并生成

PHP邮件队列系统的原理和实现方式是什么?PHP邮件队列系统的原理和实现方式是什么?Sep 13, 2023 am 11:39 AM

PHP邮件队列系统的原理和实现方式是什么?随着互联网的发展,电子邮件已经成为人们日常生活和工作中必不可少的通信方式之一。然而,随着业务的增长和用户数量的增加,直接发送电子邮件可能会导致服务器性能下降、邮件发送失败等问题。为了解决这个问题,可以使用邮件队列系统来通过串行队列的方式发送和管理电子邮件。邮件队列系统的实现原理如下:邮件入队列当需要发送邮件时,不再直

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.