I. Introduction
Sometimes the type of judgment is really a headache, but once familiar with will feel much better than this. Primary, determines numbers and strings. Mid-level, it will determine arrays and objects. Advanced, will determine the date, regular, type of error. Senior, will determine plainObject, empty objects, window objects, and so on.
Basic types: String, Number, Boolean, Symbol, Undefined, Null
Reference Type: Object
Basic types also called simple type, which take up space because fixing is simple data segment, in order to facilitate lifting query variable speed, in the stack, i.e., by accessing stored values.
Reference is also known as complex types, since the size will change its value, it can not be stored in the stack, otherwise it will reduce the speed of the variable queries, therefore, the value is stored in the stack (heap), and stored in a variable at value is a pointer to the object stored at the memory, i.e. access Anzhi. In addition to the reference type Object, further comprising Function, Array, RegExp, Date and so on.
Given ECMAScript loose type, it is necessary to have a means to detect a data type of a given variable. For that matter, JavaScript also provides a variety of methods, but unfortunately, the results obtained by different methods varies.
Two, typeof
typeof is the most frequently used type of judgment.
typeof('saucxs') //'string'
typeof 'saucxs' //'string'
typeof function(){console.log('saucxs')} //'function'
typeof ['saucxs','songEagle',1,2,'a'] //'object'
typeof {name: 'saucxs'} //'object'
typeof 1 //'number'
typeof undefined //'undefined'
typeof null //'object'
typeof /^\d/ //'object'
typeof Symbol // 'function'
In fact, typeof is an operator, and a similar addition, subtraction, which is why you can write typeof 'saucxs'.
In the "JavaScript Definitive Guide" in the introduction of typeof: typeof is a unary operator, in front of a single operand, the operand may be any type. The return value indicates the type of a string operand.
JavaScript, a total of 6 in the basic data types: string, number, boolean, null, undefined, symbol, an object type: object.
Typeof values respectively corresponding to the result is not one to one, respectively: string, number, boolean, object, undefined, function, object type: object.
Note: typeof function type can be detected
But there are many segments in the object inside the property: Array, Function, Date, RegExp, Error and so on.
var date = new Date();
var error = new Error();
console.log(typeof date); // object
console.log(typeof error); // object
So it needs better differentiation.
三、instanceof
Use instanceof prerequisite: object instanceof constructor. object- object to be detected. constructor- a constructor. This instanceof instructions must be used to detect the type of the object, can not detect other types.
Examples for determining the instanceof A B A B whether the. If A is Example B Returns true, otherwise false.
Principle: instanceof is detected prototype.
instanceof (a,B) = {
var l = a.__proto__;
var R = B.prototype;
if(l === R) {
// a的内部属性 __proto__ 指向 B 的原型对象
return true;
}
return false;
}
Analysis: When a is the prototype _proto_ point B, a is is an example of B.
[] instanceof Array //true
[] instanceof Object //true
new Array([1,43,6]) instanceof Array // true
new Array([1,43,6]) instanceof Object // true
{} instanceof Object // 原型上没有定义 Uncaught SyntaxError: Unexpected token instanceof
({}) instanceof Object; //true
Object.create({'name': 'saucxs'}) instanceof Object //true
Object.create(null) instanceof Object //false 一种创建对象的方法，这种方法创建的对象不是Object的一个实例
new Date() instanceof Date //true
new Date() instanceof Object //true
'saucxs' instanceof Object //false
'saucxs' instanceof String //false
new String("saucxs") instanceof Object //true
new String("saucxs") instanceof String //true
1 instanceof Object //false
1 instanceof Number //false
new Number(1) instanceof Object //true
new Number(1) instanceof Number //true
true instanceof Object //false
true instanceof Boolean //false
new Boolean(true) instanceof Object //true
new Boolean(true) instanceof Boolean //true
null instanceof Object //false
undefined instanceof Object //false
Symbol() instanceof Symbol //false
Note: 1, new Date object is both belong Object, and belongs to Date. (They are derived from the Object class).
2, or an array of arrays created with the constructor literal creation, both belong to the Object, and belongs to the Array.
3, an object created with object literal object being given, {} instanceof Object; objects created using the constructor belongs Object.
4, create a string of literals, number, Boolean, neither Object, nor their type; only created using the constructor string, number, Boolean, both belonging to the Object, and their respective types.
Find [], Date constructor creates, Object, String, Number, Boolean. Both belong to themselves, they belong Object.
For example, [], Array, Object relationship:
Instanceof can be determined from []. Proto point Array.prototype, and Array.prototype. Proto which points to a Object.prototype, final Object.prototype. Proto point to null, marks the end of the prototype chain. Thus, [], Array, Object formed in the interior of a prototype chain:
As can be seen from the prototype chain, [] the proto directly to Array.prototype, indirect Object.prototype point, it is determined in accordance with the rules of instanceof, [] is an example of Object. And so on, a similar new Date (), new Person ( ) will also form a corresponding prototype chain. Thus, only the instanceof determines whether two objects belonging to the instance relation, but can not determine what type of a specific object instance belongs.
Problems:
It is assumed that only a global execution environment. If the page contains multiple frames, that actually there are two or more different global execution environment, so there are two or more different versions of the constructor. If you pass an array from one frame to another frame, and then the incoming array in the second frame natively create arrays each have their different constructors.
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[0].Array;
var arr = new xArray(1,2,3); // [1,2,3]
arr instanceof Array; // false
For an array of problems, ES5 provides Array.isArray () method. The method to confirm whether or not an object itself Array type.
if (Array.isArray(value)){
//对数组执行某些操作
}
Array.isArray () detected essentially [[Class]] value of the object, [[Class]] is an internal attribute of the object, which contains the object type information, the format [object Xxx], Xxx is the corresponding the specific type. For purposes of an array of values, [[Class]] is [object Array].
四、constructor
Define a constructor function Func (), the JS engine will add Func Prototype prototype, then adding a constructor property give the prototype, and the reference point Func.
Examples of a function func, var func = new Func (). At this time, the constructor is transmitted to the prototype Func func, so func.constructor === Func.
Func using the prototype object constructor a reference to itself, to create an instance when Func object as a constructor, the constructor will genetic prototype to the newly created object. From the perspective of prototype chain, func constructor function Func is a new type of object. Such is the meaning of existence after generating a new object, you can track data type.
Built-in JavaScript objects inside the building at the time is to do so:
'saucxs'.constructor === String //true
new String('saucxs').constructor === String //true
[].constructor === Array //true
new Array([12,56]).constructor === Array //true
new Number(12).constructor === Number //true
new Function(console.log('saucxs')).constructor === Function //true
new Date().constructor === Date //true
new Error().constructor === Error //true
window.constructor === Window //true
document.constructor === HTMLDocument //true
note:
(1) null and undefined is invalid object, thus no constructor present, these two types of data needs to be determined by other means.
(2) constructor function is unstable, this mainly reflected in the custom object, when the developer rewrite prototype, the original constructor references are lost, default constructor for the Object
Why become a Object?
Because the prototype be reassigned is a {}, {} is the new Object () literals, so new Object () constructor on the prototype will be transferred to the Object {}, i.e. Object itself.
Accordingly, in order to regulate the development, generally require a re-constructor is evaluated when the rewriting object prototype, in order to ensure that the type of the object instance is not tampered with.
五、Object.prototype.toString
toString () is the prototype Object methods that, when invoked, return the current default object [[Class]]. This is an internal attribute, the format string [Object xxx], where xxx is the type of object.
This method is in the end is Gesha? We can look at the ES5 specification Address: https://es5.github.io/#x15.2.4.2
When toString method is called, will follow the steps:
(1) If this value is undefined, returns [object Undefined];
(2) If this value is null, it returns [object Null];
(3) Let O be the result ToObject (this) is;
(4) Let the class become internal property O [[class]] value;
(5) returns a string consisting of the last "[Object" and class and "]" three-part.
Sentence: a call Object.prototype.toString returns "[object" and class and "]" strings, and class to determine the internal properties of the object.
console.log(Object.prototype.toString.call(undefined)) // '[object Undefined]'
console.log(Object.prototype.toString.call(null)) // '[object Null]'
console.log(Object.prototype.toString.call(Window)) // '[object Function]'
var date = new Date();
console.log(Object.prototype.toString.call(date)) // '[object Date]'
console.log(Object.prototype.toString.call(Symbol)) // '[object Function]'
Note: The call to change the point of this.
Therefore, the value of this class is the key to identifying the type of object, the method using the identified Object.prototype.toString more types, can be recognized at least 11 types
var number = 1; // [object Number]
var string = '123'; // [object String]
var boolean = true; // [object Boolean]
var und = undefined; // [object Undefined]
var nul = null; // [object Null]
var obj = {a: 1} // [object Object]
var array = [1, 2, 3]; // [object Array]
var date = new Date(); // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g; // [object RegExp]
var func = function a(){}; // [object Function]
Math //[object Math]
JSON //[object JSON]
note:
1, in fact, the Math object and JSON objects, not to judge;
2, Math Date and not as an object as the object class String, but this is not a constructor function Math (), Math.sin (), a method is not an object.
Sixth, the study of type API jquery
Object.prototype.toString using this method, it is relatively easy determination of various types, and with reference to the type of the source part jquery:
function type(obj) {
// 一箭双雕
if (obj == null) {
return obj + "";
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[Object.prototype.toString.call(obj)] || "object" :
typeof obj;
}
Part of which class2type
var class2type = {};
// 生成class2type映射
"Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item, index) {
class2type["[object " + item + "]"] = item.toLowerCase();
})
use:
type(1); //'number'
type('123456'); //'string'
type(true); //boolean
type(undefined); //undefined
type(null); //'null'
type({name: 'saucxs'}); //'object'
type([1,2,'saucxs',3,4]); //'array'
type(new Date()); // 'date'
type(new Error()); //'error'
type(/^\d/); //'regexp'
type(function(){console.log('saucxs')}); //'function'
type(Symbol); //'function'
This is to achieve a perfect judge for our daily needs of the type.
We realized the judgment date, regular, and other types of errors.
If you need to determine more complex, such as: empty object, the object window, array-like objects.
Seven empty object EmptyObject
isEmptyObject jQuery provides methods to determine whether an object is empty
function isEmptyObject( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
}
Thought: Analyzing empty object is to determine whether there is an attribute value, for loop is executed once, to illustrate the properties, have property returns false.
console.log(isEmptyObject({})); // true
console.log(isEmptyObject([])); // true
console.log(isEmptyObject(null)); // true
console.log(isEmptyObject(undefined)); // true
console.log(isEmptyObject(123)); // true
console.log(isEmptyObject('')); // true
console.log(isEmptyObject(true)); // true
This is determined mainly used to distinguish {} and {name: 'saucxs'} on the line.
Note points: (1) for in a ES6 property, the property will traverse the prototype. (2) using Object.keys (obj) is ES5 property, the property does not traverse the prototype
Eight, window objects
The window object is the client js global object, there is a window of his property to itself. According to this characteristic determines whether the window object.
function isWindow(obj){
return obj != null && obj ===obj.window;
}
Note: The window has a normal object properties, and point to itself. For example, this:
function isWindow( obj ) {
return obj != null && obj === obj.window;
}
let fakeWindow = {}
fakeWindow.window = fakeWindow
isWindow(fakeWindow) // true
So it is not possible to modify?
function isWindow(obj) {
return !!(window && obj === window)
}
Nine, class array of objects
Without the concept of an array type, for example:
1, arrays and array-
var arr = [,,3];
Array corresponding class is
var arrLike = {
2: 3,
length: 3
}
Look jquery source
function isArrayLike(obj) {
// obj 必须有 length属性
var length = !!obj && "length" in obj && obj.length;
var typeRes = type(obj);
// 排除掉函数和 Window 对象
if (typeRes === "function" || isWindow(obj)) {
return false;
}
return typeRes === "array" || length === 0 ||
typeof length === "number" && length > 0 && (length - 1) in obj;
}
So if isArrayLike returns true, at least one of three conditions to be met:
(1) is an array
(2) a length of 0
(3) lengths attribute type is a number greater than 0 and obj [length - 1] must be present
The third condition: the array with commas skip, we believe that this element does not exist, an array of class objects will not write this element, but is the last element must be written, or else length length it will not be the key value of the last element plus 1. For example, the array can be written
var arr = [1,,];
console.log(arr.length) // 2
Rewrite the class array
var arrLike = {
0: 1,
length: 1
}
So qualified class array of objects is that there must be the last element!
Ten, judgment is not dom element
isElement DOM element is not determined.
isElement = function(obj) {
return !!(obj && obj.nodeType === 1);
};
XI summary
The method of determining when four main types: (1) typeof; (2) instanceof; (3) constructor; (4) Object.prototype.toString ().
Analyzing six basic types, typeof may be used, if it comes to the type of the object internal time; the instanceof may also be used, in the detection object prototype; may also use the constructor property is not directed to them constructor; requires Object.prototype.toString (), if necessary empty object is determined, may be used for in the ES6 to determine, with their points to determine the properties window is not window object. And determining an array of object classes, and the judgment is not judged dom element.