René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"【JavaScript】【学习心得】学习 JavaScript 第十二天","articleBody":"今天学习了下 第十一章 HTML5 只是对 HTML5 做了些介绍，很快就看完了，这里就不做笔记了。刚好有时间可以来研究下 JavaScript 中 `typeof` 和 `instanceOf` 的区别，在之前的文章我们多次用 `typeof` 进行类型判断。那么 `typeof` 和 `instanceOf` 有什么区别呢？\n## 关于typeof\n\n`typeof`一元运算符，用来返回操作数类型的**字符串**。\n\n`typeof`几乎不可能得到它们想要的结果。`typeof`只有一个实际应用场景，就是**用来检测一个对象是否已经定义或者是否已经赋值**。而这个应用却不是来检查对象的类型。\n\n| Value | Class | Type |\n| --- | --- | --- |\n| \"foo\" | String | string |\n| new String(\"foo\") | String | object |\n| 1.2 | Number | number |\n| new Number(1.2) | Number | object |\n| true | Boolean | boolean |\n| new Boolean(true) | Boolean | object |\n| new Date() | Date | object |\n| new Error() | Error | object |\n| [1,2,3] | Array | object |\n| new Array(1, 2, 3) | Array | object |\n| new Function(\"\") | Function | function |\n| /abc/g | RegExp | object (function in Nitro/V8) |\n| new RegExp(\"meow\") | RegExp | object (function in Nitro/V8) |\n| {} | Object | object |\n| new Object() | Object | object |\n\n上面表格中，Type 一列表示 typeof 操作符的运算结果。可以看到，这个值在大多数情况下都返回 \"object\"。\n\nClass 一列表示对象的内部属性 [[Class]] 的值。\n\nJavaScript 标准文档中定义: [[Class]] 的值只可能是下面字符串中的一个： Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String.\n为了获取对象的 [[Class]]，我们需要使用定义在 Object.prototype 上的方法 toString。\n\nJavaScript 标准文档只给出了一种获取 [[Class]] 值的方法，那就是使用 Object.prototype.toString。\n\n``` js\nfunction is(type, obj) {\n    var clas = Object.prototype.toString.call(obj).slice(8, -1);\n    return obj !== undefined \u0026\u0026 obj !== null \u0026\u0026 clas === type;\n}\n\nis('String', 'test'); // true\nis('String', new String('test')); // true\n\n```\n\n上面例子中，Object.prototype.toString 方法被调用，this 被设置为了需要获取 [[Class]] 值的对象。\n\n注：Object.prototype.toString 返回一种标准格式字符串，所以上例可以通过 slice 截取指定位置的字符串，如下所示：\n\n``` js\nObject.prototype.toString.call([])    // \"[object Array]\"\nObject.prototype.toString.call({})    // \"[object Object]\"\nObject.prototype.toString.call(2)    // \"[object Number]\"\n```\n\n注：这种变化可以从 IE8 和 Firefox 4 中看出区别，如下所示：\n\n``` js\n// IE8\nObject.prototype.toString.call(null)    // \"[object Object]\"\nObject.prototype.toString.call(undefined)    // \"[object Object]\"\n\n// Firefox 4\nObject.prototype.toString.call(null)    // \"[object Null]\"\nObject.prototype.toString.call(undefined)    // \"[object Undefined]\"\n```\n\n测试为定义变量\n\n``` js\ntypeof foo !== 'undefined'\n\n```\n\n上面代码会检测 foo 是否已经定义；如果没有定义而直接使用会导致 ReferenceError 的异常。 这是 typeof 唯一有用的地方。\n\n**结论**: 为了检测一个对象的类型，强烈推荐使用 Object.prototype.toString 方法； 因为这是唯一一个可依赖的方式。正如上面表格所示，typeof 的一些返回值在标准文档中并未定义， 因此不同的引擎实现可能不同。\n\n除非为了检测一个变量是否已经定义，我们应尽量避免使用 `typeof` 操作符。\n\n| x | typeof x |\n| --- | --- |\n| undefined | \"undefined\" |\n| true 或false | \"boolean\" |\n| 任意数字或者NaN | \"number\" |\n| 任意字符串 | \"string\" |\n| 函数对象(在ECMA-262术语中,指的是实现了[[Call]] 的对象) | \"function\" |\n| 任意内置对象（非函数） | \"object\" |\n| 数组 | \"obeject\" |\n| null | \"object\" |\n| 宿主对象(JS引擎内置对象,而不是DOM或者其他提供的) | 由编译器各自实现的字符串，但不是\"undefined\",\"number\",\"boolean\",\"number\",\"string\"。 |\n| 正则表达式 | 各浏览器表现不一 |\n\n如果想将null和对象区分开，则必须针对特殊值显式检测。如：`my_value===null`。对于宿主对象来说，typeof 有可能并不返回 ‘object’,而返回字符串。但实际上客户端  js 中的大多数宿主对象都是 ‘object’ 类型。对于所有内置可执行对象进行 typeof 运算都将返回 “function”。\n\n``` js\n// Numbers\ntypeof 37 === 'number';\ntypeof 3.14 === 'number';\ntypeof Math.LN2 === 'number';\ntypeof Infinity === 'number';\ntypeof NaN === 'number'; // 尽管NaN是\"Not-A-Number\"的缩写,意思是\"不是一个数字\"\ntypeof Number(1) === 'number'; // 不要这样使用!\n\n// Strings\ntypeof \"\" === 'string';\ntypeof \"bla\" === 'string';\ntypeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串\ntypeof String(\"abc\") === 'string'; // 不要这样使用!\n\n// Booleans\ntypeof true === 'boolean';\ntypeof false === 'boolean';\ntypeof Boolean(true) === 'boolean'; // 不要这样使用!\n\n// Undefined\ntypeof undefined === 'undefined';\ntypeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量\n\n// Objects\ntypeof {a:1} === 'object';\ntypeof [1, 2, 4] === 'object'; \n// 使用Array.isArray或者Object.prototype.toString.call方法\n//可以分辨出一个数组和真实的对象\ntypeof new Date() === 'object';\n\ntypeof new Boolean(true) === 'object' // 令人困惑.不要这样使用\ntypeof new Number(1) === 'object' // 令人困惑.不要这样使用\ntypeof new String(\"abc\") === 'object';  // 令人困惑.不要这样使用\n// Functions\ntypeof function(){} === 'function';\ntypeof Math.sin === 'function';\n\n```\n## 关于instanceof\n\ninstanceof 左操作数是一个类，右操作数是标识对象的类。如果左侧的对象是右侧类的实例，则返回true.而js中对象的类是通过初始化它们的构造函数来定义的。即 instanceof 的右操作数应当是一个函数。所有的对象都是 object 的实例。如果左操作数不是对象，则返回 false ,如果右操作数不是函数，则抛出 typeError。 \n\ninstanceof 运算符是用来测试一个对象是否在其原型链原型构造函数的属性。其语法是`object instanceof constructor`\n\ninstanceof 操作符用来比较两个操作数的构造函数。只有在比较自定义的对象时才有意义。 如果用来比较内置类型，将会和 typeof 操作符 一样用处不大。\n\n比较自定义对象\n\n``` js\nfunction Foo() {}\nfunction Bar() {}\nBar.prototype = new Foo();\n\nnew Bar() instanceof Bar; // true\nnew Bar() instanceof Foo; // true\n\n// 如果仅仅设置 Bar.prototype 为函数 Foo 本身，而不是 Foo 构造函数的一个实例\nBar.prototype = Foo;\nnew Bar() instanceof Foo; // false\n\n```\n\ninstanceof 比较内置类型\n\n``` js\nnew String('foo') instanceof String; // true\nnew String('foo') instanceof Object; // true\n\n'foo' instanceof String; // false\n'foo' instanceof Object; // false\n\n```\n\n有一点需要注意，instanceof 用来比较属于不同 JavaScript 上下文的对象（比如，浏览器中不同的文档结构）时将会出错， 因为它们的构造函数不会是同一个对象。\n\n结论:instanceof 操作符应该仅仅用来比较来自同一个 JavaScript 上下文的自定义对象。 正如 typeof 操作符一样，任何其它的用法都应该是避免的。\n\n``` js\nfunction C(){} // 定义一个构造函数\nfunction D(){} // 定义另一个构造函数\n\nvar o = new C();\no instanceof C; // true, 因为Object.getPrototypeOf(o) === C.prototype\no instanceof D; // false, D的原型不在o 的原型链上\no instanceof Object; // true, because:\nC.prototype instanceof Object // true\n\nC.prototype = {};\nvar o2 = new C();\no2 instanceof C; // true\no instanceof C; // false, C的原型不在o 的原型链上\n\nD.prototype = new C(); //\nvar o3 = new D();\no3 instanceof D; // true\no3 instanceof C; // true\n\n```\n\n``` js\nvar myString = new String();\nvar myDate = new Date();\n\nmyString instanceof String; //  true\nmyString instanceof Object; //  true\nmyString instanceof Date;   //  false\n\nmyDate instanceof Date;     //  true\nmyDate instanceof Object;   //  true\nmyDate instanceof String;   // false\n```\n\n``` js\nfunction Car(make, model, year) {\n  this.make = make;\n  this.model = model;\n  this.year = year;\n}\nvar mycar = new Car(\"Honda\", \"Accord\", 1998);\nvar a = mycar instanceof Car;    // returns true\nvar b = mycar instanceof Object; // returns true\n```\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-11-28T14:49:34.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/16/Learning-JavaScript/issues/16"}