Javascriptの中のタイプの判断について簡単に話してください.

14023 ワード

データの種類の判断にはこのようないくつかの方法があります.
1元演算子typeOf
2、関係演算子instance of
3、constructor属性
4、prototype属性
一、typeof
typeofの戻り値は以下の種類があります.
タイプ
構造
Udefined"undefined"Null"object" (下を参照)
ブール値"boolean"数値"number"文字列"string"Symbol(ECMAScript 6追加)"symbol"宿主オブジェクト(JS環境提供のもの、ブラウザなど)
Implementation-dependent
関数オブジェクト(implements[[Call]]in ECMA-232 terms)"function"任意の他のオブジェクト"object"簡単で乱暴な方法で、直接コードを見ます.

//         Google Chrome 45.0.2454.101 m      
// Numbers
console.log(typeof 37 === 'number');
console.log(typeof 3.14 === 'number');
console.log(typeof Math.LN2 === 'number');
console.log(typeof Infinity === 'number');
console.log(typeof NaN === 'number'); //   NaN "Not-A-Number"   ,   "      "
console.log(typeof Number(1) === 'number'); //       !
 
// Strings
console.log(typeof "" === 'string');
console.log(typeof "bla" === 'string');
console.log(typeof (typeof 1) === 'string'); // console.log(typeof           
console.log(typeof String("abc") === 'string'); //       !
 
// Booleans
console.log(typeof true === 'boolean');
console.log(typeof false === 'boolean');
console.log(typeof Boolean(true) === 'boolean'); //       !
 
// Symbols
console.log(typeof Symbol() === 'symbol');
console.log(typeof Symbol('foo') === 'symbol');
console.log(typeof Symbol.iterator === 'symbol');
 
// Undefined
console.log(typeof undefined === 'undefined');
console.log(typeof blabla === 'undefined'); //         ,               
 
// Objects   Array.isArray  Object.prototype.toString.call                  
console.log(typeof {a:1} === 'object');
console.log(typeof [1, 2, 4] === 'object');
console.log(typeof /^[a-zA-Z]{5,20}$/ === 'object');
console.log(typeof {name:'wenzi', age:25} === 'object');
console.log(typeof null === 'object');//true
 
//          ,      !
console.log(typeof new Boolean(true) === 'object');
console.log(typeof new Number(1) === 'object');
console.log(typeof new Date() === 'object');
console.log(typeof new String("abc") === 'object');
console.log(typeof new Error() === 'object');
 
//   
console.log(typeof function(){} === 'function');
console.log(typeof Math.sin === 'function');
typeofは以上の7種類のタイプしかチェックできません.
二、instance of
instance of演算子は、処理中のオブジェクトの種類を識別するために使用され、特定のタイプのオブジェクトを開発者に明確に確認するように要求されます.
1、instance ofとconstructorは関係ありません.

var A = function() {};
A.prototype = {};
 
var B = {};
console.log(A.constructor);//function Function() { [native code] }
console.log(B.constructor);//function Object() { [native code] }
 
var a = new A();
A.prototype = {};
 
var b = new A();
b.constructor = A.constructor;
 
console.log(a.constructor === A);//false
console.log(a.constructor);//function Object() { [native code] }
console.log(typeof A);//function Object() { [native code] }
 
console.log(a.constructor === b.constructor);//false
console.log(b.constructor);//function Function() { [native code] }
 
console.log(a instanceof A);//false
console.log(b instanceof A);//true
2、instance ofはまた関係演算子と呼ばれ、ある構造関数のprototype属性が別のオブジェクトを検出するためのプロトタイプチェーン上に存在するかどうかを判断するために使用できます.

var str = new String("hello world");
console.log(str instanceof String);//true
console.log(String instanceof Function);//true
console.log(str instanceof Function);//false
第三の出力はどうしてfalseに戻りますか?Javascriptの中の一つはinstance ofに関する問題です.

//       
console.log(str.__proto__ === String.prototype);//true
console.log(str instanceof String); //true
 
//       
console.log(String .__proto__ === Function.prototype);//true
console.log(String instanceof Function);//true
 
//       
console.log(str .__proto__ === String.prototype);//true
console.log(str .__proto__.__proto__ === String.prototype.__proto__);//true
console.log(str .__proto__.__proto__ === Object.prototype);//true
console.log(str .__proto__.__proto__.__proto__ === null);//true
console.log(str instanceof Object);//true
console.log(str instanceof Function);//false
 もう一つの複雑な使い方を見てください.

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
なぜ、これはなぜですか?
1、言語規範では、この演算子はどのように定義されていますか?
2、JavaScript原型継承メカニズム
Object instance of Object

