Js构造函数、原型链、Ajax笔记.docx

一、 This运行时基于函数的执行环境绑定1、 全局函数：window2、 函数作为某个对象obj的方法调用：obj3、 匿名函数：全局性，通常指向window4、 修改this作用域：apply()、call()。第一个参数为目标对象；第二个参数：apply接收参数数组，call接受参数值二、 闭包1、 定义：有权访问另一个函数作用域中变量的函数2、 实现：在一个函数内部创建另一个函数3、 变量：只能取得包含函数中任何变量的最后一个值，保存的是整个变量对象（典型：for循环中的闭包总是返回最后一个循环的值，无法返回每次循环的值）4、 解决：在闭包内部再创建一个匿名函数function aa()var result;for(var i=0;i10;i+)resulti=function(num)/闭包return function()/闭包中再创建一个函数alert(num);(i);三、 块级作用域(function()/块级作用域，其中的变量在执行结束后被销毁)();四、 创建对象1、 简单方式var person = new Object(); = “LL”;person.age = 22;问题：创建多个相似对象，大量重复代码2、 工厂模式function Person (name,age)var o = new Object(); = name;o.age = age;o.getName=function()alert();return o;var person1 = new Person(“LL”,22);person1.getName() ;/”LL”（1） 根据接受的参数来构建一个包含所有必要信息的Person对象，多次调用，每次返回一个包含两个属性和一个方法的对象。（2） 优点：解决了创建多个相似对象的问题问题：对象识别的问题，即怎样知道一个对象的类型解决：构造函数3、 构造函数模式function Person(name,age) = name;this.age = age;this.getName = function()alert();var person1 = new Person(“LL”,22);（1）与工厂模式比较a.没有显示的创建对象；b.直接将属性和方法赋值给this对象；c.没有return语句；d.将实例标识为一种特定的类型（instanceof）；（2）构造函数与普通函数区别a.习惯：构造函数始终一个大写字母开头，非构造函数以一个小写字母开头b.唯一区别：调用方式不同，用new调用为构造函数，不用new为普通函数（3）Constructor属性：标识对象类型person1.constructor = Person;（4）Instanceof操作符：检测对象类型person1既是Object的实例，也是Person的实例person1 instanceof Object = true;person1 instanceof Person = true;（5）问题：每个方法都要在每个实例上重新创建一遍解决：将方法定义在构造函数外部 新问题：方法很多定义很多全局函数自定义的类型无封装性 解决：原型模式4、 原型模式function Person();P = ”LL”;Ptptype.age = 22;Ptotype.getName = function()alert();var person1 = new Person();person1.job = “doctor”;alert(); / “LL”（1）函数的prototype属性：指针，指向一个对象，该对象包含可以由特定类型的所有实例共享的属性和方法。（2）与构造函数区别：不必在构造函数中定义对象实例的信息，将这些信息添加到原型对象中；（3）实例中访问的都是同一组属性和方法（4）原型对象a.函数的prototype（原型）属性：指向函数的原型对象b.constructor（构造函数）属性：包含一个指向prototype属性所在函数的指针Ptotype.constructor = Person; c.对象实例只可以访问保存在原型中的值，不可通过对象实例重写原型中的值 d.为对象实例添加一个属性时，可屏蔽原型对象中的同名属性，delet可以删除新添加的属性，重新访问原型中的属性值（5）hasOwnProperty()检测一个属性是在原型中还是实例中，实例中返回trueperson1.hasOwnProperty(“name”) = flase;person1.hasOwnProperty(job) =true; （6）原型与in操作符a.单独使用：通过对象能够访问给定属性时返回true，无论在原型和对象中name in person1 = true;job in person1 = true;若在实例中重写属性： = “ss”;则检测时name在实例总而不是原型中。b.for-in中使用：返回所有能够通过对象访问的、可枚举的属性，包括实例和原型中的。 （7）简化原型语法Ptotype = name : “LL”; age: 22;getName: function()alert();Instanceof不变Constructor指向Object而不是Person:person1.constructor = Person 为false;person1.constructor = Object 为true;若constructor必须指向Person:Ptotype = constructor: Person;name : “LL”; age: 22;getName: function()alert();person1.constructor = Person 为true;person1.constructor = Object 为false;（8）原型的动态性：a.对原型做修改，可立即从实例中反应出来；b.重写原型对象，实例仍然引用之前的原型值；（prototype要定义在实例前）（9）原型对象的问题a.省略了为构造函数传递函数，所有实例默认下取得相同属性值；b.共享性对于函数合适，对包含引用类型值的属性存在问题：如属性为数组，定义两个实例person1和person2，向person1数组属性添加值后也会在person2的同以数组属性中反应出来 c因此很少单独使用原型模式5、 构造和原型组合使用（*）最常见方式function Person(name,age)/实例属性在构造函数中定义 = name;this.age =age; Ptotype=/实例的共享属性在原型中定义constructor : Person;getName : function()alert();6、 动态原型模式7、 寄生构造函数模式8、 稳妥构造函数模式五、 AjaxXMLHttpRequest对象是基础1、 创建对象IE5、IE6var xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);其他浏览器var xmlhttp = new XMLHttpRequest();2、 发送请求到服务器xmlhttp.open(method,url, async); 规定请求相关信息method：GET或POSTurl：文件位置async：true（异步）或false（同步）xmlhttp.send(string); 将请求发送到服务器string仅用于POST，若无参数，传入null3、 GET和POST（1） 使用POST情况：更新服务器上的数据库和文件向服务器发送大量数据（POST无数据限制）包含未知字符的用户输入时，POST更稳定可靠（2） 使用GET发送信息直接向URL添加信息（3） 使用POST发送信息使用 setRequestHeader() 来添加 HTTP 头send()中规定发送的数据4、 setRequestHeader(header,value)向请求添加HTTP头header规定头的名称（”Content-type”）value规定头的值（”application/x-www-form-urlencoded”）5、 异步或同步（True 或 False）（1）异步XMLHttpRequest 对象用于 AJAX，其 open()的 async必须设为 true通过 AJAX，JavaScript 无需等待服务器的响应，而是：在等待服务器响应时执行其他脚本当响应就绪后对响应进行处理规定在响应处于 onreadystatechange 事件中的就绪状态（4）时执行的函数（2）同步小型的请求JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。不编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可6、 获得服务器响应responseText获得字符串形式的响应数据，非XML类型响应responseXML获得XML形式的响应数据7、 readstatueonreadystatechange事件：readState=4且status = 200时所执行的函数8、 readyStateXMLHttpRequest状态0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪9、 state200: OK404: 未找到页面10、 callback函数为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数function loadXMLDoc(url,cfunc)if (window.XMLHttpRequest)/ code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); else / code for IE6, IE5 xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);