zoukankan      html  css  js  c++  java
  • Js 知识总结

    --------------------Js 中的String ----------------------

        // 通过传址来复制和专递的,而他们是通过传值来比较的

          var s1="hello";

          var s2="hell"+"o";

          if(s1==s2)document.write("string by value");

    ------------------------------执行过程-----------------------------

    <script >

    for (var i = 0; i < 10; i++) {

    setTimeout(function () {

    alert(i);

    }, 1000);

    }   //10 次10

    js的执行 1将函数与变量添加到作用域链 2.根据作用域链来执行相关函数和变量

    -----------------Js关键字 DELETE :---------------

      删除对象的方法或者是属性

    -------------------------------
    JavaScript 里的函数和对象即有对象的特征也有数组的特征.

    例:
       var aFunction = function() {};  //一个函数
        aFunction.aProperty = "Property of function";  //函数的一个属性
        aFunction.aMethod = function(){alert("Method of function")}; //函数的一个方法
        //主要看下面:
        alert(aFunction["aProperty"]);   //可以将函数当数组以属性名作为下标来访问属性
        aFunction["aMethod"]();          //可以将函数当数组以方法名作为下标来调用方法
        for( var s in aFunction)           //遍历函数的所有属性和方法进行迭代化处理
            alert(s + " is a " + typeof(aFunction[s]));
            
    ----------------call 方法-------------------
    JS call 函数解释:
    call 方法     调用构造函数
    概要解释:    call 对象的方法的转让 对象的重新构造 
    应用 于:      Function 对象 
    要   求:      版本 5.5 
    调用一个对象的一个方法,以另一个对象替换当前对象
    call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 
    参数 :
    thisObj 
    可选项。将被用作当前对象的对象。 
    arg1, arg2, , argN 
    可选项。将被传递方法参数序列。

    说明 :
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
    --------------------prototype属性------------------
    prototype  关键字总结:
      每个函数(Function) 就是一个对象,函数对象都有一个子对象prototype对象,
      类是以函数的形式来定义.prototype表示该函数的原型,也表示一个类的成员的集合.
      在通过New 创建一个类的实例对象的时候,prototype对象的成员都成为实例化的成员.
      
      
      编译: Javascript 代码执行引擎是一段段执行的,在同意段的执行中,定义式的函数优先执行,
      函数定义执行完后,才会按照顺序执行其他的代码.
      
    apply 函数与call 函数的作用相同 
    主要区别在第二参数, apply 第二个参数是个数组.


    -------------------with,callee方法---------------------------- 
    arguments.callee  ---指代当前调用的函数 
    // 该函数会造成堆栈溢出 ,原因是一个无条件的递归循环.
    function Alg()
    {
        // 当前对象调用当前方法 死循环
        with(arguments.callee())
        alert("xx");
    }
    Alg();

    function Sing()
    {    
        //将当前的调用函数作为对象放入with语句域中
        with(arguments.callee){
            alert(author+":"+poem);
        }
    }
    Sing.author="李白";
    Sing.poem="汉家秦地月,流影照明妃。一上玉关道,天涯去不归...";
    Sing();

    Sing.author = "李战";
    Sing.poem = "日出汉家天,月落阴山前。女儿琵琶怨,已唱三千年";
    Sing();

    ------------------JS中的delete----------------------------
    JS 中的delete 关键字用于删除对象的属性(这里的属性可以是方法,变量,甚至还可以是一个对象).


    ----------------------Eval(input)方法-----------------
     eval  n.(英文解释)重新运算求出参数的内容
     eval(txt)  将txt作为js代码执行  多用与执行json 对象

    ------------------------------当构造函数返回一个对象的时候,将会覆盖原对象 产生破坏性----------------------

    function F(){ 

    this.x = 1;     

    return { y : 2 }; 

    var f = new F();  

    alert(f.x);  //undefined

    ----------------------------

    ------------------------- JavaScript 对象的表示方法-------
     
      对象的创建:1 New 关键字 2 {} 大括号

    -------------------JS 函数与对象---------------------

     function Person(name)   //带参数的构造函数
     2     {
     3         this.name = name;   //将参数值赋给给this对象的属性
     4         this.SayHello = function() {alert("Hello, I'm " + this.name);};   //给this对象定义一个SayHello方法。
     5     };
     6 
     7     function Employee(name, salary)     //子构造函数
     8     {
     9         Person.call(this, name);        //将this传给父构造函数
    10         this.salary = salary;       //设置一个this的salary属性
    11         this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);};  //添加ShowMeTheMoney方法。
    12     };
    13     
    14     var BillGates = new Person("Bill Gates");   //用Person构造函数创建BillGates对象
    15     var SteveJobs = new Employee("Steve Jobs", 1234);   //用Empolyee构造函数创建SteveJobs对象
    16 
    17     BillGates.SayHello();   //显示:I'm Bill Gates
    18     SteveJobs.SayHello();   //显示:I'm Steve Jobs
    19     SteveJobs.ShowMeTheMoney();   //显示:Steve Jobs $1234
    20 
    21     alert(BillGates.constructor == Person);  //显示:true
    22     alert(SteveJobs.constructor == Employee);  //显示:true
    23     
    24     alert(BillGates.SayHello == SteveJobs.SayHello); //显示:false

    prototype  的 本质 :

        function SayHello()     //先定义一份SayHello函数代码
        {
            alert("Hello, I'm " + this.name);
        };
        
        function Person(name)   //带参数的构造函数
        {
            this.name = name;   //将参数值赋给给this对象的属性
            this.SayHello = SayHello;   //给this对象SayHello方法赋值为前面那份SayHello代码。
        };

        var BillGates = new Person("Bill Gates");   //创建BillGates对象
        var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象
        
        alert(BillGates.SayHello == SteveJobs.SayHello); //显示:true


     

    prototype  形式

    function Person(name)
        {
            this.name = name;   //设置对象属性,每个对象各自一份属性数据
        };
        
        Person.prototype.SayHello = function()  //给Person函数的prototype添加SayHello方法。
        {
            alert("Hello, I'm " + this.name);
        }

        var BillGates = new Person("Bill Gates");   //创建BillGates对象
        var SteveJobs = new Person("Steve Jobs");   //创建SteveJobs对象

        BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法
        SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法

        alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello,所以显示:true

    -------------------JS对象与函数的纠缠----------------------------

          function person(name){

            this.name=name;

            //构造函数内的属性 

            this.show=show;  

        }

        function show(){

            alert("Hello :"+this.name);

        }

        person.author="李白";

        person.poem="Everything has its object, things are empty...";

        person.Sing=function(){

            alert(person.author+" -> "+person.poem);

        }

        person.prototype=person   //在此演化

        person.prototype.marry=function(){

            alert(this.name+" have married")

        }

        var p=new person("张三");

        p.Sing();    

        p.marry();   // 结婚了

    --------------- 闭包经典代码--------------------------------

    闭包形成的必要条件 被闭包的变量在不同的作用域链中.

     1.使用闭包访问函数内部的变量
      Js代码

      function f1(){
        var n=999;
        nAdd=function(){n+=1}

        function f2(){
          alert(n);
        }
        return f2;
      }

      var result=f1();

      result(); // 999

      nAdd();

      result(); // 1000
      
      
      
     2.  匿名函数使用,形成私有作用域,形成一个闭包.  
       
         用处在多行异步ajax中的,使用匿名函数形成闭包,形成类似与多个实例的变量 一直存储在内存中.
     
     var item=document.getElementsByTagName("li");
       for(var i=0;i<item.length;i++)
       {
           (function(k){
              item.item(k).onclick=function(){
               index(k);
              }
           })(i);
       };
       function index(n){
           alert(n);
       }

    -------------------- 单选或复选框下拉框JQuery相关操作---------
     radio触发的事件一般为onclick事件  select 一般触发的是onchange 事件
     JQuery获取值可是 $("select option:select")

     

    ----------------JavaScript 执行过程 --------------------------
        在程序的执行中 js执行过程 将在执行环境中将变量或者是对象添加到作用域链上  在执行进行运算操作 
        以实现动态修改操作 具有动态语言的一部分特性.
        在编译型的语言中 变量是先被定义在使用该变量.


    ---------------------JQuery原理 ---------------------------------
     <body>
     <div id="d">divvv</div>
     <div id="fsd">fdsf</div>
     </body>
     </html>
     <script type="text/javascript">
     
     function fn(n){
       return n+arguments.callee(n-1);
     }
     //实现自己的MyQuery框架
     var MyQuery = function(selector){
     
         //调用将方法,方法内部将自己实例化为一个对象返回, 
         //一个方法成为对象后,可以通过原型扩展  类似对象的继承可以自己扩展方法 还可共享
         if ( window == this ) {
         return new arguments.callee(selector);   //call 调用当前调用的函数  可用于执行递归循环
         }
         //这里只实现dom类型的简单查找
         alert("this is equal  构造方法");
         var doms = document.getElementsByTagName(selector);
         var arr = [];
         for(var i=0; i<doms .length; i++){
             arr.push(doms.item(i));
         }
         return this.setArray(arr);
     }
     MyQuery.prototype.setArray = function( arr ) {
             this.length = 0;
             [].push.apply( this, arr );
             return this;
     }
     MyQuery.fn = MyQuery.prototype;
     var $ = MyQuery;
     
     //插件扩展1)each
     MyQuery.fn.each = function(method){
         for(var i=0,l=this.length; i<l; i++){
             method.call(this[i],i);
         }
     }
     //插件扩展2)show
     MyQuery.fn.show = function(){
         this.each(function(i){
             alert(i+":"+this.id+":"+this.innerHTML);
         });
     }
     //debugger
     $("div").show();
     </script></doms></script> 
    ---------------------------------------


        function WhoAmI()       //定义一个函数WhoAmI
        {
            alert("I'm " + this.name + " of " + typeof(this));
        };
        
        WhoAmI();   //此时是this当前这段代码的全局对象,在浏览器中就是window对象,其name属性为空字符串。输出:I'm of object
       ({name: "nobody", WhoAmI: WhoAmI}).WhoAmI();    //临时创建一个匿名对象并设置属性后调用WhoAmI方法。输出:I'm nobody of object

    ---------------jQuery返回链----------------

            $.fn.Insert=function () {

                  return this; //返回该对像 ->prototype ->服务的对象

            };

      -------------------------------------------------
      使用用户控件实现页面的继承:
      1 创建一个用户控件 不要和用户页面在同一个目录下 2 在web.config 注册该控件,


      with 关键字指的是当前环境上下文 有点类似this关键字.
      
      
      
        function MyFunc() {};         //定义一个空函数
        var anObj = new MyFunc();  //使用new操作符,借助MyFun函数,就创建了一个对象
        
        function MyFunc(){};
        var anObj = {};     //创建一个对象
        MyFunc.call(anObj); //将anObj对象作为this指针传递给MyFunc 对象的转换.


    ---- 在js中访问数组 访问不存在的数据,会返回undefined

    -------------------------------变量作用域问题-------------------
     在js中 只有方法才是变量作用域的分界标志  js的作用域是函数

     -------闭包与柯里化-------------------------------------------

    柯里化的概念 
    闭包的我们之前已经接触到,先说说柯里化。柯里化就是预先将函数的某些参数传入,得到一个简单的函数,但是预先传入的参数被保存在闭包中,因此会有一些奇特的特性。比如:

    1.var adder = function(num){   
    2.    return function(y){   
    3.       return num + y;     
    4.    }   
    5.}   
    6.    
    7.var inc = adder(1);   
    8.var dec = adder(-1); 


    1.//inc, dec现在是两个新的函数,作用是将传入的参数值(+/-)1   
    2.print(inc(99));//100   
    3.print(dec(101));//100   
    4.    
    5.print(adder(100)(2));//102   
    6.print(adder(2)(100));//102 


    -------柯里化的应用

    1.//update会返回一个函数,这个函数可以设置id属性为item的web元素的内容   
    2.function update(item){   
    3.    return function(text){   
    4.       $("div#"+item).html(text);   
    5.    }   
    6.}   
    7.    
    8.//Ajax请求,当成功是调用参数callback   
    9.function refresh(url, callback){   
    10.    var params = {   
    11.       type : "echo",   
    12.       data : ""  
    13.    };   
    14.    
    15.    $.ajax({   
    16.       type:"post",   
    17.       url:url,   
    18.       cache:false,   
    19.       async:true,   
    20.       dataType:"json",   
    21.       data:params,   
    22.         
    23.       //当异步请求成功时调用   
    24.       success: function(data, status){   
    25.           callback(data);   
    26.       },   
    27.         
    28.       //当请求出现错误时调用   
    29.       error: function(err){   
    30.           alert("error : "+err);   
    31.       }   
    32.    });   
    33.}   
    34.    
    35.refresh("action.do?target=news", update("newsPanel"));   
    36.refresh("action.do?target=articles", update("articlePanel"));   
    37.refresh("action.do?target=pictures", update("picturePanel")); 


    其中,update函数即为柯里化的一个实例,它会返回一个函数,即:
    1.update("newsPanel") = function(text){   
    2.    $("div#newsPanel").html(text);   
    3.}

     

    -***-------------------颠覆你的思维的东西-------*****
            oo(function () {
                alert(window instanceof Object);   //结果: false   
            });
    在windowsIE中 window 比Object 还要高一级


    var derp = "one";
    var Herp = function () {
        this.derp = "two";
    }
     
    //var foo = new Herp(); 实例化该对象
    var foo = Herp();
    alert(derp);   //结果根据是否实例化 如果实例化 结果为: one   ,否则为 two

    属性不同于定义一个变量变量

    Js中很多问题本质是变量作用域问题  原因大多为定义了相同变量名 造成的.

    这也是为什么其他语言 严格规定变量名. 因为为了避免这类问题. 

    ------ JS 数组相关---------------------------------

    var arr = [9999, 12, 343, 45, 67, 333, 88];

    var str = ["vc", "aa", "bb", "ac", "dc", "xc"];

    sort: sort(function(a,b){return a-b })  升序排序 

    reverse():反转函数    对数字类型的数组进行的是升序排列

    ------------- js函数与对象

            function person(name) {

                this.name = name;

                this.prototype = function () {

                    alert(this.name);

                };

                person.say(this.name);  

            }

            person.say = function (name) {

                alert("hello  :" + name);

            };

             var p = new person("xiaosan");


    ----------js之对象的创建--------------

    工厂方式创建

    function createCar() {
      var oTempCar = new Object;
      oTempCar.color = "blue";
      oTempCar.doors = 4;
      oTempCar.mpg = 25;
      oTempCar.showColor = function() {
        alert(this.color);
      };
      return oTempCar;
    }
    
    var oCar1 = createCar();
    var oCar2 = createCar();
    缺点:工厂方式创建的对象,会造成同个函数副本的存在
    ---------------混合的构造函数/原型方式-----------

    联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例

    function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.drivers = new Array("Mike","John");
    }
    
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);
    
    oCar1.drivers.push("Bill");
    
    alert(oCar1.drivers);	//输出 "Mike,John,Bill"
    alert(oCar2.drivers);
    ---- 一般采用混合模式 创建对象-----
    混合模式的使用:StringBuffer 实现   
    function StringBuffer () {
      this._strings_ = new Array();
    }
    
    StringBuffer.prototype.append = function(str) {
      this._strings_.push(str);
    };
    
    StringBuffer.prototype.toString = function() {
      return this._strings_.join("");
    };
    
    var buffer = new StringBuffer ();
    buffer.append("hello ");
    buffer.append("world");
    var result = buffer.toString();
    
    
    
    
    
    
    
    
    



     

  • 相关阅读:
    Java学习的第二十八天
    Java学习的第二十七天
    第五章 作用域闭包
    第4章提升
    第3章函数作用域和块级作用域
    Vant中List列表下拉加载更多
    获取当前时间
    js比较两个时间的大小
    边框引起页面抖动
    计算两个数的百分比,保留两位小数
  • 原文地址:https://www.cnblogs.com/voidobject/p/3975499.html
Copyright © 2011-2022 走看看