ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript変数の型を取得する方法

JavaScript変数の型を取得する方法

青灯夜游
リリース: 2021-10-28 17:47:52
オリジナル
8457 人が閲覧しました

JavaScript 変数の型を取得する方法: 1. typeof 演算子、構文 "typeof variable" を使用します; 2. jQuery の "$.type()" メソッドを使用します; 3. コンストラクターを通じて型を取得します。

JavaScript変数の型を取得する方法

このチュートリアルの動作環境: Windows7 システム、javascript1.8.5&&jquery1.10.0 バージョン、Dell G3 コンピューター。

JavaScript では、変数の型名を正確に取得する方法がよく質問されます。

ただし、変数の正確な名前やメソッドを取得することは、多くの場合不可能です。ここでは typeof、jQuery.type、コンストラクタを使って変数の型を取得する 3 つの方法を詳しく紹介します

参考になれば幸いです

この質問を見たときに、typeof 演算子を思い浮かべた学生もいるかもしれません。


typeof を使用して基本型を取得します

JavaScript 言語では、次のようになります。 typeof 演算子を使用して基本型を取得するために指定された型名 (基本型ではないことに注意してください)

これが typeof

01-typeof.htm の使用方法のすべてです

console.log('typeof of 10 ~~~~' +typeof 10);
console.log('typeof of "a" ~~~~' +typeof 'a');
console.log('typeof of true ~~~~' +typeof true);
console.log('typeof of {} ~~~~' +typeof {});
console.log('typeof of /123/ ~~~~' +typeof /123/);
console.log('typeof of function(){} ~~~~' +typeof function(){});
console.log('typeof of undefined ~~~~' +typeof undefined);
console.log('typeof of null ~~~~' +typeof null);
ログイン後にコピー

これが結果です

上記の印刷結果をもとに、以下の注意点をまとめます

  • typeof (参照型) 関数を除いて、それらはすべて「オブジェクト」です (例: typeof /123/

  • typeof null は 'object'

  • #)
  • ##typeof unknown は「unknown」です。通常、2 つの等号を使用すると、null = = unknown が true になります。

  • 数値への変換の一般的な使用法は「10」です。 -0. 変換が成功しなかった場合は、NaN が返されます。NaN の特性により、NaN != NaN であるため、変換の成功または失敗の一般的なプラクティス: (これも、jQuery を見て見つけたものです) jQuery ソース コードを 100 回読むだけでは十分ではありません)


    ("10x" - 0) == ("10x" - 0 ); // 結果は false!

jQuery でメソッド $.type()## を使用する #次に、jQuery がどのように実行するかを見てみましょう

// 先申明一个对象,目的是用来做映射
var class2type = {};
// 申明一个core_toString() 的方法,得到最原始的toString() 方法,因为在很多对象中,toStrintg() 已经被重写 
var core_toString() = class2type.toString;
ログイン後にコピー
// 这里为 toStrintg() 后的结果和类型名做一个映射,申明一个core_toString() 后的结果,而值就是类型名
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
ログイン後にコピー

Object.prototype.toString() メソッドの呼び出し結果は次のとおりであるため、

var core_toString = {}.toString;
console.log( core_toString.call(1) );
console.log( core_toString.call("11") );
console.log( core_toString.call(/123/) );
console.log( core_toString.call({}) );
console.log( core_toString.call(function(){}) );
console.log( core_toString.call([]) );
console.log( core_toString.call(true) );
console.log( core_toString.call(new Date()) );
console.log( core_toString.call(new Error() ));
console.log( core_toString.call(null) );
console.log( core_toString.call(undefined) );
console.log( String(null) );
console.log( String(undefined) );
ログイン後にコピー

上記の出力結果は

class2type[ "[object " + name + "]" ] = name.toLowerCase();
ログイン後にコピー

偶然にも!# と同じです。

##これは jQuery のコア メソッドです。type

type: function( obj ) {
    if ( obj == null ) {
        return String( obj );
    }
    // Support: Safari <= 5.1 (functionish RegExp)
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[ core_toString.call(obj) ] || "object" :
        typeof obj;
},
ログイン後にコピー

#注意してください。null または未定義については別個に説明します。これは、一部のバージョンではブラウザで

#
console.log(core_toString.call(null));
console.log(core_toString.call(undefined));
ログイン後にコピー

これはエラーを報告します!

オブジェクト タイプの場合、別の: 一部の以前のバージョンのブラウザでは、typeof /123/ は " ではなく "function" を返すためです。 object" であるため、それが関数であるかどうかを判断する必要があります。関数の型自体は typeof を通じて取得できるため、

typeof obj === function
は関数については説明されないことを理解する必要があります。
typeof obj === "object" || typeof obj === "function" ?
        class2type[ core_toString.call(obj) ]
ログイン後にコピー

class2type のキーと値のペアの結果を直接返します。そうでない場合は、基本型である必要があり、typeof を通じて取得できます。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">class2type[ core_toString.call(obj) ] || &quot;object&quot; : // 这是防止一些未知情况的,如果未取到,就返回object</pre><div class="contentsignin">ログイン後にコピー</div></div> ただし、

jQuery .type

大きな欠陥があります

これはカスタム タイプです

function Person(){
   this.name = &#39;pawn&#39;;
}
var p = Person.toString();
ログイン後にコピー

// [object Object] がここに出力されることに注意してください。上記のメソッドを通じて、正確なカスタム型を取得できない

