IT不死旗下博客隆重开通啦,欢迎各位小伙伴们来围观 。

详解JS中的原型链-2

Javascript Xueqi 1603℃ 0评论
  来看看原型链的查找过程:
 //原生对象的原型  原型链的查找过程:
   Object.prototype.sayHi=function(){
     console.log("Object原型对象里的sayHi!");
  };
  
   Function.prototype.sayHi=function(){
     console.log("Function原型对象里的sayHi!");
   };
   Array.prototype.sayHi=function(){
     console.log("Array原型对象里的sayHi!");
   };
  String.prototype.sayHi=function(){
    console.log("String原型对象里的sayHi");
  };
  function Person(name){
     this.name=name;
     this.sayHi=function(){
       console.log("Person对象里的sayHi!");
     };
  }
  Person.prototype.sayHi=function(){
     console.log("Person原型对象里的sayHi!");
  };
  
  原型链的查找过程:
  Function,Array,String对象的实例都继承了Object,当在一个对象查找一个属性或者方法时,
  会先在对象本身中找,如果找到,则使用,整个查找过程结束。如果,没有找到,则到这个实例对象的原型对象去找,
  如果找到,则使用,整个查找过程结束,否则,继续到Object的原型对象里查找,如果找到,则使用,整个查找过程结束,如果未找到
  整个查找过程结束,Object的原型对象是原型链的顶端。

  图如下:
    
  
  
   var s1="abc",
        fn1=function(){},
        arr=[];
   
   arr.sayHi();//Array原型对象里的sayHi!
   s1.sayHi();//String原型对象里的sayHi!
   fn1.sayHi();//Function原型对象里的sayHi!
   o1.sayHi();//Object原型对象里的sayHi!
   p1.sayHi();//Person对象里的sayHi!
   
     var p1=new Person();
    p1.sayHi();//Person对象里的sayHi! 首先在Person对象p1上找到了
    //去掉Person构造函数里的sayHi,则sayHi方法是在Person原型对象里找到的,显示Person原型对象里的sayHi!
   //在去掉Person原型对象的sayHi方法,则sayHi方法是在Object里找到的,显示"Object原型对象里的sayHi"
   结合代码,再看看图,可以先把Object的原型对象和Object构造器先放开不看,把其它的先理解。
   写文章真的挺花时间的,昨天下午写好的代码,晚上画了两张图,今天上午整理发布,实训第一个周末,继续努力

转载请注明:凌风阁 » 详解JS中的原型链-2

喜欢 (19)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 挺详细的,不错!
    路人甲2016-08-11 17:37 回复
  2. nice,写的很详细
    Zack2016-11-21 09:55 回复
  3. 不错的文章
    佚名2016-11-27 11:13 回复