JavaScript 学习提升

javascript 技能提升

理解闭包

闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
复制代码
    1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量使用闭包有一个优点,也是它的缺点,就是可以把局部变量驻留在内存中,可以避免使用全局变量。全局变量在每个模块都可调用,这势必将是灾难性的。所以推荐使用私有的,封装的局部变量。一般函数执行完毕后,局部活动对象就被销毁,,内存中仅仅保存全局作用域。但闭包的情况不同!嵌套函数的闭包:function aaa() {var a = 1;return function(){alert(a++)};}var fun = aaa();fun();// 1 执行后 a++,,然后a还在~fun();// 2fun = null;//a被回收!!闭包会使变量始终保存在内存中,如果不当使用会增大内存消耗。
复制代码

js中方法的一些高级运用

1、重复定时器

setTimeout(function() {// 处理setTimeout(arguments.callee, 1000);
}, 1000)
复制代码

2、数组分块处理

function chunk(array, process, context) {setTimeout(function() {var item = array.shift();process.call(context, item);if (array.length > 0) {setTimeout(arguments.callee, 1000);}}, 1000);
}var data = [12, 123, 234, 345, 456, 567];
function printValue(item) {console.log(item);
}
chunk(data, printValue);
复制代码

一、js中的私有变量和特权方法