これも大きな欠陥です!

#次に、コンストラクターを通じて正確な型を取得します


コンストラクターを通じて型を取得します

このメソッドを理解する前に、次の 2 つの点を理解する必要があります。

prorotype プロトタイプ属性

私たちは、任意のオブジェクトまたは関数を直接またはオブジェクトまたは関数から間接的に継承します (実際、関数は最終的にプロトタイプ チェーンの知識に属するオブジェクトから継承します)。次に、どのオブジェクトにもプロトタイプ オブジェクト __proto__ があります (このオブジェクトは chrome と Firefox でのみ公開されますが、他のブラウザにも存在します)。このプロトタイプ オブジェクトは、このオブジェクトのコンストラクターのプロトタイプ属性です (これは少し混乱するかもしれません)。

どの関数にもプロトタイプ属性プロトタイプがあり、このプロトタイプ属性にはこの関数への参照であるデフォルト属性コンストラクターがあるため、次のコードを参照してください
  function Person(){
      this.name = &#39;pawn&#39;;
  }
  console.log(Person.prototype.constructor === Person);
ログイン後にコピー

これら 2 つは実際には同じものであることがわかりました

ただし、場合によっては、次のように記述する必要があります

  function Person(){
      this.name = &#39;pawn&#39;;
  }
  Person.protype = {
      XX: ... ,
      xx: ... ,
      ...
  }
ログイン後にコピー

そうすると、元のプロトタイプ メソッドが上書きされ、コンストラクターはこれはもう存在しません。これは明示的に宣言する必要があるオブジェクトです。

  Person.protype = {
      construction: Person,
      XX: ... ,
      xx: ... ,
      ...
  }
ログイン後にコピー

jQuery では、これがどのように行われるかです。

  jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
        var match, elem;
ログイン後にコピー

jQuery オブジェクトをカプセル化する方法も次のとおりです。 Research

Function.prototype.toString()


  • これは [ object Object] ですが、書き換えられています。

    也就是,如果调用一个函数的toString() 方法.那么就会打印这个函数的函数体.


    好了,经过上面两个步骤,你明白我要做什么了吗?

    如何通过构造函数来获得变量的类型?

    判断是否是基本类型

       var getType = function(obj){
           if(obj == null){
              return String(obj);
           }
           if(typeof obj === &#39;object&#39; || typeof obj === &#39;fucntion&#39;){
               ...
           }else{
               // 如果不是引用类型,那么就是基本类型
               return typeof obj
           }
       }
    ログイン後にコピー

    如果是对象或者函数类型

       function Person(){
           this.name = &#39;pawn&#39;;
       }
       var p = new Person();
       console.log(p.constructor);
    ログイン後にコピー

    现在要做的事 : 如何将Person 提取出来呢?
    毋庸置疑,字符串切割那一套肯定可以办到,但是太 low 啦!
    这里,我使用正则将Person提取出来

     var regex = /function\s(.+?)\(/
       function Person(){
        this.name = &#39;pawn&#39;;
       }
       var p = new Person();
       var c = p.constructor
       var regex = /function\s(.+?)\(/;
       console.log(&#39;|&#39; + regex.exec(c)[1] + &#39;|&#39;);
    ログイン後にコピー

    使用name

    其实,除了上面的正则,每个函数还有一个name属性,返回函数名,但是ie8 是不支持的.

    因此上面的代码可以写为:

    var getType = function(obj){
        if(obj == null){
            return String(obj);
        }
        if(typeof obj === &#39;object&#39; || typeof obj === &#39;function&#39;){ 
            var constructor = obj.constructor;
            if(constructor && constructor.name){
                return constructor.name;
            }
            var regex = /function\s(.+?)\(/;
            return regex.exec(c)[1];
        }else{
            // 如果不是引用类型,那么就是基本;类型
            return typeof obj;
        }
    };
    ログイン後にコピー

    但是上面的代码太丑啦,将其简化

    简化

    var getType = function(obj){
        if(obj == null){
            return String(obj);
        }
        if(typeof obj === &#39;object&#39; || typeof obj === &#39;function&#39;){ 
            return obj.constructor && obj.constructor.name.toLowerCase() || 
              /function\s(.+?)\(/.exec(obj.constructor)[1].toLowerCase();
        }else{
            // 如果不是引用类型,那么就是基本类型
            return typeof obj;
        }
    };
    ログイン後にコピー

    还是比较麻烦,继续简化

    var getType = function(obj){
        if(obj == null){
           return String(obj);
        }
        return typeof obj === &#39;object&#39; || typeof obj === &#39;function&#39; ?
          obj.constructor && obj.constructor.name && obj.constructor.name.toLowerCase() ||
              /function\s(.+?)\(/.exec(obj.constructor)[1].toLowerCase():
          typeof obj;
    };
    ログイン後にコピー

    好了,已经全部弄完了,写个代码测试一下:

    function Person(){
        this.name = &#39;pawn&#39;;
    }
    var p = new Person();
    
    console.log(getType(p));
    console.log(getType(1));
    console.log(getType("a"));
    console.log(getType(false));
    console.log(getType(/123/));
    console.log(getType({}));
    console.log(getType(function(){}));
    console.log(getType(new Date()));
    console.log(getType(new Error()));
    console.log(getType( null));
    console.log(getType( undefined));
    ログイン後にコピー

    【推荐学习:javascript高级教程

    以上がJavaScript変数の型を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート