03-JS资料
继承
原型链继承
function Animal() {this.type = "animal";this.eat = function (food) {console.log(food);};}function Cat(name, color) {this.name = name;this.color;}Cat.prototype = new Animal();var c1 = new Cat("lily", "white");var c2 = new Cat("niki", "black");console.log(c1.type);c1.eat("鱼");构造函数继承
/*******************构造函数继承************************ */function Animal() {this.type = "动物";}function Cat(name, color) {this.name = name;this.color = color;Animal.apply(this); //相当于将Animal和Cat强行关联起来}var c1 = new Cat("lily", "white"); //{name: 'lily', color: 'white', type: '动物'}var c2 = new Cat("niki", "black"); //{name: 'niki', color: 'black', type: '动物'}c1.__proto__.type = "c1";console.log(c1.type); //动物console.log(c2.type); //动物组合继承
function Animal() {this.type = "动物";}Animal.prototype.eat = function () {console.log("吃");};function Cat(name, color) {this.name = name;this.color = color;Animal.call(this);}Cat.prototype = new Animal(); //Cat.prototype的原型对象继承了Animal的对象，// 通过这一关系，可以把Animal的原型对象也关联到Cat上了var c1 = new Cat("lily", "white");var c2 = new Cat("niki", "black");c1.type = "c1";c2.__proto__.type = "c2";console.log(c1.type); //c1console.log(c2.type); //"动物"console.log(c2.__proto__.type);c2.__proto__.eat();闭包
要理解闭包，首先要理解javascript的全局变量和局部变量
javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部 的局部变量
闭包就是能够读取其他函数内部变量的函数
由于在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在 一个函数内部的函数“
所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁
变量特色：全局变量维持变量状态，局部变量不会造成污染【随着方法执行完而被销毁】
为什么需要闭包？
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。
总结：局部变量无法共享和长久的保存，而全局变量可能造成变量污染，当我们希望有一种机制既可以长久的保存变量又不会造成全局污染，这就是闭包诞生的原因。
变量a只有在没有任何引用指向它时才会被垃圾回收
function f1() {var a = 20;function f2() {a++;console.log(a);}return f2;}var f = f1(); //获取到的是f2--function,console.log(typeof f);//f1执行的结果是闭包，在闭包里能够维护局部变量的状态f1()();//这种写法不是闭包，不能维持局部变量的状态，每次执行的结果都是21//闭包形成的条件：1、返回一个函数；2、这个函数对局部变量存在引用，这样就形成闭包了//闭包的省略写法function f1() {var a = 20;return function () {a++;console.log(a);};}var x = f1();var y = f1();x(); //21x(); //22x(); //23y(); //21 一个闭包对变量的修改，不会影响另外一个闭包的变量闭包实例2
function fn() {var name = "xp";return {getName: function () {return name;},setName: function (newName) {name = newName;},};}var o = fn();//返回对象var name = o.getName();console.log(name);o.setName("xupeng");console.log(o.getName());利用闭包封装http
function http() {var xmlhttp = new XMLHttpRequest();var _url = "http://localhost:3333";return {//success:为回调函数request: function ({ method, url, data, success }) {xmlhttp.open(method, `${_url}${url}`);xmlhttp.setRequestHeader("Content-Type", "application/json");if (method == "GET") {xmlhttp.send();} else {xmlhttp.send(data);}xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {success(xmlhttp.responseText);} else {//失败的回调}};},};
}window.onload = function () {document.querySelector(".login").onclick = function () {var _mobile = document.querySelector(".mobile").value;var _password = document.querySelector(".password").value;se;};function sendData(mobile, password) {var xmlhttp = new XMLHttpRequest();xmlhttp.open("POST", "http://localhost:3333/form_login");xmlhttp.setRequestHeader("Content-Type", "application/json");xmlhttp.send(JSON.stringify({mobile: mobile,password: password,}));xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {console.log(xmlhttp.responseText);}};}/************使用闭包封装的http请求***************************** */var http = http();function sendDataBB(mobile, password) {http.request({method: "POST",url: "/form_login",data: JSON.stringify({mobile: mobile,password: password,}),success: function (res) {console.log(res);},});}
};