//       ,               
ObjectL = Object, ObjectR = Object;
console.log(ObjectL instanceof ObjectR);//true
 

//           
console.log(ObjectL.__proto__ === Function.prototype); //true
console.log(ObjectL.__proto__.__proto__ === Object.prototype);//true
Function instance of Function

FunctionL = Function, FunctionR = Function;
console.log(FunctionL instanceof FunctionR);//true
console.log(FunctionL.__proto__ === Function.prototype); //true

Foo instanceof Foo

function Foo(){}
var foo = new Foo();
FooL = Foo, FooR = Foo;
console.log(FooL instanceof FooR);//false
console.log(FooL.__proto__ === Function.prototype );//true
console.log(FooL.__proto__.__proto__ === Object.prototype );//true
console.log(FooL.__proto__.__proto__.__proto__ === null );//true

 instance of Dojo継承メカニズムにおけるアプリケーション
JavaScriptでは、この概念を多く受け継いでいないのです.Javaのようです.しかし、Dojoでdeclare宣言クラスを使用すると、複数のクラスからの継承が許可されます.

dojo.declare("Aoo",null,{});
dojo.declare("Boo",null,{});
dojo.declare("Foo",[Aoo,Boo],{});
 
var foo = new Foo();
console.log(foo instanceof Aoo);//true
console.log(foo instanceof Boo);//false
 
console.log(foo.isInstanceOf(Aoo));//true
console.log(foo.isInstanceOf(Boo));//true
instance ofと複数のグローバルオブジェクト(複数のframeまたは複数のwindow間のインタラクション)
ブラウザでは、私たちのスクリプトは複数のウィンドウ間で相互作用する必要があります.複数のウィンドウは複数のグローバル環境を意味し、異なるグローバル環境は異なるグローバルオブジェクトを有し、それによって異なる内蔵型コンストラクタを持つ.これはいくつかの問題を引き起こすかもしれない.例えば、表式[]instance of window.frames[0].Arayはfalseに戻ります.Aray.prototypeのため!==window.frames[0].Aray.prototypeは、Aray.isAray(myObj)またはObject.prototype.toString.call(myObj)===「[object Aray]」を使ってmyObjが配列かどうかを判断しなければなりません.

//         Google Chrome 45.0.2454.101 m      
// Numbers
console.log(37 instanceof Number);//false
console.log( 3.14 instanceof Number);.//false
console.log( Math.LN2 instanceof Number);//false
console.log( Infinity instanceof Number);//false
console.log( NaN instanceof Number); // false  NaN "Not-A-Number"   ,   "      "
console.log( Number(1) instanceof Number); // false      !
 
// Strings
console.log( "" instanceof String);// false
console.log( "bla" instanceof String);// false
console.log( ( 1) instanceof String); // falseconsole.log(           
console.log( String("abc") instanceof String); // false       !
 
// Booleans
console.log( true instanceof Boolean);// false
console.log( false instanceof Boolean);// false
console.log( Boolean(true) instanceof Boolean); //false       !
 
// Symbols
console.log( Symbol() instanceof Symbol);// false
console.log( Symbol("foo") instanceof Symbol);// false
console.log( Symbol.iterator instanceof Symbol);// false
 
// Undefined
var blabla;
//console.log( undefined instanceof Undefined);// Uncaught ReferenceError: Undefined is not defined
//console.log( blabla instanceof Undefined); // Uncaught ReferenceError: Undefined is not defined
console.log( undefined instanceof Object);// false
console.log( blabla instanceof Object);// false
 
// Objects   Array.isArray  Object.prototype.toString.call                  
console.log( {a:1} instanceof Object);//true
console.log( [1, 2, 4] instanceof Object);//true
console.log( /^[a-zA-Z]{5,20}$/ instanceof Object);//true
console.log( {name:'wenzi', age:25} instanceof Object);//true
console.log( null === Object);//false
 
//          ,      !
console.log( new Boolean(true) instanceof Object);//true
console.log( new Number(1) instanceof Object);//true
console.log( new Date() instanceof Object);//true
console.log( new String("abc") instanceof Object);//true
console.log( new Error() instanceof Object);//true
 
