Rumah > hujung hadapan web > tutorial js > Bagaimana untuk mendapatkan jenis pembolehubah javascript

Bagaimana untuk mendapatkan jenis pembolehubah javascript

青灯夜游
Lepaskan: 2021-10-28 17:47:52
asal
8457 orang telah melayarinya

Kaedah untuk mendapatkan jenis pembolehubah JavaScript: 1. Gunakan operator jenis, sintaks "pembolehubah jenis" 2. Gunakan kaedah "$.type()" jQuery 3. Dapatkan jenis melalui pembina.

Bagaimana untuk mendapatkan jenis pembolehubah javascript

Persekitaran pengendalian tutorial ini: sistem windows7, versi javascript1.8.5&&jquery1.10.0, komputer Dell G3.

Dalam JavaScript, cara mendapatkan nama jenis pembolehubah dengan tepat ialah soalan yang sering ditanya

Tetapi selalunya mustahil untuk mendapatkan nama pembolehubah yang tepat, atau kaedah dalam jQuery. mesti digunakan. Di sini I Tiga kaedah untuk mendapatkan jenis pembolehubah melalui typeof, jQuery.type dan constructor akan diperkenalkan secara terperinci.

Saya harap ia dapat membantu anda.

Pada pandangan pertama apabila Saya melihat soalan itu, terdapat beberapa Pelajar mungkin memikirkan operator jenis


Gunakan jenis untuk mendapatkan jenis asas

Dalam bahasa JavaScript, ia. diberikan untuk menggunakan operator typeof untuk mendapatkan jenis asas Nama jenis (Perhatikan bahawa ia bukan jenis asas)

Ini semua adalah penggunaan 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);
Salin selepas log masuk

Inilah hasilnya

Menurut hasil cetakan di atas, ringkaskan perkara berikut untuk diberi perhatian

  • jenis (jenis rujukan) kecuali fungsi, semuanya adalah 'objek', Contohnya, jenis /123/

  • jenis null ialah 'objek'

  • jenis undefined ialah 'undefined' Biasanya, jika anda menggunakan dua tanda sama, null == undefined adalah benar

  • ialah penggunaan biasa untuk menukar kepada nombor ". 10"-0. Jika penukaran tidak berjaya, NaN dikembalikan. Disebabkan oleh ciri NaN: NaN != NaN, Oleh itu, cara biasa untuk menilai sama ada penukaran berjaya atau tidak ialah: (Ini juga yang saya ditemui dengan merujuk kepada kod sumber jQuery Membaca kod sumber jQuery 100 kali bukanlah keterlaluan)
    ("10x" - 0) == ("10x" - 0); // 结果为假!

Gunakan kaedah $.type() dalam jQuery

Sekarang lihat bagaimana jQuery melakukannya

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

Oleh kerana hasil panggilan kaedah prototype.toString() adalah sebagai berikut

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) );
Salin selepas log masuk

Hasil cetakan di atas bertepatan dengan

class2type[ "[object " + name + "]" ] = name.toLowerCase();
Salin selepas log masuk

!

Ini ialah kaedah teras 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;
},
Salin selepas log masuk

Perhatikan, mengapa null atau undefined dibincangkan secara berasingan, kerana dalam sesetengah versi penyemak imbas


console.log(core_toString.call(null));
console.log(core_toString.call(undefined));
Salin selepas log masuk

Ini akan melaporkan ralat!

Jika ia adalah jenis objek, satu lagi: Dalam sesetengah penyemak imbas versi yang lebih rendah, typeof /123/ akan mengembalikan "fungsi " dan bukannya "objek", jadi di sini anda perlu menentukan sama ada ia adalah a function. Anda mesti faham bahawa typeof obj === function di sini tidak dibincangkan untuk fungsi, kerana fungsi itu sendiri boleh mendapatkan jenis melalui typeof

typeof obj === "object" || typeof obj === "function" ?
        class2type[ core_toString.call(obj) ]
Salin selepas log masuk

boleh digunakan secara langsung Mengembalikan hasil pasangan nilai kunci. dalam class2type. Jika tidak, ia mesti merupakan jenis asas. taip

class2type[ core_toString.call(obj) ] || "object" :
// 这是防止一些未知情况的,如果未取到,就返回object
Salin selepas log masuk

// Ambil perhatian bahawa [objek Objek] akan dicetak di sini Melalui kaedah di atas, jenis tersuai yang tepat tidak boleh diperolehiIni juga merupakan kecacatan besar!

Seterusnya, kami mendapat jenis yang tepat melalui pembina
function Person(){
   this.name = &#39;pawn&#39;;
}
var p = Person.toString();
Salin selepas log masuk

Dapatkan jenis melalui pembina

Sebelum memahami kaedah ini, anda perlu memahami dua mata

atribut prototaip prototaip

Kami tahu bahawa mana-mana objek atau fungsi mewarisi secara langsung atau tidak langsung Daripada Objek atau Fungsi, (sebenarnya, Fungsi akhirnya mewarisi daripada Objek, yang tergolong dalam pengetahuan rantai prototaip). Kemudian, mana-mana objek mempunyai objek prototaip __proto__ (objek ini hanya terdedah dalam chrome dan firefox, tetapi juga wujud dalam pelayar lain Objek prototaip ini ialah atribut prototaip pembina objek ini (ini mungkin agak mengelirukan).

Memandangkan mana-mana fungsi mempunyai prototaip atribut prototaip, dan atribut prototaip ini mempunyai pembina atribut lalai, yang merupakan rujukan kepada fungsi ini, lihat kod berikut

Saya dapati bahawa kedua-dua perkara ini sebenarnya adalah perkara yang sama

Namun, dalam beberapa kes, anda perlu menulis seperti ini
  function Person(){
      this.name = &#39;pawn&#39;;
  }
  console.log(Person.prototype.constructor === Person);
Salin selepas log masuk

Melakukannya akan menimpa prototaip asal kaedah , maka konstruktor tidak wujud Ini adalah objek yang mesti diisytiharkan secara eksplisit

Dalam jQuery, ini adalah bagaimana ia dilakukan,

  function Person(){
      this.name = &#39;pawn&#39;;
  }
  Person.protype = {
      XX: ... ,
      xx: ... ,
      ...
  }
Salin selepas log masuk

Mengenai. Cara objek jQuery dikapsulkan juga patut dipelajari

  Person.protype = {
      construction: Person,
      XX: ... ,
      xx: ... ,
      ...
  }
Salin selepas log masuk

  jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
        var match, elem;
Salin selepas log masuk
Function.prototype.toString()


Perhatikan bahawa ini sudah Bukannya saya biasa dengan [objek Objek], tetapi ia telah ditulis semula.

    也就是,如果调用一个函数的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
           }
       }
    Salin selepas log masuk

    如果是对象或者函数类型

       function Person(){
           this.name = &#39;pawn&#39;;
       }
       var p = new Person();
       console.log(p.constructor);
    Salin selepas log masuk

    现在要做的事 : 如何将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;);
    Salin selepas log masuk

    使用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;
        }
    };
    Salin selepas log masuk

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

    简化

    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;
        }
    };
    Salin selepas log masuk

    还是比较麻烦,继续简化

    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;
    };
    Salin selepas log masuk

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

    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));
    Salin selepas log masuk

    【推荐学习:javascript高级教程

    Atas ialah kandungan terperinci Bagaimana untuk mendapatkan jenis pembolehubah javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan