JS高级第一天：

1、function是什么
  1.1  function是一个函数
     1.1.1  函数的表示方式
          function Person(){}
          var p = function(){}
          new Function()
     1.1.2  有两种执行方法
           1、function Person(){
                alert("aaa");     
              }
              Person();
               说明：
                   1、声明
                   2、调用
           2、function clickMe(){
          
              }
              <input type="button" οnclick="clickMe()"/>
                                       说明：
                    1、声明
                    2、该函数在什么时候执行，取决于什么时间点击button
   1.2   function是一个对象
     1.2.1 该对象有一个属性为constructor
      1.2.2 该对象是由Function函数创建出来的
      1.2.3 可以给对象动态的添加属性
      1.2.4 任何一个对象都有可能成为任何一个对象的属性
   1.3   function是一个构造器

 

/**
 * 1、是一个函数
 * 2、是一个对象
 *    2.1 
该对象有一个属性为constructor
 *    2.2 
该对象是由Function函数创建出来的
 *    2.3 
可以给对象动态的添加属性
 *    2.4 任何一个对象都有可能成为任何一个对象的属性
 * 
3、命名空间
 * 4、是一个构造器函数   
 * 
  可以调用new的关键字创建对象
 */
function 
Person(){
 
}
//给Person对象动态的添加了一个属性为a,其值为5
Person.a = 5;

/**
 * 1、Student是一个对象
 * 2、b是Person对象动态添加的一个属性，值为Student
 */
function Student(){
 alert("student");
}
Person.b = Student;
//调用Person对象的b方法
Person.b();

var json = {
 a:function(){
  alert("asdf");
 }
};
/**
 * 给Person动态添加了一个属性为c,其值为json对象
 */
Person.c = json;
Person.c.a();

function D(){
 
}
function E(){
 
}
function F(){
 alert("f");
}
Person.c.d = D;
Person.c.d.e = E;
Person.c.d.e.f = F;
Person.c.d.e.f();
function Aa(){
 
}
var aa = new Aa();
alert(aa.constructor);

              

 

var json = 
{
 a:1,
 b:2,
 c:3,
 d:4,
 e:5
};

/**
 * i代表key值
 * json[i]代表value值
 * 
可以利用该方式动态的遍历json
 */
for(var i in 
json){
 alert(i);
 alert(json[i]);
}

/**
 * 给json对象动态的添加了一个属性"aa",值为"aa"
 */
json['aa'] = "aa";
alert(json.aa);
/**
 * 给Person对象动态的添加4个方法
 *    setName,getName,setSex,getSex
 *    
 *    说明：
 *       1、任何一个对象都有一个属性为prototype
 *       2、当声明完一个对象时，该对象内部已经存在了一个属性prototype
 *       3、该prototype属性的初始值是一个空的json对象
 *       4、在prototype属性上加内容就相当于给该json对象填充key和value的值
 */
function Person(){
 
}
Person.prototype.setName = function(name){
 this.name = name;
}
Person.prototype.getName = function(){
 return this.name;
}
Person.prototype.setSex = function(sex){
 this.sex = sex;
}
Person.prototype.getSex = function(){
 return this.sex;
}
Person.prototype["aaaa"] = 5;
var p = new Person();
p.setName("王二麻子");
p.setSex("人妖");
alert(p.getName());
alert(p.getSex());
/**
 * 重新声明一个对象
 */
function Student (){
 
}
Student.prototype = p;
Student.prototype = Person.prototype;
var s = new Student();
s.setName("是男是女不知道");
s.setSex("不详");
alert(s.getName());
alert(s.getSex());

对于对象的prototype属性的说明，JScript手册上如是说：所有 JScript 内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法)，但该对象不能被赋予不同的原型。然而，用户定义的对象可以被赋给新的原型。

/**
 * 谁调用Person函数，this代表谁
 */
function 
Person(){
 alert(this);
}
Person();//window.Person();==Person();  
this代表window
var json = {
 a:Person
};
json.a();//this代表json
function Student(){
 
}
Student.a = 
Person;
Student.a();//this为Student

 

/**
 * 创建类的工厂
 */
function 
createClass(json){
 
 /**
  * 声明了一个对象、函数
  
*/
 function 
F(){
  
 }
 
 /**
  * 
把json对象的key和value的值全部赋值给F的prototype
  */
 for(var i in 
json){
  F.prototype[i] = 
json[i];
 }
 
 return F;
}
var Person = 
createClass({
 setName:function(name){
  this.name = 
name;
 },
 setSex:function(sex){
  this.sex = 
sex;
 },
 getName:function(){
  return 
this.name;
 },
 getSex:function(){
  return 
this.sex;
 }
});
var p = new 
Person();
p.setName("aaa");
p.setSex("bbb");
alert(p.getName());
alert(p.getSex());

 

/**
 * 当第一次调用该函数的时候，传递了一个参数json,而这个时候的json是一个json格式的对象
 * 
当第一次嗲用该函数的时候，传递了两个参数json(是一个函数),prop
 * @param {Object} json
 * 
@param {Object} prop
 */
