许多人对JavaScript的原型及原型链仍感到困惑,网上的文章又大多长篇大论,令读者不明觉厉。本人小学时语文拿过全校第一名,我将用最简洁明了的文字介绍JavaScript的原型及原型链。 函数
什么是原型: this
每个对象都有原型,使用 __proto__ 标记,原型是一个对象的引用或 null( Object.prototype 的原型为 null ),容许对象使用其原型所引用的对象中的变量。 spa
var fun = function(){} fun.prototype.a = 1; var obj = new fun(); obj.a; //1
原型的来源: prototype
对象的原型来自其构造函数的原型属性(用 prototype 标记)的引用。注意原型与原型属性是两个概念。 code
Function 为实例( function )定义了原型属性,其中包含一个构造函数(默认是 function 对象本身,用于构造 function 本身的实例),所以全部 function 都有原型属性。Function 将本身的的原型属性的引用做为 function 的原型。 new 一个 function ,function 的实例便有了原型,指向 function 的原型属性。 对象
有码: 继承
var fun = function(){ this.a= 1; } fun.prototype.b = 2; var obj = new fun(); obj.a; //1 obj.b; //2
有图: ip
解释: 原型链
上面的代码定义了 fun 这个函数,其构造函数是 Function(),因此 fun 的原型就是 Function 的原型属性。Function 还为 fun 定义了属于 fun 的原型属性,因此 fun 既有原型又有原型属性。 get
咱们又为 fun 的原型属性定义了变量 b,因此能经过 fun 的实例 obj 找到 b,而 obj 由 fun 构造,因此 obj 被赋予了变量 a,这属于 obj 本身。
原型属性也是对象,仍然有原型,是其构造函数的原型属性的引用。
操做原型:
获取原型:
obj.__proto__; (IE 不支持)
Object.getPrototypeOf(obj); (IE 8及如下不支持)
访问原型的变量:
除了以上两种获取原型方式,还能够直接obj.attr;(不用我多说了吧)
修改原型的变量:
没法经过 obj.__proto__.attr = *; 或 Object.getPrototypeOf(obj).attr = *; 来修改原型的变量值,即没法修改原型,属于js内部特性。
你只能经过修改对象的构造函数的原型属性(prototype)来使对象的原型发生改变。如:
fun.prototype.attr = *; 这将反应在 obj 上。
假设对象的原型含有 attr 这个属性,当经过 obj.attr 这种方式访问原型的变量,默承认以在原型内搜寻到 attr 变量,若是企图使用 obj.attr = *; 修改原型,js的处理方式是新建一个属于 obj 的属性 attr ,原型不会被修改(注意,若是 attr 是一个对象的引用,则指向的对象将会被修改)。再次访问 attr ,并不会访问到原型的 attr 变量。
原型的做用
继承。
如:
var fun = function(){} fun.prototype = String.prototype; new fun().split //function split() {[native code]}
问题:每一个对象都有原型属性吗?
{}.prototype; //undefined fun.prototype; // [object Object]
函数有原型属性,而像{}、new fun()这样的非函数对象则没有原型属性(它们也不用去构造实例),但能够手动为其建立原型属性,虽然这没什么意义。
总而言之,原型属性是其上级或者手动赋予的(fun.prototype = {}),不必定存在。做用是为函数的实例提供构造方法及继承变量。而原型是其构造函数的原型属性,供对象使用。
原型链:
经过本身的原型并向上寻找直到Object.prototype.__proto__; 这条链就是原型链。
题外话:
关于Function 与 Object 的关系,我暂时没有去深究,但看如下代码:
Function.prototype.constructor == Function //true Function.constructor == Function //true Object.constructor == Function //true Object.getPrototypeOf(Object) == Object.getPrototypeOf(Function) //true Object.prototype == Function.prototype //false
从代码看 Object 与 Function 都由相同的 constructor 建立 ,原型相同,但分配的原型属性则不同。
Object 由 Function 构造而来,Function 的原型属性的构造函数即自身,这能够理解,但 Function 的构造函数也是自身?这种语言的内部机制彷佛不必研究,但咱们要知道如何经过原型达到继承的目的。
若有不妥,请大侠指正。