js原型和原型链

  1 `问题：
  2 
  3 1、如何准确判断一个变量是数组类型
  4 
  5   var arr=[];
  6   arr instanceof Array;   //true
  7   typeOf arr  //object，typeOf是无法分辨引用类型的
  8 
  9 2、写一个原型链继承的例子
 10 
 11   //一个封装DOM的查询：
 12   function Elem(id){
 13       this.elem=document.getElementById(id);
 14   }
 15   Elem.propotype.html=function(val){
 16       var elem=this.elem;
 17       if(val){
 18           elem.innerHTML=val;
 19           return this;//链式操作
 20       }else{
 21           return elem.innerHTML;
 22       }
 23   }
 24   Elem.propotype.on=function(type,fn){
 25       var elem=this.elem;
 26       elem.addEventListener(type,fn);
 27       return this;    //链式操作
 28   }
 29   //用法：
 30   var obj=new Elem('id');
 31   console.log(obj.html());
 32   obj.html('<p>hello word!</p>');
 33   obj.on('click',function(){
 34       alert('clicked!');
 35   });
 36 
 37 3、描述一个new一个对象的过程
 38 
 39   -创建一个对象；
 40   -this指向这个新对象
 41   -执行代码，即为this赋值
 42   -返回this
 43 
 44 4、zopto(或其他框架)源码中如何使用原型链
 45 
 46   -阅读源码是高效提高技能的方式
 47 
 48 知识点：
 49 
 50   1、构造函数
 51   2、构造函数-拓展
 52   3、原型规则和示例
 53   4、原型链
 54   5、instanceof
 55     
 56 构造函数：
 57 
 58   function Foo(name,age){ //构造函数的第一个字母大写，这是习惯。
 59       this.name=name;
 60       this.age=age;
 61       this.class="class1";
 62       return this;    //不写也默认执行这一行
 63   }
 64   var f=new Foo('xianlin',22);
 65   
 66 构造函数-拓展：
 67 
 68   var a={} 其实是var a =new Object();
 69   var a=[] 其实是var a =new Array();
 70   function Foo(){...} 其实是 var Foo =new Function(...);
 71   使用instanceof判断一个函数是否是一个变量的构造函数
 72   
 73 原型规则示例：
 74 
 75   5条运行规则：
 76 
 77     1、所有的引用类型都具有对特性，即可以自由拓展属性（除null外）
 78         var obj={};
 79         obj.a=100;
 80         var arr=[];
 81         arr.a=100;
 82         function fn(){}
 83         fn.a=100;
 84     2、所有的引用类型都有一个__proto__（隐式原型）属性，实行值是一个普通对象
 85         console.log(obj.__proto__);
 86     3、所有的函数都有一个prototype（显示原型）属性，属性值也是一个普通对象
 87         console.log(fn.prototype);
 88     4、所有的引用类型的__proto__属性值都指向它的构造函数的prototype属性值，指向即全等
 89         consele.log(obj.__proto__===Object.prototype); //true
 90     5、当试图得到一个对象的某个属性时，如果这对象本身没有这个属性，那么他会试图去它的__proto__(即
 91        它的构造函数的显示原型)中查找。
 92        //构造函数：
 93        function Foo(name,age){
 94            thi.name=name;
 95        }
 96        Foo.prototype.alertName=function(){
 97            alert(this.name);
 98        }
 99        //创建示例：
100        var f=new Foo('xianlin');
101        f.printName=function(){
102            console.log(this.name);
103        }
104        //测试:
105        f.printName();   //xianlin
106        f.alertName();   //xianlin
107        
108     循环对象自身的属性：
109         var item;
110         for(item in f){
111             //高级浏览器已经在for in中屏蔽了来自原型的属性
112             //但是建议还是加个判断，保证程序的健壮性
113             if(f.hasOwnProperty(item)){
114                 console.log(item);
115             }
116         }
117         
118 原型链：
119 
120    //构造函数：
121    function Foo(name,age){
122        thi.name=name;
123    }
124    Foo.prototype.alertName=function(){
125        alert(this.name);
126    }
127    //创建示例：
128    var f=new Foo('xianlin');
129    f.printName=function(){
130        console.log(this.name);
131    }
132    //测试:
133    f.printName();   //xianlin
134    f.alertName();   //xianlin
135    f.toString();    //要去f.__proto__.__proto__中查找。
136    解析：f.__proto__是去到了f的Foo的构造函数的prototype中查找;
137          f.__proto__.__proto__是去到了Object的构造函数的prototype中查找;
138          
139 instanceof:
140 
141    f instanceof Foo的逻辑是：
142       -f的__proto__一层一层往上找，能否对应到Foo.prototype
143       -再试着判断f instanceof Object`

 

转载于:https://www.cnblogs.com/varnew/p/7430058.html