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"); }); });
1、click可以声明一个单击事件,但是该事件要叠加,所以不好2、unbind和bind也可以声明一个事件,而且该事件不叠加,但是不能给未来的元素添加事件3、delegate能为未来的元素添加事件/** * 闭包: * 在函数内部定义的函数在外部使用的现象 * 可以通过闭包实现函数的公开化和私有化 * 继承的内部实现就是闭包的一个很好的应用 */ /** * 匿名函数 * 在函数内部定义的函数,在外部是没有办法访问的 */ (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());
$().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>"); }