首页 文章 精选 留言 我的

精选列表

搜索[JavaScript库],共10000篇文章
优秀的个人博客,低调大师

4.2 Javascript之执行环境和作用域

执行环境 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。 //书中说我们自己编写的代码无法访问这个对象 //下面这个最外层的执行环境window对象是可以访问的呢??? web浏览器中,最外层的执行环境是window对象,因此所有的全局变量和函数都是作为window的属性或者方法创建的 作用域链 作用域链的用途是保证执行环境对有权限访问的变量和函数的有序访问 作用域链的前端都是当前执行代码所在环境的变量对象 如果这个环境是函数,则将其活动对象作为变量对象,活动对象在一开始的时候只包含了arguments对象,作用域链中的下一个变量对象来自于包含(外部)环境,再下一个变量对象则来自于下一个包含(外部)对象。。。一直延伸到全局执行环境(全局执行环境的变量对象始终是作用域链中的最后一个对象) var globalColor = "globalColor"; function globalFunc(){ //这里能访问函数里的变量和方法,但是不能访问innerFunc函数里的变量 var globalColor = "globalFuncColor"; function innerFunc(){ //这里可以访问此函数里的所有变量和方法,还有外部的所有变量和方法 var innerFuncColor = "innerFuncColor"; var globalColor = "globalColor-innerFuncColor"; innerFuncColor = globalColor; console.log(innerFuncColor) } console.log(globalColor) innerFunc(); } globalFunc(); console.log(globalColor) //globalFuncColor //globalColor-innerFuncColor //globalColor //优先访问当前执行代码环境的变量对象 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 延长作用域链 执行环境的类型:全局和局部(函数) function buildUrl(){ var href = "test.com"; with(location){ var res = href + href; } return res; } buildUrl(); //width里的href代表的是location.href,所以结果里并没有"test.com" 1 2 3 4 5 6 7 8 9 try{ console.log(myTest) }catch(ex){ console.dir(ex.message); }; // 对于捕获来说会创建一个新的变量对象,包含的是被抛出来的错误对象的声明 // 意思应该是新创建的执行环境下可以访问到抛出的错误对象 1 2 3 4 5 6 7 无块级作用域 for(var i = 0; i < 10; i++){ console.log(i); } console.log("now i is: " + i); //now i is 10 //变量i定义在for循环里面,循环结束后,还是可以访问到变量i,并没有销毁 1 2 3 4 5 6 变量查找 var color = "red"; function getColor(){ return color; } console.log(getColor()) //调用getColor函数时,返回color变量的值,首先会在getColor函数的作用域内查找color变量 //没有找到变量,就会沿着作用域链继续向上层的作用域查找,找到就返回变量的值 //否则会一直向上查找至window全局作用域,如果全局作用域下查找不到,则就表明变量未声明 //优先返回局部作用域下的同名变量 原文发布时间:2018年03月15日 本文来源CSDN博客如需转载请紧急联系作者

优秀的个人博客,低调大师

