JavaScript トピック 6: 型検出

#JavaScriptデータ型検出に関する特別なトピック

# #Directory

1.typeof
• 2.instanceof
• 3.constructor
• 4.stringTag とは何ですか?
• 5. 複数のデータ検出を実装する方法
• 最後に書きます

(無料学習の推奨事項: javascript ビデオ チュートリアル）

序文

「JavaScript データ型」では、単純な型を使用します。検出の問題についても言及されました。

フロントエンドの学習者として、typeof と instanceof を使用して実行時に JavaScript データの型を決定できることを知っておく必要があります。千人が千通りの判断方法を書くでしょうか?

この記事では、一般的な typeof からオブジェクト固有のinstanceof、isNull、isNumber、isString、その他のメソッドまで、データ型を決定する方法について説明します。一緒に作業しましょう~

1. typeof

typeof: Operator未計算のオペランドの型を示す文字列を返します。

ES6 より前の JavaScript には、次の 6 つのデータ型があったことは誰もが知っています。

#Number

String
1. Object
3. #ただし、typeof を使用してこれらのデータ型の値を操作すると、結果が返されます。 1 対 1 の対応はなく、次のようになります:
4. 未定義
5. オブジェクト – ***
6. Boolean

Number

String
1. Object
3. 驚くべきことがいくつかあります、
typeof null => 'object'
4. と
typeof function(){} => 'function '
6. したがって、ほとんどの場合、typeof を使用して基本的なデータ型を検出できます。ただし、
Object

を検出した後は、それがどの種類のオブジェクトであるかを区別できません。 ##

typeof [] === 'object'; //truetypeof {} === 'object'; //truetypeof null === 'object'; //true

概要Jの元の型を検出する場合、

typeof null

を除き、objectを返し、それ以外はすべて返します。 is 対応する型名の小文字を返します。

2. Instanceof

オブジェクト タイプを決定するときは、instanceof を使用できます: プロトタイプとプロトタイプ チェーンに詳しくない場合は、この記事を参照してください。プロトタイプからプロトタイプ チェーンへ#定義

instanceof 演算子は、コンストラクターのプロトタイプ属性がプロトタイプ チェーンに表示されるかどうかを検出するために使用されます。インスタンスオブジェクトのプロトタイプチェーンの上位。

Instance

const arr = [];const obj = {};console.log(arr instanceof Array);   // trueconsole.log(arr instanceof Object);  // trueconsole.log(obj instanceof Array);   // falseconsole.log(obj instanceof Object);  // true

instanceof は型の親クラスと一致する可能性があることに注意してください。つまり、Object が親クラスであるため、arr instanceof Array と arr instanceof Object は両方とも true になります。配列の 。

class extends

および

プロトタイプ チェーン ルール

の親子クラス関係を満たすオブジェクトは、一致させることができます:

class

class Base {}class Current extends Base {}const obj = new Current();console.log(obj instanceof Current); // trueconsole.log(obj instanceof Base); // true

#プロトタイプ チェーン

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function Foo() {}function Bar() {}Bar.prototype = new Foo();const obj = new Bar();console.log(obj instanceof Bar); // trueconsole.log(obj instanceof Foo); // true</pre><div class="contentsignin">ログイン後にコピー</div></div>obj のプロトタイプ チェーンを変更すると、instanceof の結果が変更される可能性があることに注意してください。

function Other() {}obj.__proto__ = new Other();console.log(obj instanceof Other); // trueconsole.log(obj instanceof Foo); // false

summary

Instanceof はプロトタイプ チェーンを使用して判断します。実際、タイプ

Type のプロトタイプがプロトタイプ チェーン上にある限り、 object obj

の場合、

obj instanceof Type
は true、それ以外の場合は false。

3. コンストラクター

親の型と一致させたくないが、現在の型だけを一致させたい場合は、コンストラクターを使用して判断できます。 プロトタイプやプロトタイプ チェーンに詳しくない場合は、この記事を読んでください。プロトタイプからプロトタイプ チェーンへ定義

戻るインスタンス オブジェクトを作成するオブジェクト コンストラクターへの参照。このプロパティの値は、関数名を含む文字列ではなく、関数自体への参照であることに注意してください。

インスタンス

const arr = [];console.log(arr.constructor === Array); // trueconsole.log(arr.constructor === Object); // false

オブジェクトのコンストラクターはその型を返し、その型が定義されると、値が次のとおりである name 読み取り専用属性が作成されます。タイプの名前。

class Foo {}console.log(Foo.name); // Fooconst foo = new Foo();console.log(foo.constructor === Foo); // trueconsole.log(foo.constructor.name === 'Foo'); // true

質問

constructor.name は必ずしも正しいのでしょうか? 変更できますか?

4. stringTag とは何ですか?

4.1 stringTag—タグ型

いくつかのライブラリの初期の実装を見たことがある場合は、
• Object.prototype.toString
が次の目的で使用されていることがわかります。型判定方法を行うと、
• stringTag
;

4.2 Object.prototype.toString

Definition

というデータ型の文字列タグが含まれます。

toString()メソッドは、オブジェクトを表す文字列を返します。 すべてのオブジェクトには

toString()

メソッドがあります。オブジェクトがテキスト値として表される場合、デフォルトでは、すべてのオブジェクトで

toString()

メソッドが使用されます。オブジェクトは継承します。

如果此方法在自定义对象中未被覆盖，toString() 返回 “[object type]”，其中 type 是对象的类型。以下代码说明了这一点：

实例

比如这是requirejs里面的代码片段。

var ostring = Object.prototype.toString;function isArray(it) {
  return ostring.call(it) === '[object Array]';}

toString时都做了什么？

这里直接将冴羽大大的总结搬了过来:

When the toString method is called, the following steps are taken:

1. If the this value is undefined, return “[object Undefined]”.
2. If the this value is null, return “[object Null]”.
3. Let O be the result of calling ToObject passing the this value as the argument.
4. Let class be the value of the [[Class]] internal property of O.
5. Return the String value that is the result of concatenating the three Strings "[object ", class, and “]”.