function 
extend(json,prop){
 function F(){
 }
 /**
  * 
当传递进来的json是一个对象的时候，经过该if语句
  */
 if(typeof json=="object"){
  /**
   * 
把json对象的所有的内容赋值给F函数
   */
  for(var i in json){
   F.prototype[i] = json[i];
  }
 }
 
 /**
  * 
当第二次调用extend函数的时候，执行该if语句
  */
 if(typeof json=="function"){
  /**
   * F继承了json
   */
  F.prototype = json.prototype;
  /**
   * 
把prop里面的内容动态的赋值给F的prototype
   */
  for(var j in prop){
   F.prototype[j] = prop[j];
  }
 }
 return F;
}
var Person = extend({
 a:1,
 b:2
});
var SupPerson = extend(Person,{
 c:3,
 d:4
});
var sp = new 
SupPerson();
alert(sp.a);
alert(sp.b);
alert(sp.c);
alert(sp.d);

/**
 * 写一个函数，该函数有两个参数
 *    1、destination
 *    2、source
 *   该函数的功能：那source的内容复制到destination中
 */
function extend(destination,source){
 if(source){//必须传递source参数
  if(typeof source=="object"){//确保了source是一个对象
   for(var i in source){
    destination[i] = source[i];
   }
  }
 }
 return destination; 
}
var newjson = extend({},{
 a:1,
 b:2,
 c:3
});
alert(newjson.a);
alert(newjson.b);
alert(newjson.c);
/**
 * 回调函数
 */
function ajax(ajaxJSON){
 var xmlHttpReuquest = ajaxFunction();
    xmlHttpReuquest.onreadystatechange = function(){//客户端和服务器端的沟通桥梁
        if (xmlHttpReuquest.readyState == 4) {//响应完成
            if (xmlHttpReuquest.status == 200) {//响应成功
             /**
              * 该函数的参数为实参
              */
    ajaxJSON.callback(xmlHttpReuquest.responseText);
            }
        }
    }
    xmlHttpReuquest.open(ajaxJSON.method, ajaxJSON.url, true);
    
    xmlHttpReuquest.send(ajaxJSON.data);
}
    
/**
 * 创建XMLHttpRequest对象
 */
function ajaxFunction(){
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } 
    catch (e) {
        try {// Internet Explorer
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) {
            }
        }
    }
    
    return xmlHttp;
}
window.onload = function(){
 ajax({
  method:"post",
  url:'../HelloServlet',
  data:null,
  callback:function(data){
   alert(data);
  }
 });
}
小知识点：使用POST方式提交时乱码问题可以这样解决：
response.setContentType("text/html;charset=utf-8");
/**
 * 写一个函数，该函数有两个参数
 *   第一个参数是字符串
 *   第二个参数是回调函数
 *  该函数的功能：
 *      给页面上的一个div添加一个click事件
 *          eventHandler(str,callback){
 *             if(str=="click"){
 *                获取页面上div,给div添加一个事件，这个事件要做的事情，回调函数决定
 *             }
 *          }
 */
function eventHandler(Str, callback){
    if (Str == "click") {
        $("#aaa").click(function(){
            callback();
        });
    }
    else {
        alert("不存在该事件");
    }
}
$().ready(function(){
    eventHandler("click", function(){
        alert("aaaa");
    });
});
/**
 * 闭包：
 *     在函数内部定义的函数在外部使用的现象
 *     可以通过闭包实现函数的公开化和私有化
 *     继承的内部实现就是闭包的一个很好的应用
 */
/**
 * 匿名函数
 *    在函数内部定义的函数，在外部是没有办法访问的
 */
(function(){
 /**
  * 该函数定义在了匿名函数中
  */
 function Person(){
  /**
   * 该函数返回的是一个json格式的对象
   */
  return {
   setName:setName,
   setSex:setSex,
   getName:getName,
   getSex:getSex
  };
 }
 /**
  * 公开的api
  * @param {Object} name
  */
 function setName(name){
  this.name = name;
 }
 
 function setSex(sex){
  this.sex = sex;
 }
 
 function getName(){
  return this.name;
 }
 
 function getSex(){
  aa();
  return this.sex;
 }
 
 /**
  * 私有的函数
  */
 function aa(){
  
 }
 
 window.Person = Person;
})();
var p = window.Person();
p.setName("aa");
p.setSex("bb");
alert(p.getName());
1、click可以声明一个单击事件，但是该事件要叠加，所以不好2、unbind和bind也可以声明一个事件，而且该事件不叠加，但是不能给未来的元素添加事件3、delegate能为未来的元素添加事件

$().ready(function(){
    for (var i = 0; i < 4; i++) {
        /**
         * 循环了4次，事件叠加了4次
         */
        //        $("#aaa").click(function(){
        //            alert("aaa");
        //        });
        /**
         * 始终保证事件只出现一次
         */
        //  $("#aaa").unbind("click");
        //  $("#aaa").bind("click", function(){
        //   alert("aaaa");
        //  });
    }
 
 /**
  * 该函数能给未来的元素添加事件
  */
    $("html").delegate("body div", "click", function(){
        alert("aaaa");
    });
    $("body").append(createDIV());
});
/**
 * 创建一个div
 */
function createDIV(){
    return $("<div id=\"aaa\">aaaaaa</div>");
}