图解Javascript原型链

495 查看

本文尝试阐述Js中原型（prototype）、原型链（prototype chain）等概念及其作用机制。上一篇文章（图解Javascript上下文与作用域）介绍了Js中变量作用域的相关概念，实际上关注的一个核心问题是：“在执行当前这行代码时Js解释器可以获取哪些变量”，而原型与原型链实际上还是关于这一问题。

我们知道，在Js中一切皆为对象（Object），但是Js中并没有类（class）；Js是基于原型（prototype-based）来实现的面向对象（OOP）的编程范式的，但并不是所有的对象都拥有 prototype 这一属性：

var a = {};

console.log(a.prototype); //=> undefined

var b = function(){};

console.log(b.prototype); //=> {}

var c = 'Hello';

console.log(c.prototype); //=> undefined

prototype 是每个 function 定义时自带的属性，但是Js中 function 本身也是对象，我们先来看一下下面几个概念的差别：

1. function 、 Function 、 Object 和 {}

function 是Js的一个关键词，用于定义函数类型的变量，有两种语法形式：

function f1(){

console.log('This is function f1!');

}

typeof(f1); //=> 'function'

var f2 = function(){

console.log('This is function f2!');

}

typeof(f2); //=> 'function'

如果用更加面向对象的方法来定义函数，可以用 Function ：

var f3 = new Function("console.log('This is function f3!');");

f3(); //=> 'This is function f3!'

typeof(f3); //=> 'function'

typeof(Function); //=> 'function'

实际上 Function 就是一个用于构造函数类型变量的类，或者说是函数类型实例的构造函数（constructor）；与之相似有的 Object 或 String 、 Number 等，都是Js内置类型实例的构造函数。比较特殊的是 Object ，它用于生成对象类型，其简写形式为 {} ：

var o1 = new Object();

typeof(o1); //=> 'object'

var o2 = {};

typeof(o2); //=> 'object'

typeof(Object); //=> 'function'

2. prototype VS __proto__

清楚了上面的概念之后再来看 prototype ：

Each function has two properties: length and prototype

hain）等概念及其作用机制。上一篇文章（图解Javascript上下文与作用域）介绍了Js中变量作用域的相关概念，实际上关注的一个核心问题是：“在执行当前这行代码时Js解释器可以获取哪些变量”，而原型与原型链实际上还是关于这一问题。