当 toString 方法被调用的时候，下面的步骤会被执行：

1. 如果 this 值是 undefined，就返回 [object Undefined]
2. 如果 this 的值是 null，就返回 [object Null]
3. 让 O 成为 ToObject(this) 的结果
4. 让 class 成为 O 的内部属性 [[Class]] 的值
5. 最后返回由 "[object " 和 class 和 “]” 三个部分组成的字符串

注意

有几点我们需要注意：

• toString无法区分原始类型及其构造对象；
  • 我们认为Number、Boolean这种类型在被构造器构造出来后的类型应该是对象；
  • 但toString都会返回[object number]等原始类型；
• toString方法是可以自定义的；

五、实现几个数据检测的方法

好了看了几款常用的类型判断方法后，我们可不可以实现自己的类型判断工具？就利用上述提到的一个或多个方法。我们自己动手丰衣足食～

5.1 isObject

注意，我们认为null不是一个对象，它就是null～

function isObject(value) {
    const type = typeof value;
    return value != null && (type === 'object' || type === 'function');}

5.2 isNull

function isNull(value) {
    return value === null;}

5.3 isFunction

function isFunction(value) {
    return typeof value === 'function';}

5.4 isArray

var isArray = Array.isArray || function( value ) {
    return type(value) === "array";}

5.5 stringTag

const toString = Object.prototype.toString;function getTag(value) {
    // if (value === null) return '[object Null]';
    // if (value == null) return '[object Undefined]'
    if (value == null) {
        return value === undefined ? '[object Undefined]' : '[object Null]'
    }
    return toString.call(value)}

好了到最后，大家平时对类型检测的态度是什么样的呢？

相关免费学习推荐：javascript（视频）

以上がJavaScript トピック 6: 型検出の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。