[关闭]
@guoxs 2015-07-07T15:31:36.000000Z 字数 1775 阅读 3565

JS原型链

JavaScript


原型

构造器的一个属性:prototype 其值就是原型
无论是自定义的还是原生的构造器都有prototype属性

  1. function Teacher(){
  2. this.course = [];
  3. }
  4. Teacher.prototype = {
  5. job:‘teacher’;
  6. setName: function(name){
  7. this.name = name;
  8. };
  9. addCourse: function(course){
  10. this.course.push(course);
  11. }
  12. }

对应的原型关系为:
原型关系

原型链

JS中对象之间的关系是通过原型继承去实现的,原型继承的层级构成原型链
对于上面的JS代码,有如下原型链:
原型链

  1. _proto_:隐式指针
  2. prototype:原型属性
  3. Teacher对象可通过new function创建,故其有function的原型属性;也可以通过构造器创建,故也有prototype属性,该属性有指向Teacher.prototype,Teacher.prototype又继承至Object对象。

原型链的查找、修改、删除
属性查找:先在自身查找,如果找不到则顺着原型链查找

  1. tom.name; //tom,自身属性
  2. tom.job; //teacher, Teacher.prototype属性
  3. tom.toString; //查找至Object.prototype中的<build-ins>内置属性

属性修改:在JS中修改属性只能修改自身的属性

  1. tom.name = 'Tom Green'; //修改了tom的name值
  2. tom.job = 'assistant'; //先在tom对象中创建job属性,然后修改值为assistant
  3. //修改原型上的属性
  4. Teacher.prototype.job = 'assistant'; //修改了原型上的属性,但是用这个构造器创建出来的对象该值都会改变。也就是说bill的job值也会变成assistant,而不是teacher。

属性删除:使用delete在JS中删除属性只能修改自身的属性,无法删除原型上的属性

  1. delete tom.job; //删除tom自身对象的job
  2. tom.job; //返回teacher,原型上的属性
  3. delete tom.job; //不会有任何变化
  4. tom.job; //返回teacher

  1. tom.hasOwnProterty('job');
  2. 如果返回true,则属于本身

ES5中的原型继承:目前大多主流浏览器都支持,只有IE低版本浏览器不支持

  1. Obiect.create(proto[,protertiesObject]);
  2. //直接从原型对象创建新对象,不需要像之前的:指定构造器的prototype,将构造器的prototype指向原型对象时,会通过构造器创建很多对象,这个时候创建对象都是要通过构造器来完成的,要new一个constructor来完成。

Obiect.create(proto[,protertiesObject]); 传入两个参数,第一个参数是指定创建对象的原型对象,第二个参数可以为定义出来的对象创建一些属性和方法。
例子:

  1. var teacher = {
  2. job: 'teacher';
  3. courses: [];
  4. setName: function(course){
  5. this.name = name;
  6. }
  7. addCourse: function(course){
  8. this.courses.push(course);
  9. }
  10. }
  11. var bill = Object.create(teacher); //原型对象是teacher,不需要使用构造器,new teacher()这种方式
  12. bill.setName('Bill'); //添加name属性把值设为bill。
  13. bill.addCourse('math'); //改变了teacher中的courses值

原型链
bill隐式指针会指向teacher对象

Object.cteate
使用构造器
参考:
低版本浏览器中实现Object.cteate功能
How does JavaScript .prototype work?

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注