Web前端之路Web前端之路程序员

理解JS中的原型

2016-05-29  本文已影响1005人  bruce_zhou

动态语言和静态语言有很大的不同,比如在C++中定义类时,并不分配内存,而在动态语言中定义类时,却会分配内存。

原型对象中的属性被所有实例所共享,这类似于C++中的静态成员,静态成员属于类本身,而不是属于对象,但是被类的所有实例所共有。

创建一个空函数

function Person() {};

像这样创建一个空函数,js解析为以下三步:

  1. 创建一个Object对象(有constructor属性及[[Prototype]]属性);
  2. 创建一个函数(有name、prototype属性),再通过prototype属性引用刚才创建的对象;
  3. 创建变量Person,同时把函数的引用赋值给变量Person


    如图可以表示为

实例化一个对象

我们用上面这个Person函数去实例化一个对象时,js解析又是怎样呢?比如:

var angela = new Person();

实例化出来的对象,js解析也分为下面三步:

  1. 新建一个对象并赋值给变量angela:var angela = {};
  2. 把这个对象的[[Prototype]]属性指向函数Person的原型对象:angela.[[Prototype]] = Person.prototype
  3. 调用函数Person,同时把this指向刚创建的对象angela,对这个对象进行初始化:Person.apply(angela,arguments)
    如图可表示为
    总结:构造函数、原型和实例之间的关系,每个构造函数包含一个指向原型对象的指针prototype,原型对象都包含一个指向构造函数的指针constructor,而实例都包含一个指向原型对象的内部指针_proto_(有的地方称为[[prototype]])。

重写prototype对象

在上面两个例子的基础上,再进行如下操作

Person.prototype = {
    name: "bruce",
    age: 23
};

搜索一个属性

prototye属性

总结:JS中的每个对象都包含一个指向其原型对象的指针,这个指针在构造函数是prototype属性,可以直接访问;在普通对象中是_proto_属性,不可以直接访问。

原型链

A instanceof B
//如果B的原型对象出现在A的原型链中,则返回true

参考资料

  1. 公司一位大牛关于prototype的总结
  2. 理解js中的原型继承
上一篇下一篇

猜你喜欢

热点阅读