前端JS基础二（原型与原型链）

原型与原型链

原型规则(是学习原型链的基础)

*构造函数*
     function Foo(name,age){
        this.name=name;
        this.age=age;
        this.class="class-1";
        //return this;//默认有这一行
     }
     var f=new Foo('zhangsan',20)
     var f1=new Foo('lisi',22)//创建多个对象
     //new对象时函数中的this初始化为空对象，参数赋值完后返回this给f和f1

  *构造函数--扩展*
     var a={}其实是var a=new Object()的语法糖
     var a=[]其实是var a=new Array()的语法糖
     function Foo(){...}其实是var Foo=new Function(...)
     //使用instanceof判断一个函数是否是一个变量的构造函数
     //对象，数组，函数的构造函数其实是Object,Array,Function
     //判断一个变量是否是'数组'  变量 instanceof Array

• 所有的引用类型(数组，对象，函数)，都具有对像特性，即可自由扩展属性（除了null）
• 所有的引用类型（数组，函数，对象），都有一个 proto 属性，属性值是一个普通对象
• 所有的函数，都有一个 prototype 属性，属性值也是一个普通的对象
• 函数的 prototype 称显式原型，引用类型的 _proto 成为隐式原型
• 所有的引用类型（数组，函数，对象），其 proto 属性值都指向其构造函数的 prototype 属性值
• 当试图获取一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的prot_(即它的构造函数的prototype)

原型链示意图

         var obj={};obj.a=100;
         var arr=[];arr.a=100;
         function fn(){}
         fn.a=100;

         console.log(obj.__proto__);
         console.log(arr.__proto__);
         console.log(fn.__proto__);
         console.log(fn.prototype)
         console.log(obj.__proto__===Object.prototype)

        function Foo(name,age){
            this.name=name;
        }             
        Foo.prototype.alertName=function(){
             alert(this.name)
        }
        var f=new Foo('zhangsan');
        f.printName=function(){
            console.log(this.name);
        }
        f.printName();
        f.alertName();

        //循环对象自身的属性
        var item;
        for(item in f){
          //高级浏览器已经在for in中屏蔽了来自原型的属性
          //但是这里建议大家还是加上这个判断，保证程序的健壮性
          if(f.hasOwnProperty(item))
              console.log(item);
        }

  *原型链*
     f.toString()//要去f.__proto__.__proto__中去找
  *instanseof*
     **注意:** //用于判断引用类型属于哪个构造函数的方法
      f instanceof Foo的判断逻辑是:
         f的__proto__一层一层向上找，能否对应到Foo.prototype
      f instanceof Object也是正确的

练习题

    练习题1、如何准确判断一个变量时数组类型？
           var arr=[]
           arr instanceof Array //true
           typeof arr//object,typeof是无法判断是否是数组的

    练习题2、写一个原型链继承的例子
       ①function Animal(){
          this.eat=function(){
             console.log('animal eat');
          }
       }
       function Dog(){
          this.bark=function(){
             console.log('dog bark')
          }
       }
       Dog.prototype=new Animal();
       var hashiqi=new Dog()

       ②function Elem(id){
           this.elem=document.getElementById(id);
       }
       Elem.prototype.html=function(val){
          var elem=this.elem;
          if(val){
              elem.innerHTML=val;
              return this;//链式操作
          }else{
             return elem.innerHTML;
          }
       }
      Elem.prototype.on=function(type,fn){
         var elem=this.elem;
         elem.addEventListener(type,fn);
         return this;
      }
      var elem=new Elem("div1");
      elem.html("
hello world
").on("click",function()
            {alert("clicked")}).html("
javascript
");

    练习题3、描述new一个对象的过程
       ①创建一个新对象
       ②this指向这个新对象
       ③执行代码，即对this赋值
       ④返回this