js高级 笔记

作用域


js 中,现在函数内部寻找,再去外层寻找


var c = 9;    


                        // var b = 10;测试变量从内向外
  function t1(){
     var b = 4;
     function t2(){
       var a = 6;
       alert(c+b+a);
     }
     t2();
  }


  t1();  //  19








赋值 a = 5;  和声明变量var b;
 function t2(){
     var a;
     function t3(){
       a = 5;
       b = 4;  


     }
     t3();
  }
  t2();
                    //寻找的是变量a,b; 若是找不到,则用赋值的  
  console.log(b);   //4
  console.log(a);   //a is not defined 
 


-------------------------------------------------
1
    var st1 = "wang";
    function t1(){
      console.log(st1);
      console.log(st2);


       st2 ="绝世";              //此处


    }


t1();  //wang   st2 is not defined (从下向上)
----------------------------------------------
    var st1 = "wang";
    function t1(){
      console.log(st1);
      console.log(st2);


      var st2 ="绝世";          //此处


    }


t1();  //wang   undefined (从下向上)








js词法分析


分3步
1: 先分析参数
2: 再分析变量声明
3: 分析函数声明


具体步骤:




0: 函数运行的一瞬间,生成Active OBject (活动对象),下称AO


1:
  1.1 函数声明的参数, 形成AO的属性,值全是undefined
  1.2 接受实参,形成AO相应的属性
 
2:  分析变量声明! 如var age;
    如果AO上还没有age属性,则添加AO属性,值是undefined;
    如果AO上已有age属性,则不做任何影响


3  分析函数声明,如 function foo(),
则把函数赋给AO.foo 属性
注: 如果此前foo属性已存在,则被覆盖;






执行器
var  


函数嵌套
function t1(){
  function t2(){


  }
}


 先生成 t1 AO链,再形成t2() AO链  寻找是由内而外 (t2-->t1)
 
  


arguments 收集所有的实参








this详解


name = "this is window";


var obj = {name:'php',t:function(){alert(this.name)}};


var dog = {name:'zangao'};




obj.t();  //










                             
                             -proto-            prototype   
原型继承  (链型)  (trige对象 --------  trige方法 ------- cat对象 ---cat方法   ----object对象  ---null)


function trige(){
    this.bark = function (){
       alert('老虎,能叫');
    }
  }


  function cat(){
     this.climb = function(){
        alert('猫,能爬树');
     }
  }


    function bird(){
     this.fly = function(){
        alert('鸟,飞得更高');
     }
  }
  // var san = new cat();
   
  trige.prototype = new cat();    //此处为继承(老虎继承猫)
  trige.prototype = new bird();  //不能多继承(老虎不能再继承鸟)
  var hnan = new trige();  
  hnan.climb();
//  hnan.fly();                   
  console.log(hnan);














  //给所有的对象加一个唱歌的方法;


  ((对象)Object.prototype === (Object的原型) 加上sing方法)
  Object.prototype.sing =function (){
       alert('最炫民族风,苍茫的天涯');
  }


  function pig(){
    this.wig = '300kg';
  }
  var p1 = new pig();
  p1.sing();






 // 一只小狗 会 '汪汪'叫,后来环境发生变化,只会'呜呜'叫;


  function dog(){
     this.name = "花花";
     this.bark = function(){
        alert('汪汪叫');
     }
  }
   
   var xh = new dog();       
   xh.bark();                  //狗汪汪叫


  function ndog(){
     this.bark = function(){
        alert('呜呜叫');
     }
  }


   ndog.prototype = new dog();   //新出生的狗 继承原来的 狗


   var n = new ndog();           // new 新出生
   n.bark();                     //狗呜呜叫














//原型冒充


  function cat(leg,tail){
     this.leg = leg;
     this.tail = tail;
     this.climb = function (){
        alert("我会爬树");
     }
  }


  function trige(leg,tail,color){
     //把要继承的父类 执行一遍
      this.parent =  cat;  //把cat的构造函数,赋值到parent的属性上    
      this.parent.apply(this,arguments); //参数
      delete this.parent;                //执行完毕删除父类
      
      this.color = color;
  }
  
  var t = new trige();
  t.climb();










  //复制继承
function cat(leg,tail){
     this.leg = leg;
     this.tail = tail;
     this.climb = function (){
        alert("我会爬树");
     }
  }


  function trige(color){
      this.color = color;
      this.extend = function (parent){
          for(var key in parent){
             this[key] = parent[key];            //把父类的属性和方法传过来,赋给本类
          }
      }
  }
  
  var t = new trige('red');
//  t.climb();            //没有climb方法
  console.log(t); 
  t.extend(new cat('4','1'));   //单个继承
  t.climb();               //此时能爬树了
   console.log(t); 










行为 :事件 js 
结构 :div p标签 ...
 
样式: css


3种 
一 写在一起 <input οnclick='fu();'>




二  document.getElementById('test').onclick = function(){}  //只能绑定一个事件 




三    var t = document.getElementById("test");             //绑定多个事件
   t.addEventListener('click',function(){alert('冒泡');},false);
   t.addEventListener('click',function(){alert('捕捉');},true);




   //true 捕捉时间(由外到里)       false冒泡(由里到外)
  










window.onload = function(){
     
    //一 行为分离
   document.getElementById('t1').onclick = function(){
         alert('click me');
   }


    //二  可以使用this 简洁方便 function 是对象的on***属性出现的
   document.getElementById('t2').onclick = function(){
        this.style.background = "red";
   }


   //鼠标移动 跟随
   document.getElementById('body').onclick = function(ev){
    // console.log(ev);
      var t4 =  document.getElementById('t4');
      t4.style.left = ev.clientX +'px';
      t4.style.top = ev.clientY +'px';
   }
  
  
}








  ev.stopPropagation(); //阻止向下进行 
  
   var t = document.getElementById("test");
   t.addEventListener('click',function(){alert('haha');
                     },false);
   t.addEventListener('click',function(ev){alert('last');
               ev.stopPropagation(); //阻止向下进行                       
   },false);




    //提交时 submit  ev.preventDefault();阻止提交




  // 阻止事件 removeEventLiatener;