JavaScript DOM学习笔记--创建追加元素

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态添加城市</title> <script> window.onload = function(){ document.getElementById("btn").onclick = function(){ //1.获取ul元素节点 var ulEle = document.getElementById("ul1"); //2.创建城市文本节点 var textNode = document.createTextNode("深圳");//深圳 //3.创建li元素节点 var liEle = document.createElement("li");//<li></li> //4.将城市文本节点添加到li元素节点中去 liEle.appendChild(textNode);//<li>深圳</li> //5.将li添加到ul中去 ulEle.appendChild(liEle); } } </script> </head> <body> <input type="button" value="添加新城市" id="btn"/> <ul id="ul1"> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </body> </html>

优秀的个人博客,低调大师

javascript中对数组对象的深度拷贝

在前端开发的某些逻辑中,经常需要对现有的js对象创建副本,避免污染原始数据的情况。 如果是简单的一维数组对象,可以使用两个原生方法: 1、splice var arr1 = ['a', 'b', 'c']; var arr2 = arr1.splice(0); console.info(arr1); arr2[1] = 'x'; console.info(arr1); 2、concat var arr1 = ['a', 'b', 'c']; var arr2 = [].concat(arr1); console.info(arr1); arr2[1] = 'x'; console.info(arr1); 那如果是多层级的数组对象,再用上面的两个方法就有问题了 虽然最上层会创建副本,但每层下面的数据还是会引用原来的对象 对于这种情况,可以利用jquery的extend方法进行深度拷贝: 3、$.extend var arr1 = [ { 'id': 1, 'name': 'a' }, { 'id': 2, 'name': 'b' }, { 'id': 3, 'name': 'c' } ] var arr2 = $.extend(true, {}, arr1); console.info(arr1); arr2[1].name = 'x'; console.info(arr1); 另外,$.extend也能对任何js对象创建深度拷贝,需要注意的是第一个参数要传入true,否则只是拷贝第一层属性 其实在实际开发中,$.extend还可以做的更多 宠辱不惊,看庭前花开花落;去留无意,望天上云卷云舒

优秀的个人博客,低调大师

第179天:javascript中replace使用总结

ECMAScript提供了replace()方法。这个方法接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串,第二个参数可以是一个字符串或者一个函数。现在我们来详细讲解可能出现的几种情况。 1. 两个参数都为字符串的情况 1 var text = 'cat, bat, sat, fat'; 2 // 在字符串中找到at,并将at替换为ond,只替换一次 3 var result = text.replace('at', 'ond'); 4 // "cond, bat, sat, fat" 5 console.log(result); 2. 第一个参数为RegExp对象,第二个参数为字符串 我们可以发现上面这种情况只替换了第一个at,如果想要替换全部at,就必须使用RegExp对象。 1 var text = 'cat, bat, sat, fat'; 2 // 使用/at/g 在全局中匹配at,并用ond进行替换 3 var result = text.replace(/at/g, 'ond'); 4 // cond, bond, sond, fond 5 console.log(result); 3. 考虑RegExp对象中捕获组的情况。 RegExp具有9个用于存储捕获组的属性。$1, $2...$9,分别用于存储第一到九个匹配的捕获组。我们可以访问这些属性,来获取存储的值。 1 var text = 'cat, bat, sat, fat'; 2 // 使用/(.at)/g 括号为捕获组,此时只有一个,因此所匹配的值存放在$1中 3 var result = text.replace(/(.at)/g, '$($1)'); 4 // $(cat), $(bat), $(sat), $(fat) 5 console.log(result); 4. 第二个参数为函数的情况,RegExp对象中不存在捕获组的情况。 1 var text = 'cat, bat, sat, fat'; 2 // 使用/at/g 匹配字符串中所有的at,并将其替换为ond, 3 // 函数的参数分别为:当前匹配的字符,当前匹配字符的位置,原始字符串 4 var result = text.replace(/at/g, function(match, pos, originalText) { 5 console.log(match + ' ' + pos); 6 return 'ond' 7 }); 8 console.log(result); 9 // 输出 10 /* 11 at 1 dd.html:12:9 12 at 6 dd.html:12:9 13 at 11 dd.html:12:9 14 at 16 dd.html:12:9 15 cond, bond, sond, fond dd.html:16:5 16 */ 5. 第二个参数为函数的情况,RegExp对象中存在捕获组的情况。 1 var text = 'cat, bat, sat, fat'; 2 // 使用/(.at)/g 匹配字符串中所有的at,并将其替换为ond, 3 // 当正则表达式中存在捕获组时,函数的参数一次为:模式匹配项,第一个捕获组的匹配项, 4 // 第二个捕获组的匹配项...匹配项在字符串中的位置,原始字符串 5 var result = text.replace(/.(at)/g, function() { 6 console.log(arguments[0] + ' ' + arguments[1] + ' ' + arguments[2]); 7 return 'ond' 8 }); 9 console.log(result); 10 // 输出 11 /* 12 cat at 1 13 bat at 6 14 sat at 11 15 fat at 16 16 cond, bond, sond, fond 17 */ 以上为replace方法的所有可以使用的情况,下面我们使用replace和正则表达式共同实现字符串trim方法。 1 (function(myFrame) { 2 myFrame.trim = function(str) { 3 // ' hello world ' 4 return str.replace(/(^\s*)|(\s*$)/g, ''); 5 }; 6 window.myFrame = myFrame; 7 })(window.myFrame || {}); 8 // 测试 9 var str = ' hello world ' 10 console.log(str.length); // 15 11 console.log(myFrame.trim(str).length); // 11

优秀的个人博客,低调大师

第149天:javascript中this的指向详解

js中的this指向十分重要,了解js中this指向是每一个学习js的人必学的知识点,今天没事,正好总结了js中this的常见用法,喜欢的可以看看: 1、全局作用域或者普通函数中this指向全局对象window。 1 //直接打印 2 console.log(this) //window 3 4 //function声明函数 5 function bar () {console.log(this)} 6 bar() //window 7 8 //function声明函数赋给变量 9 var bar = function () {console.log(this)} 10 bar() //window 11 12 //自执行函数 13 (function () {console.log(this)})(); //window 2、方法调用中谁调用this指向谁 1 {console.log(this)} 2 } 3 person.run() // person 4 5 //事件绑定 6 var btn = document.querySelector("button") 7 btn.onclick = function () { 8 console.log(this) // btn 9 } 10 //事件监听 11 var btn = document.querySelector("button") 12 btn.addEventListener('click', function () { 13 console.log(this) //btn 14 }) 15 16 //jquery的ajax 17 $.ajax({ 18 self: this, 19 type:"get", 20 url: url, 21 async:true, 22 success: function (res) { 23 console.log(this) // this指向传入$.ajxa()中的对象 24 console.log(self) // window 25 } 26 }); 27 //这里说明以下,将代码简写为$.ajax(obj) ,this指向obj,在obj中this指向window,因为在在success方法中,独享obj调用自己,所以this指向obj 3、在构造函数或者构造函数原型对象中this指向构造函数的实例 1 //不使用new指向window 2 function Person (name) { 3 console.log(this) // window 4 this.name = name; 5 } 6 Person('inwe') 7 //使用new 8 function Person (name) { 9 this.name = name 10 console.log(this) //people 11 self = this 12 } 13 var people = new Person('iwen') 14 console.log(self === people) //true 15 //这里new改变了this指向,将this由window指向Person的实例对象people

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤,还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色。

腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题,腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构,目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring

Spring框架(Spring Framework)是由Rod Johnson于2002年提出的开源Java企业级应用框架,旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念,提供核心容器、应用上下文、数据访问集成等模块,支持整合Hibernate、Struts等第三方框架,其适用范围不仅限于服务器端开发,绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux

Rocky Linux(中文名:洛基)是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版,作为CentOS稳定版停止维护后与RHEL(Red Hat Enterprise Linux)完全兼容的开源替代方案,由社区拥有并管理,支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性,采用模块化包装和SELinux安全架构,默认包含GNOME桌面环境及XFS文件系统,支持十年生命周期更新。

用户登录
用户注册