proto/prototype的区别，typeof/instanceof的区别

合并旧文《js 中__proto__和 prototype 的区别和关系？》、《JS 中 typeof 与 instanceof 的区别》

__proto__ 和 prototype 的区别和关系

初学 javascript 的时候也跟题主一样搞不清楚，自己好好总结了一下：

首先，要明确几个点

1. 在 JS 里，万物皆对象。

方法（Function）是对象，方法的原型 (Function.prototype) 是对象。因此，它们都会具有对象共有的特点。

即：对象具有属性 __proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。

2. 方法 (Function)

方法这个特殊的对象，除了和其他对象一样有上述 __proto__ 属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做 constructor，这个属性包含了一个指针，指回原构造函数。

好啦，知道了这两个基本点，我们来看看上面这副图。

解析

1. 构造函数 Foo()

构造函数的原型属性 Foo.prototype 指向了原型对象，在原型对象里有共有的方法，所有构造函数声明的实例（这里是 f1，f2）都可以共享这个方法。

2. 原型对象 Foo.prototype

Foo.prototype 保存着实例共享的方法，有一个指针 constructor 指回构造函数。

3. 实例

f1 和 f2 是 Foo 这个对象的两个实例，这两个对象也有属性 __proto__，指向构造函数的原型对象，这样子就可以像上面 1 所说的访问原型对象的所有方法啦。

另外

构造函数 Foo() 除了是方法，也是对象啊，它也有 __proto__ 属性，指向谁呢？ 指向它的构造函数的原型对象呗。函数的构造函数不就是 Function 嘛，因此这里的 __proto__ 指向了 Function.prototype。 其实除了 Foo()，Function(), Object() 也是一样的道理。

原型对象也是对象啊，它的 __proto__ 属性，又指向谁呢？ 同理，指向它的构造函数的原型对象呗。这里是 Object.prototype.

最后，Object.prototype 的 __proto__ 属性指向 null。

总结

1. 对象有属性 __proto__, 指向该对象的构造函数的原型对象。
2. 方法除了有属性 __proto__, 还有属性 prototype，prototype 指向该方法的原型对象。

JS 中 typeof 与 instanceof 的区别

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的：

typeof

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。

它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果： number,boolean,string,function,object,undefined。 我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错。 对于 Array, Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。

网上的一个小例子：

document.write("typeof(1): " + typeof 1 + "<br>");
document.write("typeof(NaN): " + typeof NaN + "<br>");
document.write("typeof(Number.MIN_VALUE): " + typeof Number.MIN_VALUE + "<br>");
document.write("typeof(Infinity): " + typeof Infinity + "<br>");
document.write('typeof("123"): ' + typeof "123" + "<br>");
document.write("typeof(true): " + typeof true + "<br>");
document.write("typeof(window): " + typeof window + "<br>");
document.write("typeof(Array()): " + typeof new Array() + "<br>");
document.write("typeof(function(){}): " + typeof function () {} + "<br>");
document.write("typeof(document): " + typeof document + "<br>");
document.write("typeof(null): " + typeof null + "<br>");
document.write("typeof(eval): " + typeof eval + "<br>");
document.write("typeof(Date): " + typeof Date + "<br>");
document.write("typeof(sss): " + typeof sss + "<br>");
document.write("typeof(undefined): " + typeof undefined + "<br>");

instanceof

instance：实例，例子

a instanceof b ? alert("true") : alert("false"); // a 是 b 的实例？真：假

instanceof 用于判断一个变量是否某个对象的实例，如 var a=new Array();alert(a instanceof Array); 会返回 true，同时 alert(a instanceof Object) 也会返回 true; 这是因为 Array 是 object 的子类。 再如：function test(){};var a=new test();alert(a instanceof test) 会返回 谈到 instanceof 我们要多插入一个问题，就是 function 的 arguments，我们大家也许都认为 arguments 是一个 Array，但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象，尽管看起来很像。

另外：

测试

var a = new Array();
if (a instanceof Object) {
  alert("Y");
} else {
  alert("N");
}

得'Y’

但

if (window instanceof Object) {
  alert("Y");
} else {
  alert("N");
}

得'N'

所以，这里的 instanceof 测试的 object 是指 js 语法中的 object，不是指 dom 模型对象。

使用 typeof 会有些区别

alert(typeof window);

会得 object