在JS的function中,有个私有变量的概念。比如下面的代码中,函数中有私有变量privateName和私有方法privateFunc,函数里面的变量和方法不能在函数外部被访问。

 function Name(){var privateName = "Petter"; //私有变量function privateFunc(){console.log("这是个私有函数");}}复制代码

我们可以通过在函数里创建公有方法来访问本来不可以访问的私有变量和私有方法。我们把这个公有方法也叫特权方法。 创建特权方法的方式有两种。

第一种在构造函数中定义特权方法:

 function Name(){var privateName = "Petter"; //私有变量var i = 1;function privateFunc(){return "这是个私有函数"+(i++);}this.getPrivateInfo = function(){privateName = "Alia";return privateFunc();}}  var f = new Name();var f2 = new Name();console.log(f.getPrivateInfo())console.log(f2.getPrivateInfo())//这是个私有函数// return a1,a2;时返回值是最后一个"a2"
复制代码

第二种使用静态私有变量

    (function(){var privateName ="Petter";var i =1;function privateFunc(){return "这是个私有函数返回值"+(i++);}Ojects = function(){}Ojects.prototype.getPrivateInfo = function(){privateName = "Alia";return privateFunc();}})();var s01 = new Ojects();var s02 = new Ojects();console.log(s01.getPrivateInfo());console.log(s02.getPrivateInfo());
复制代码

二、Modlule 模式插件开发

Module -- 模块,模块化开发,是在编程中十分通用的模式。

最原始的编写方法

    <body><div id="dom1">红色</div><div id="dom2">黄色</div></body><script type="text/javascript">var colorSet = function(objId){     var _getDom = function(Id){return document.getElementById(Id);}var _aimObj = _getDom(objId);var _setColor = function(str){_aimObj.style.backgroundColor = str;}return{set:_setColor}}var color1 = new colorSet('dom1');color1.set('red');var color2 = new colorSet('dom2');color2.set('yellow');</script>
复制代码

揭示模块模式

    <body><div id="dom1">红色</div><div id="dom2">黄色</div></body><script type="text/javascript">var colorSet = (function(){     var _getDom = function(Id){return document.getElementById(Id);}var _setColor = function(Id,str){_getDom(Id).style.backgroundColor = str;}return{getDom:_getDom,set:_setColor}})())</script>
复制代码

自己常用面向对象写法

    //自定义类function plugin(){}//添加参数plugin.prototype.str = "default param";//写入方法plugin.prototype.funcs = function(str = this.str){console.log(str);}//创建使用的对象var my = new plugin();//使用方法p.funcs("My funcs use now !!");p.funcs();复制代码

Jquery 插件对象级写法

;(function($){//plugin 方法$.fn.plugin = function (options) {var defaults = {//定义参数}//options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptionsvar endOptions = $.extend(defaults,options);this.each(function(){<!--实现功能代码--><!--变量存储--><!--var _this = $(this);-->})}
})(jQuery)<!--使用-->
$('#tab').plugin({<!--tabType: 'mouseover'--><!--参数状态属性-->
});
复制代码

二、js的面向对象编程(OOP)

对象下面的变量叫做属性,对象下的函数叫做对象的方法
复制代码

1、创建一个对象

//单个对象var obj = new Object();obj.name = "陈";obj.backName = function(){console.log( this.name ); //this 在这里指向的是obj 这个对象}obj.showName();//多个对象:封装函数的方法创建function createObject( name ){var obj = new Object();obj.name = "陈";obj.backName = function(){console.log( this.name ); //this 在这里指向的是obj 这个对象}return obj;}var FirstObj = createObject( '陈' );var SecondObj = createObject( '张' );//单个对象:构造函数(给一个对象添加方法)function CreatePerson(name){this.name = name;this.showName = function(){alert( this.name );}}var p1 = new CreatePerson( '小明' );//当new去调用一个函数时,函数中的this就是创建出来的对象而函数中的返回值就是thisp1.showName();var p2 = new CreatePerson( '小强' );p2.showName();//原型模式(prototype):给一类对象添加方法var arr = [1,2,3,4,5];var arr2 = [2,2,2,2,2];// Object,ArrayArray.prototype.sum = function(){//原型prototype : 要写在构造函数的下面var result = 0;for(var i=0;i<this.length;i++){result += this[i];}return result;};alert( arr.sum() );  alert( arr2.sum() );  
复制代码

转载于:https://juejin.im/post/5bc96bcfe51d4527ed009051

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281850.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Uranium UI Kit

Uranium UI Kit控件名&#xff1a;Uranium UI Ki作者&#xff1a;enisn原文链接&#xff1a; https://github.com/enisn/UraniumUI项目使用 Apache-2.0 开源许可协议。Uranium 是用于 .NET MAUI 的免费和开源 UI 工具包。它提供了一组控件和实用程序来构建现代应用程序。它建…

数据库监控框架 oneproxy-monitor 开源了

OneProxy-Monitor 是数据库监控的框架&#xff0c;通过这个框架可以快速的开发出一款数据库的监控软件。目前已经在这个框架下面开发出来了sql server的监控软件oneproxy-for-sqlserver&#xff0c; postgresql的监控软件oneproxy-for-postgresql。并且还可以作为协议成的调试软…

java nio epoll_Java NIO 选择器(Selector)的内部实现(poll epoll)

http://blog.csdn.net/hsuxu/article/details/9876983之前强调这么多关于linux内核的poll及epoll&#xff0c;无非是想让大家先有个认识&#xff1a;Java NIO中的选择器依赖操作系统内核的这些系统调用&#xff0c;我们这里只讲解与linux内核相关的NIO实现&#xff0c;当然&…

Next.js 7发布,构建速度提升40%

Next.js团队发布了其开源React框架的7版本。该版本的Next.js主要是改善整体的开发体验&#xff0c;包括启动速度提升57%、开发时的构建速度提升40%、改进错误报告和WebAssembly支持。\\Next.js是一个React框架&#xff0c;它的主要目标是在生产环境中提供出色的性能和良好的开发…

《Java多线程编程核心技术》读后感(十五)

线程的状态 线程对象在不同的运行时期有不同的状态&#xff0c;状态信息就存在与State枚举类中。 验证New,Runnable&#xff0c;Terminated new:线程实例化后还从未执行start()方法时的状态 runnable&#xff1a;线程进入运行的状态 terminated&#xff1a;线程被销毁时的状态 …

队列(queue)

队列(queue)和栈一样支持push和pop两个操作。但与栈不同的是,pop两个操作。但与栈的不同的是&#xff0c;pop完成的不是取出最顶端的元素&#xff0c;而是最底端的元素。也就是说最初放入的元素能够最先被取出&#xff08;这种行为被叫做FIFO:First In First Out&#xff0c;即…

一题多解,ASP.NET Core应用启动初始化的N种方案[上篇]

ASP.NET Core应用本质上就是一个由中间件构成的管道&#xff0c;承载系统将应用承载于一个托管进程中运行起来&#xff0c;其核心任务就是将这个管道构建起来。在ASP.NET Core的发展历史上先后出现了三种应用承载的编程方式&#xff0c;而且后一种编程模式都提供了针对之前编程…

java程序猿面试问缺点怎么回答_JAVA程序员面试32问,你能回答多少题

第一&#xff0c;谈谈final&#xff0c; finally&#xff0c; finalize的区别。第二&#xff0c;Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类&#xff0c;是否可以implements(实现)interface(接口)&#xff1f;第三&#xff0c;Static Nested Class 和 In…

ExecutorService——shutdown方法和awaitTermination方法

ExecutorService的关闭shutdown和awaitTermination为接口ExecutorService定义的两个方法&#xff0c;一般情况配合使用来关闭线程池。 方法简介shutdown方法&#xff1a;平滑的关闭ExecutorService&#xff0c;当此方法被调用时&#xff0c;ExecutorService停止接收新的任务并且…

WPF 简单模仿 VSCode 界面布局

WPF 简单模仿 VSCode 界面布局本文经原作者授权以原创方式二次分享&#xff0c;欢迎转载、分享。WPF 简单模仿 VSCode 界面布局作者&#xff1a;弈虎-吕女士会翻墙原文链接&#xff1a; https://github.com/Chen-Lin-Zhao-Wei/WPFLikeVSCode分享一篇群友这几天自己写的 WPF 简…

compare()方法+使用compare方法

compare()方法 compare(lob1,lob2,amount,offset_1,offset_2) 1用于比较2个lob存储的数据&#xff0c;比较的方式是从指定偏移量开始&#xff0c;对指定数量的字符或者字节进行比较。 2如果比较内容相同&#xff0c;返回0&#xff0c;否则返回-1或1. 3如果参数设置有误或不合…

linux 下 mysql默认表_linux环境下mysql默认是区分表名大小写的

在linux环境下&#xff0c;mysql默认表明是区分大小写的&#xff0c;我们可以查看全局变量发现:mysql> show variables like lower%;-------------------------------| Variable_name | Value |-------------------------------| lower_case_file_system | OFF || lower_cas…

dot-- 资源汇总

http://graphviz.org/doc/info/attrs.htmlhttp://graphs.grevian.org/http://graphs.grevian.org/examplehttp://www.linuxdevcenter.com/pub/a/linux/2004/05/06/graphviz_dot.html转载于:https://www.cnblogs.com/itzxy/p/7860276.html

两将军问题和TCP三次握手

两将军问题&#xff0c;又被称为两将军悖论、两军问题&#xff0c; 是一个经典的计算机思想实验。首先&#xff0c; 为避免混淆&#xff0c;我们需要认识到两将军问题虽然与拜占庭将军问题相关&#xff0c;但两者不是一个东西。拜占庭将军问题是一个更通用的两将军问题版本&…

微信小程序开发系列五:微信小程序中如何响应用户输入事件

2019独角兽企业重金招聘Python工程师标准>>> 微信小程序开发系列教程 微信小程序开发系列一&#xff1a;微信小程序的申请和开发环境的搭建 微信小程序开发系列二&#xff1a;微信小程序的视图设计 微信小程序开发系列三&#xff1a;微信小程序的调试方法 微信小程序…

理解Object.defineProperty的作用

Object.defineProperty 是vue中双向绑定的基础。vue是通过数据劫持的方式来做数据绑定的&#xff0c;最核心的方法是通过 Object.defineProperty()方法来实现对属性的劫持&#xff0c;达到能监听到数据的变动。要实现数据的双向绑定&#xff0c; 当使用存取器描述属性的特性的时…

java.lang包有哪些类_Java中Lang包的工具类有哪些

Java中Lang包的工具类有哪些发布时间&#xff1a;2020-12-08 16:15:36来源&#xff1a;亿速云阅读&#xff1a;76作者&#xff1a;Leah今天就跟大家聊聊有关Java中Lang包的工具类有哪些&#xff0c;可能很多人都不太了解&#xff0c;为了让大家更加了解&#xff0c;小编给大家总…

直播修仙:使用.NET 的 WebView2 如何获取请求的响应内容,以微信直播的互动直播为例...

背景近几年直播行业快速发展&#xff0c;门槛也越来越低&#xff0c;越来越的人涌入直播大军。不得不说&#xff0c;直播不仅带来了更多的娱乐消遣&#xff0c;还提供了一个新型的就业方式。说起直播的类型&#xff0c;有一个非常小众的娱乐直播&#xff0c;没有主播&#xff0…

2017年我的阅读书单

2017年我正在看或者已经看完的书单&#xff0c;基本上都是纸质书&#xff0c;主要是长时间阅读也不伤眼。由于现阶段的主要工作是 DevOps 和运维管理&#xff0c;所以涉及运维方面的书我没有再细看&#xff0c;如果是工作用到的话会稍为翻阅下。主要还是看运维开发和 Python 及…

web第6次作业position

position 属性指定了元素的定位类型。 position 属性的五个值&#xff1a; static &#xff08;静态定位&#xff09; HTML元素的默认值&#xff0c;即没有定位&#xff0c;元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left, right影响。 div.stati…