//   
console.log( function(){} instanceof Function );//true
console.log( Math.sin instanceof Function);//true
注意:undefinedとnullは検出されたObjectタイプです.jsにはUnidefinedとNullという大域タイプがないため、number、stringとbollanはそのタイプを検出できません.
三、constructor
instance ofを使って変数タイプを検出する場合、number、string、bookのタイプは検出できません.したがって、私たちはこの問題を解決するために他の方法が必要です.
Object.prototype.com nstructorは、オブジェクトの原型を作成した関数参照を返す.なお、この属性の値は、関数名を含む文字列ではなく、その関数自体である.オリジナルの値(例えば、trueまたは「test」)に対しては、この属性は読み取り専用であり、すべてのオブジェクトはその原型からconstructorの属性を継承します.
constructorは元のオブジェクトの属性であり、構造関数を指しています.ただし、例示的なオブジェクトに従って属性を探す順序は、インスタンスオブジェクトに例示的な属性または方法がない場合は、プロトタイプチェーン上で探すため、インスタンスオブジェクトもconstrutor属性を使用することができる.

function Person(){
 
}
var Tom = new Person();
 
console.log(Tom.constructor === Person);//true
ただし、constructorの属性は修正され、検出された結果が不正になることがありますので、注意してください.

function Person(){
 
}
function Student(){
 
}
Student.prototype = new Person();
var John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person); // true
このオブジェクトのconstructor属性の値を変更します.

function Type() { };
 
var types = [
  new Array,
  [],
  new Boolean,
  true,    // remains unchanged
  new Date,
  new Error,
  new Function,
  function(){},
  Math, 
  new Number,
  1,      // remains unchanged
  new Object,
  {},
  new RegExp,
  /(?:)/,
  new String,
  "test"    // remains unchanged
];
 
for(var i = 0; i < types.length; i++) {
  types[i].constructor = Type;
  types[i] = [ types[i].constructor, types[i] instanceof Type, types[i].toString() ];
};
 
console.log( types.join("
") );
undefinedとnullを除いて、他のタイプの変数は全部constructorを使ってタイプを判断できます.
四、万能的Object.prototype.toString.call
toString()方法を使用して、対象の種類を検出します.

function Type() { };
 
var toString = Object.prototype.toString;
console.log(toString.call(new Date) === '[object Date]');//true
console.log(toString.call(new String) ==='[object String]');//true
console.log(toString.call(new Function) ==='[object Function]');//true
console.log(toString.call(Type) ==='[object Function]');//true
console.log(toString.call('str') ==='[object String]');//true
console.log(toString.call(Math) === '[object Math]');//true
console.log(toString.call(true) ==='[object Boolean]');//true
console.log(toString.call(/^[a-zA-Z]{5,20}$/) ==='[object RegExp]');//true
console.log(toString.call({name:'wenzi', age:25}) ==='[object Object]');//true
console.log(toString.call([1, 2, 3, 4]) ==='[object Array]');//true
//Since JavaScript 1.8.5
console.log(toString.call(undefined) === '[object Undefined]');//true
console.log(toString.call(null) === '[object Null]');//true
判定関数を添付します.Javascriptのデータの種類はどれぐらい知っていますか?
五、jqueryの実現  jquery:「1.8.2」
jqueryでは$typeのインターフェースを提供しています.コードを見てください.

var m = Object.prototype.toString //501 
 
E = {};//512 
 
isFunction: function(a) { //645 
  return p.type(a) === "function"
},
isArray: Array.isArray || function(a) {
  return p.type(a) === "array"
}
,
isWindow: function(a) {
  return a != null && a == a.window
},
isNumeric: function(a) {
  return !isNaN(parseFloat(a)) && isFinite(a)
},
type: function(a) {
  return a == null ? String(a) : E[m.call(a)] || "object"
},
isPlainObject: function(a) {
  if (!a || p.type(a) !== "object" || a.nodeType || p.isWindow(a))
    return !1;
  try {
    if (a.constructor && !n.call(a, "constructor") && !n.call(a.constructor.prototype, "isPrototypeOf"))
      return !1
  } catch (c) {
    return !1
  }
  var d;
  for (d in a)
    ;
  return d === b || n.call(a, d)
},
isEmptyObject: function(a) {
  var b;
  for (b in a)
    return !1;
  return !0
},
jqueryはObject.prototype.toString.callで実現されていることが分かります.