前端学习一原型

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>原型</title>
    <script>
    window.onload = function(){
      
         //js皆对象？
         //js分为两大类：原始值+对象。
         //对象有区别：函数对象与普通对象
         //1    函数对象
         //函数对象就是通过new function（）创造的
         //如:
         function f(){};//等同于 var f= new function();
         typeof f;//结果是function类型
         //2    普通对象
          var a={};//等同于 var a = new Object()
          typeof a;//结果是object类型;
         //3    示例属于普通对象。
          function f1(){};
          var f2 = new f1();
          typeof f1;//结果是object类型
          // 每一个函数对象都有一个prototype属性，而普通对象没有。
        //   属性名.propotype.属性；
        //   实例化.propotype.属性;
             //constructor属性
        //prototype下面有construtor等属性
        //函数对象创建后包含Prototype，prototype中包含constructor
        //constructor指向ff
        function ff(){};//空的函数对象
        ff.prototype.name = 'aa';//将name，age放到原型里面了
        ff.prototype.age = '22';
        var ff1 = new ff();
        var ff2 = new ff();
        //实例化ff1,ff2里面不包含prototype，但是包含--proto--，而proto指向prototype
        ff1.name;
        ff2.age;
        //为什么需要原型？？？？？？？
    //例 创建一个空对象；
    var cat1 ={};
    cat1.name = '大名';
    cat1.color='蓝色';
    var cat2 ={};
    cat1.name = '大名';
    cat1.color='蓝色';
     //数量一多就需要创建很多次，这时需要封装
     function Cat(name,color){//这是一个普通函数（不是构造函数）
         return{
             name:name,
             color:color
         }
     }; 
     var cat1 = Cat("大明","黄色");
     var cat2 = Cat("小明","黄色");
     cat1.name;//
     //构造函数也是普通函数，但是多了一个this变量
     function Cat(name,color){//这是一个构造函数
      
             this.name=name,
            this.color=color
         
     }; 
     var cat1 = new Cat("大明","黄色");
     var cat2 = new Cat("小明","黄色");
     cat1.name;//

     function Cat(name,color){//这种做法影响效率，还浪费内存，因为你每创建一个cat1里面的数据就会复制一份。此时prototype就登场了，往下看。
      this.name=name,
      this.color=color,
      this.typr='动物',
      this.eat = function(){
          console.log('吃肉');
      }
  
     }; 
       var cat1 = new Cat("大明","黄色");
       var cat2 = new Cat("小明","黄色");

//prototype上场了
function Cat(name,color){
      this.name=name,
      this.color=color
     }; 
     Cat.prototype.type='动物';
     Cat.prototype.eat = function(){
          console.log('吃肉');
     };
       var cat1 = new Cat("大明","黄色");
       var cat2 = new Cat("小明","黄色");
//此时无论你有多少个cat1、cat2.....type与eat只有一个，因为它们处于公共区域中。


  //prototype 验证属性的存在与否
  function Cat(name,color){
      this.name=name,
      this.color=color
     }; 
     Cat.prototype.type='动物';
     Cat.prototype.eat = function(){
          console.log('吃肉');
     };
       var cat1 = new Cat("大明","黄色");
       var cat2 = new Cat("小明","黄色");
  //in 分不出这个被验证的属性是来自于自身的还是来自于继承的还是来自于propotype
  console.log('name' in cat1);//true
  console.log('type' in cat1);//true
  //hasOwnproporty 可以
  console.log(cat1.hasOwnProperty('name'));//true
  console.log(cat1.hasOwnProperty('type'));//false

//层级关系，当在自己的属性里找不到你要找的东西时才会进入原型中。
    
function Cat(name,color){
      this.name=name,
      this.color=color
     }; 
     Cat.prototype.name='动物';
       var cat1 = new Cat("大明","黄色");
       //此时name的值大明；

       //构造函数的继承
       function Animal(){///动物对象
           this.name='动物';
       };
       function Cat(name,color){  // 猫对象
           this.name=name,
           this.color=color
     }; 

     //关联两个构造函数
     //apply(this,arr[])  call()  在一个对象中调用另一个对象
     //区别 参数不同  apply 传输组(有就写没有可以不写)  call 一个个传
     function Cat(name,color){  // 猫对象
     Animal.apply(this);//将父对象的构造函数绑定到子函数，this只当前的作用域
           this.name=name,
           this.color=color
     }; 
     var cat1 = new Cat("大明","黄色");
     console.log(cat1.type);//此时便于Animal有关联了

     //prototype省了内存，更优
     //1
     function Animal(){///动物对象
           this.name='动物';
       };
       function Cat(name,color){  // 猫对象
           this.name=name,
           this.color=color
     }; 
     Cat.prototype = new Animal();   
     console.log(cat1.type);//此时便于Animal有关联了
     //2 直接继承
     function Animal(){///动物对象
          // this.name='动物';
       };
       Animal.prototype.type = '动物';
       function Cat(name,color){  // 猫对象
           this.name=name,
           this.color=color
     }; 
     Cat.prototype = Animal.prototype;  // 
     console.log(cat1.type);//此时便于Animal有关联了
    //但是第二种方法有一个不好的地方Cat.prototype与Animal.prototype指向同一个对象
     function Animal(){
    };
       Animal.prototype.type = '动物';
       function Cat(name,color){
           this.name=name,
           this.color=color
     }; 
     Cat.prototype = Animal.prototype;  
     Cat.prototype.aaa='aaa';
     console.log(Animal.prototype);
     //此时打印结果是{type:"动物",aaa:"aaa",constructor:f}
    }
    
    </script>
</head>
<body>
    
</body>
</html>
猜你喜欢
