Parlez brièvement du jugement de type dans les compétences Javascript_javascript

Il existe plusieurs façons de déterminer le type de données

1. Opérateur unaire typeOf

2. Instance d'opérateur relationnel de

3. Attribut constructeur

4. Attribut du prototype

1. type de

Les valeurs de retour de typeof sont les suivantes

Tapez	Structure
Indéfini	"undefined"
Nul	"object" (voir ci-dessous)
Valeur booléenne	"boolean"
Valeur	"number"
Chaîne	"string"
Symbole (nouveau dans ECMAScript 6)	"symbol"
Objet hôte (fourni par l'environnement JS, tel qu'un navigateur)	Dépend de la mise en œuvre
Objet fonction (implémente [[Call]] en termes ECMA-262)	"function"
Tout autre objet	"object"

Méthode simple et grossière, il suffit de regarder le code

// 以下代码在版本 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 ne peut vérifier que les 7 types ci-dessus

2. instance de

L'opérateur instanceof est utilisé pour identifier le type d'objet en cours de traitement, obligeant les développeurs à confirmer explicitement que l'objet est d'un type spécifique

1. instanceof n'a rien à voir avec le constructeur

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. Instanceof est également appelé opérateur relationnel, qui peut être utilisé pour déterminer si l'attribut prototype d'un certain constructeur existe sur la chaîne prototype d'un autre objet à détecter

var str = new String("hello world");
console.log(str instanceof String);//true
console.log(String instanceof Function);//true
console.log(str instanceof Function);//false

Pourquoi la troisième sortie renvoie-t-elle false ? Adresse originale : Une question sur instanceof en Javascript

//表达式一的指向
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

Regardons une autre utilisation compliquée

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

Pourquoi, pourquoi est-ce ? Vous devez comprendre le sens suivant

1. Comment cet opérateur est-il défini dans la spécification du langage

2. Mécanisme d'héritage prototype JavaScript

Instance d'objet d'objet

// 为了方便表述，首先区分左侧表达式和右侧表达式
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

Instance de fonction de fonction

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

<strong>Foo instanceof Foo
</strong>
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

Application d'instanceof dans le mécanisme d'héritage du Dojo

En JavaScript, il n'y a pas de notion d'héritage multiple, tout comme Java. Mais lorsque vous utilisez declare pour déclarer une classe dans Dojo, il est permis d'hériter de plusieurs classes

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 de et plusieurs objets globaux (interaction entre plusieurs cadres ou plusieurs fenêtres)

Dans un navigateur, notre script peut avoir besoin d'interagir entre plusieurs fenêtres. Plusieurs fenêtres signifient plusieurs environnements globaux, et différents environnements globaux ont différents objets globaux et donc différents constructeurs de types intégrés. Cela peut poser certains problèmes. Par exemple, l'expression [] instanceof window.frames[0].Array renverra false car Array.prototype !== window.frames[0].Array.prototype, vous devez donc utiliser Array.isArray(myObj) ou Object. prototype.toString.call(myObj) === "[object Array]" pour déterminer si myObj est un tableau.

// 以下代码在版本 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

Remarque : undefined et null sont des types d'objet détectés, car il n'y a pas de types globaux de Undefined et Null dans js, et number, string et boolean ne peuvent pas détecter leurs types

3. constructeur

Lorsque nous utilisons instanceof pour détecter les types de variables, nous ne pouvons pas détecter les types number, 'string' et bool. Par conséquent, nous devons trouver un autre moyen de résoudre ce problème

Object.prototype.constructor renvoie une référence à la fonction qui a créé le prototype de l'objet. Notez que la valeur de cette propriété est la fonction elle-même et non une chaîne contenant le nom de la fonction. Pour les valeurs primitives (telles que 1, true ou "test"), cette propriété est en lecture seule, et tous les objets héritent d'une propriété constructeur de son prototype

Constructor est à l'origine une propriété sur l'objet prototype, pointant vers le constructeur. Cependant, selon l'ordre dans lequel l'objet instance recherche les attributs, s'il n'y a pas d'attribut ou de méthode d'instance sur l'objet instance, il sera recherché sur la chaîne prototype. Par conséquent, l'objet instance peut également utiliser l'attribut constructeur

function Person(){
 
}
var Tom = new Person();
 
console.log(Tom.constructor === Person);//true

Veuillez toutefois noter que l'attribut constructeur peut être modifié, ce qui entraînera des résultats détectés incorrects

function Person(){
 
}
function Student(){
 
}
Student.prototype = new Person();
var John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person); // true

Changer la valeur de la propriété constructeur de cet objet

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("\n") );

Sauf non défini et nul, le type d'autres types de variables peut être déterminé à l'aide du constructeur

4. L'Object.prototype.toString.call universel

Utilisez la méthode toString() pour détecter le type d'objet

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

Ci-joint la fonction de jugement. Que savez-vous des types de données en Javascript

5. Implémentation de jquery jquery : "1.8.2",

jquery fournit une interface $.type, jetez un œil au code

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
},

On peut voir que jquery est implémenté en utilisant Object.prototype.toString.call