JS原型链怎么理解

标签:新闻动态    日期:2017-11-24 21:39    录入:汇盛国际平台    浏览:

  

[js原型链]JS原型链怎么理解

  

  在谈原型链之前,我们首先要了解自定义函数与 Function 之间是什么关系,而构造函数、原型和实例之间又存在什么千丝万缕的关系呢?其实,所有的函数都是 Function 的实例。在构造函数上都有一个原型属性 prototype,该属性也是一个对象;那么在原型对象上有一个 constructor 属性,该属性指向的就是构造函数;而实例对象上有一个 _proto_ 属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用。

  

  
  
  // _proto_  在函数里有一个属性prototype  由该函数创建的对象默认会连接到该属性上  //prototype 与 _proto_ 的关系  _proto_是站在对象角度来说的  prototype 是站在构造函数角度来说的
  
  

  下面,我们来看图说话。

  

  

1、构造函数、原型和实例之间的关系  

  

①+Object  

  

  ②+Function+Object+Array  

  

    

  

  了解这些之后,我们再来讨论什么是原型链。说白了,其实就是有限的实例对象和原型之间组成有限链,就是用来实现共享属性和继承的。下面,我们看代码说话。

  

  
  
  var obj = new Object();  对象是有原型对象的  原型对象也有原型对象  obj._proto_._proto_._proto_  原型对象也有原型对象,对象的原型对象一直往上找,会找到一个null  // 原型链示例  var arr = [];  arr -> Array.prototype ->Object.prototype -> null  var o = new Object();  o -> Object.prototype -> null;  function Foo1(){  this.name1 = '1';  }  function Foo2(){  this.name2 = '2';  }  Foo2.prototype = new Foo1();  function Foo3(){  this.name = '3';  }  Foo3.prototype = new Foo2();  var foo3 = new Foo3();  console.dir(foo3);
  
  

  

  

  

  

  接下来就是继承问题了。

  

  

2、继承   

  

 1)原型继承  

  
  
  function Animal(name){  this.name = name;  }  function Tiger(color){  this.color = color;  }  //  var tiger = new Tiger('yellow');  //  console.log(tiger.color);  //  console.log(tiger.name); //undefined  //   Tiger.prototype = new Animal('老虎');  //一种方式  Object.prototype.name = '大老虎';  //第二种方式  var tiger = new Tiger('yellow');  console.log(tiger.color);  console.log(tiger.name);
  
  

值得注意的是,这里存在两个主要的问题:①它不方便给父级类型传递参数;②父级类型当中的引用类型被所有的实例共享  

  

2)ES5 提供了Object.create() 方法来实现继承  

  
  
  ————做兼容  //shim垫片  function create(obj){  if(Object.create){  return Object.create(obj);  }else{  function Foo(){}  Foo.prototype = obj;  return new Foo();  }  }
  
  

  这种方法是ES5的新特性,其实就是复制继承。

  

  

  3)拷贝继承  

  
  
  var obj = {};  obj.extend = function(obj){  for(var k in obj){  this[k] = obj[k];  }  }
  
  

 4)借用构造函数继承——被借用的构造函数中原型上的成员没有被借过来  

  
  
  function Animal(name){  this.name = name;  }  function Mouse(nickname){  Animal.call(this,'老鼠');  this.nickname = nickname;  }  var m = new Mouse('杰瑞');  console.log(m.name);  console.log(m.nickname);
  
  

  存在的问题:可以解决原型继承当中传参问题,但是父类型当中的原型对象上的成员(属性和方法)不能被继承到  

  

  5)组合继承——prototype对象是有动态性的  

  
  
  function Person(name){  this.name = name;  }  Person.prototype.showName = function(){  console.log(this.name);  }  function Student(name,age){  Person.call(this,name);  this.age = age;  }  Student.prototype = new Person();  Student.prototype.contructor = Student;  Student.prototype.showAge = function(){  console.log(this.age);  }  var stu = new Student('张三',12);  stu.showName();  stu.showAge();
 
★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★
        
上一篇:用js判断用户浏览器是否是XP SP2的IE6
下一篇:没有了