php游戏网站建设wordpress页面调用分类文章的方法

php游戏网站建设,wordpress页面调用分类文章的方法,做设计什么网站平台好点做私活,担保公司发展规划文章目录一、编程思想1. 面向过程编程2. 面向对象编程3. 面向过程 vs 面向对象二、构造函数与原型4. 构造函数实现面向对象5. 构造函数的内存问题三、原型系统6. 原型对象概念7. 原型中的 this 指向8. 扩展内置对象原型9. constructor 属性10. 对象原型 __proto__11. 原型继承1…文章目录一、编程思想1. 面向过程编程2. 面向对象编程3. 面向过程 vs 面向对象二、构造函数与原型4. 构造函数实现面向对象5. 构造函数的内存问题三、原型系统6. 原型对象概念7. 原型中的 this 指向8. 扩展内置对象原型9. constructor 属性10. 对象原型 __proto__11. 原型继承12. 原型链查找规则13. instanceof 运算符四、深浅拷贝--只针对引用类型14. 浅拷贝15. 深拷贝方法一递归实现方法二使用 JSON 方法有局限性方法三使用第三方库lodash五、异常处理16. 异常处理机制六、this 指向与处理17. this 指向规则普通函数的 this箭头函数的 this18. 改变 this 指向call() - 立即执行apply() - 立即执行数组参数bind() - 返回新函数三者区别总结七、防抖与节流19. 防抖Debounce20. 节流Throttle21. 防抖与节流的区别与应用场景22. 相关事件补充总结一、编程思想1. 面向过程编程面向过程是一种传统的编程范式它将程序视为一系列顺序执行的步骤。开发者需要分析问题将解决方案分解为一个个具体的步骤然后用函数实现这些步骤。特点关注如何做How to do以函数为中心组织代码数据与操作分离示例制作蛋炒饭的过程准备食材鸡蛋、米饭、油、盐打散鸡蛋热锅下油炒鸡蛋加入米饭调味翻炒出锅装盘2. 面向对象编程面向对象编程OOP将程序视为一组相互作用的对象每个对象都是具有特定功能的独立实体。三大特性封装性将数据和方法隐藏在对象内部只暴露必要的接口继承性子类可以继承父类的属性和方法实现代码复用多态性同一接口可以有不同的实现方式示例餐厅系统对象厨师、服务员、顾客、收银员每个对象有明确的职责厨师负责烹饪服务员负责点菜上菜收银员负责结账3. 面向过程 vs 面向对象对比维度面向过程面向对象核心思想步骤分解对象交互代码组织以函数为中心以对象为中心数据存储数据与函数分离数据与方法封装在一起适用场景简单任务、一次性脚本复杂系统、长期维护项目复用性函数复用对象复用、继承复用二、构造函数与原型4. 构造函数实现面向对象// 构造函数类functionPerson(name,age){// 实例属性this.namename;this.ageage;// 实例方法 - 每个实例都会创建独立的方法副本this.sayHellofunction(){console.log(Hello, Im${this.name});};}// 创建实例constperson1newPerson(Alice,25);constperson2newPerson(Bob,30);console.log(person1.name);// Aliceconsole.log(person2.name);// Bob5. 构造函数的内存问题问题每个实例都会创建独立的方法副本造成内存浪费functionPerson(name){this.namename;this.sayHifunction(){console.log(Hi, this.name);};}constp1newPerson(小明);constp2newPerson(小红);console.log(p1.sayHip2.sayHi);// false - 两个独立的方法三、原型系统6. 原型对象概念JavaScript 中每个函数都有一个prototype属性指向一个原型对象。所有实例共享原型对象上的属性和方法。公共的属性写到构造函数里面公共的方法写到原型对象身上避免内存浪费JavaScript 中对象的工作机制当访问对象的属性或方法时先在当前实例对象是查找然后再去原型对象查找并且原型对象被所有实例共享。functionStar(uname,age){this.unameuname;// 公共属性this.ageage;}// 公共方法写到原型对象上Star.prototype.singfunction(){console.log(唱歌);}constldhnewStar(刘德华,55);constzxynewStar(张学友,58);// 所有实例共享同一个方法console.log(ldh.singzxy.sing);// true7. 原型中的 this 指向构造函数和原型对象中的this都指向实例化的对象。letthat;functionStar(uname){thatthis;// 构造函数中的this指向实例对象this.unameuname;}Star.prototype.singfunction(){thatthis;// 原型方法中的this指向实例对象console.log(唱歌);}constldhnewStar(刘德华);ldh.sing();console.log(thatldh);// true8. 扩展内置对象原型// 为数组添加自定义方法// 最大值方法Array.prototype.maxfunction(){returnMath.max(...this);}// 最小值方法Array.prototype.minfunction(){returnMath.min(...this);}// 求和方法Array.prototype.sumfunction(){returnthis.reduce((prev,item)previtem,0);}// 使用示例console.log([1,2,3].max());// 3console.log([1,2,3].min());// 1console.log([1,2,3].sum());// 6// 注意扩展内置对象原型需谨慎可能与其他库冲突9. constructor 属性每个原型对象都有一个constructor属性指向其构造函数。当重写原型对象时需要手动设置constructor。functionPerson(name){this.namename;}constpnewPerson(Lucy);console.log(p.constructorPerson);// trueconsole.log(Person.prototype.constructorPerson);// true// 重置原型后需要恢复 constructorPerson.prototype{// 需要手动设置 constructorconstructor:Person,sayHello(){console.log(Hello);}};10. 对象原型proto每个对象都有一个__proto__属性现代浏览器推荐使用Object.getPrototypeOf()指向其构造函数的原型对象。注意proto是JS非标准属性[[prototype]]和__proto__意义相同用来表明当前实例对象指向哪个原型对象prototype__proto__对象原型里面也有一个 constructor属性指向创建该实例对象的构造函数functionStar(){}constldhnewStar();// 对象原型指向构造函数的原型对象console.log(ldh.__proto__Star.prototype);// true// 对象原型的constructor指向构造函数console.log(ldh.__proto__.constructorStar);// true11. 原型继承通过原型实现对象之间的继承关系。// 父构造函数functionPerson(){this.eyes2;this.head1;}// 子构造函数functionWoman(){}// 核心通过原型继承父构造函数Woman.prototypenewPerson();// 指回原来的构造函数Woman.prototype.constructorWoman;// 添加子构造函数自己的方法Woman.prototype.babyfunction(){console.log(baby);}constrednewWoman();console.log(red.eyes);// 2继承自Personred.baby();// baby自己的方法12. 原型链查找规则当访问对象属性/方法时先在对象自身查找找不到则沿着__proto__到原型对象查找继续沿着原型链向上查找直到Object.prototype如果到Object.prototype仍找不到返回undefinedfunctionPerson(){}constldhnewPerson();// 原型链关系console.log(ldh.__proto__Person.prototype);// trueconsole.log(Person.prototype.__proto__Object.prototype);// trueconsole.log(Object.prototype.__proto__null);// true// instanceof 检查原型链console.log(ldhinstanceofPerson);// trueconsole.log(ldhinstanceofObject);// trueconsole.log(ArrayinstanceofObject);// true13. instanceof 运算符判断构造函数的prototype是否出现在对象的原型链上。四、深浅拷贝–只针对引用类型14. 浅拷贝特点只拷贝对象的第一层属性如果属性值是引用类型则拷贝的是地址。// 浅拷贝方法constobj{name:Alice,hobbies:[reading,music],info:{age:25}};// 1. Object.assign()constcopy1Object.assign({},obj);// 2. 展开运算符constcopy2{...obj};// 3. 数组浅拷贝constarr[1,2,{a:3}];constarrCopy1arr.slice();constarrCopy2[...arr];constarrCopy3arr.concat();// 浅拷贝的问题copy1.hobbies.push(sports);console.log(obj.hobbies);// [reading, music, sports] - 被修改了15. 深拷贝特点完全拷贝对象及其嵌套对象新旧对象完全独立。方法一递归实现functiondeepCopy(newObj,oldObj){for(letkinoldObj){if(oldObj[k]instanceofArray){newObj[k][];deepCopy(newObj[k],oldObj[k]);}elseif(oldObj[k]instanceofObject){newObj[k]{};deepCopy(newObj[k],oldObj[k]);}else{newObj[k]oldObj[k];}}}方法二使用 JSON 方法有局限性constobj{name:Alice,hobbies:[reading,music],date:newDate()};constdeepCopyJSON.parse(JSON.stringify(obj));// 局限性// 1. 不能处理函数、undefined、Symbol// 2. 不能处理循环引用// 3. Date对象会变成字符串// 4. RegExp、Error对象会变成空对象// 5. 会丢失原型链方法三使用第三方库lodashscriptsrchttps://cdn.jsdelivr.net/npm/lodash4/lodash.min.js/scriptscriptconstobj{name:Alice,hobbies:[reading,music]};constdeepCopy_.cloneDeep(obj);/script五、异常处理16. 异常处理机制总结throw抛出异常信息程序也会终止执行throw后面跟的是错误提示信息Error对象配合throw使用能够设置更详细的错误信息总结try...catch用于捕获错误信息将预估可能发生错误的代码写在try代码段中如果try代码段中出现错误后会执行catch代码段并截获到错误信息messagefinally不管是否有错误都会执行// 1. throw 抛出异常functionfn(x,y){if(!x||!y){thrownewError(没有参数传递进来);}returnxy;}// 2. try...catch 捕获异常try{// 可能发生错误的代码constpdocument.querySelector(p);p.style.colorred;}catch(err){// 处理错误console.log(err.message);}finally{// 无论是否出错都会执行的代码alert(弹出对话框);}// 3. debugger 相当于断点调试六、this 指向与处理17. this 指向规则普通函数的 this// 规则谁调用this 指向谁// 1. 全局上下文functionglobalFunc(){console.log(this);// 严格模式undefined非严格模式window}globalFunc();// 2. 对象方法constuser{name:Alice,sayHi(){console.log(this.name);// this 指向实例对象}};user.sayHi();// Alice// 3. 方法赋值给变量constsayHiuser.sayHi;sayHi();// undefinedthis 指向 window 或 undefined// 4. 事件处理函数button.onclickfunction(){console.log(this);// 指向 button 元素};箭头函数的 this// 规则继承外层作用域的 this定义时确定无法改变constobj{name:Alice,// 普通函数方法regularFunc:function(){console.log(this.name);// AliceconstinnerArrow(){console.log(this.name);// Alice继承外层 this};innerArrow();},// 箭头函数方法不推荐arrowFunc:(){console.log(this);// 指向外层作用域的 this通常是 window}};// 不适合使用箭头函数的场景// 1. 对象方法this 指向问题// 2. 构造函数不能作为构造函数// 3. 原型方法this 指向问题// 4. 事件处理函数this 不指向 DOM 元素18. 改变 this 指向call() - 立即执行scriptconstobj{uname:pink}functionfn(x,y){console.log(this)console.log(xy)}// fn()// 1. 调用函数// 2. 改变this指向fn.call(obj,1,2)/scriptapply() - 立即执行数组参数scriptconstobj{uname:pink,age:18}functionfn(x,y){console.log(this)console.log(xy)}// 1. 调用函数// 2. 改变this指向fn.apply(obj,[1,2])// 3. 返回值 本身就是在调用函数所以 返回值就是函数的返回值// 使用场景 求数组最大值// const max Math.max(1, 2, 3)// console.log(max)constarr[1,2,3]constmaxMath.max.apply(Math,arr)constminMath.min.apply(Math,arr)console.log(max,min)// console.log(Math.max(arr))console.log(Math.max(...arr))/scriptbind() - 返回新函数button发送短信/buttonscriptconstobj{uname:pink,age:18}functionfn(){console.log(this)}// 1. bind 不会调用函数// 2. 能改变this指向// 3. 返回值是个函数但这个函数的this是更改过的constfunfn.bind(obj)console.log(fun)fun()// 需求有一个按钮点击里面就禁用两秒钟之后开启constbtndocument.querySelector(button)btn.addEventListener(click,function(){// 禁用按钮this.disabledtruesetTimeout(function(){this.disabledfalse}.bind(this),2000)})/script三者区别总结方法调用方式参数传递返回值应用场景call立即调用逐个传递函数执行结果借用方法、明确参数个数apply立即调用数组传递函数执行结果参数数组、数学计算bind不调用返回新函数可预先传递部分参数新函数永久绑定this事件处理、函数柯里化七、防抖与节流19. 防抖Debounce原理事件触发后等待一段时间再执行如果在这段时间内再次触发则重新计时。// 使用 lodash// _.debounce(func, [wait0], [options])// 手写防抖函数functiondebounce(fn,t){lettimer;returnfunction(){if(timer)clearTimeout(timer);timersetTimeout(function(){fn();},t);}}20. 节流Throttle原理事件触发后立即执行但在指定时间内只执行一次。// 使用 lodash// _.throttle(func, [wait0], [options])// 手写节流函数functionthrottle(fn,t){lettimernull;returnfunction(){if(!timer){timersetTimeout(function(){fn();timernull;},t);}}}21. 防抖与节流的区别与应用场景特性防抖Debounce节流Throttle原理合并多次操作为一次固定时间内只执行一次执行时机最后一次触发后等待一段时间执行固定时间间隔执行重置时机每次触发都重置计时器时间间隔内只执行一次应用场景搜索框输入、窗口调整大小滚动事件、鼠标移动、高频点击22. 相关事件补充视频播放进度保存使用节流实现视频播放进度的定时保存和恢复。// 定时保存进度video.ontimeupdate_.throttle((){localStorage.setItem(currentTime,video.currentTime);},1000);// 恢复进度video.onloadeddata(){video.currentTimelocalStorage.getItem(currentTime)||0;};总结JavaScript 进阶知识涵盖了面向对象编程的核心概念、原型系统、高级函数技巧以及性能优化策略。掌握这些内容对于编写高质量、可维护的 JavaScript 代码至关重要面向对象思想帮助组织复杂代码结构原型与继承是 JavaScript 独特而强大的特性深浅拷贝正确处理对象复制避免意外修改异常处理提升代码健壮性this 机制是理解 JavaScript 执行上下文的关键防抖节流优化高频事件性能