
JavaScript
文章平均质量分 67
白小宇
学识的基础是创造的基础。
展开
-
js小记:EventUtil兼容
EventUtil:var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ element.addEventListener(type,handler,false); //使用DOM2级方法添加事件 }el...原创 2019-03-09 17:37:52 · 299 阅读 · 0 评论 -
深入JavaScript 执行上下文(四):作用域链
深入JavaScript 执行上下文(一):作用域深入JavaScript 执行上下文(二):执行上下文栈深入JavaScript 执行上下文(三):变量对象作用域链当要查找某变量的时候,会先从当前上下文的变量对象中查找,如果没有找到,就会从父级(词法层面上的父级)执行上下文的变量对象中查找,一直找到全局上下文的变量对象,也就是全局对象。这样由多个执行上下文的变量对象构成的链表就...原创 2018-11-10 20:20:38 · 992 阅读 · 0 评论 -
深入JavaScript 执行上下文(二):执行上下文栈
执行上下文栈(环境栈)1、可执行代码这就要说到 JavaScript 的可执行代码的类型有哪些了?其实很简单,就三种,全局代码、函数代码、eval代码。举个例子,当执行到一个函数的时候,就会进行准备工作,这里的“准备工作”,让我们用个更专业一点的说法,就叫做"执行上下文(execution context)"。2、执行上下文栈(环境栈)接下来问题来了,我们写的函数多原创 2018-11-10 19:47:20 · 649 阅读 · 0 评论 -
深入JavaScript 执行上下文(一):作用域
作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限。下面我们来看看作用域的两种解析方式。作用域两种解析方式:静态作用域:js使用动态作用域:java、c++等使用1、静态作用域:JavaScript 采用就是词法作用域(lexical scoping),也就是静态作用域。使用词法环境来管理。 一段代码执行前,先初始化词...原创 2018-11-10 19:23:47 · 532 阅读 · 0 评论 -
js易错小题整理
var a = (function f() { function f() { return 1; } return f(); function f() { return 2; }})();console.log(a); //2函数声明提升,同一作用域下 用 函数声明 创建的同名函数,后面的会覆盖前面的,所以输出为...原创 2018-09-25 13:44:05 · 412 阅读 · 0 评论 -
js对象排序练习
例1:将result属性里的对象按id大小,从小到大排序: var obj = { result:[ {id:1,name:'中国银行'}, {id:3,name:'北京银行'}, {id:2,name:'河北银行'}, {id:10,name:'保定银行'}, {id:7,name:'涞水银行'} ] } ;o...原创 2018-09-18 04:56:02 · 6668 阅读 · 1 评论 -
跨域:postMessage
postMessage API发送数据:otherWindow.postMessage(message, targetOrigin, [transfer]);otherWindow: 窗口的一个引用,比如iframe的contentWindow属性,执行window.open返回的窗口对象,或者是命名过的或数值索引的window.frames.message: 要发送到其他窗口...原创 2018-09-06 17:18:18 · 1324 阅读 · 0 评论 -
JS的深拷贝 与 浅拷贝 实例
一、浅复制//对象浅复制function shadowCopy(obj){ if(typeof obj !== 'object') return ; var newObj; if(obj.constructor === Array){ newObj = []; } else { newObj = {}; newO...原创 2018-09-05 22:50:27 · 1828 阅读 · 0 评论 -
正则表达式练习(js)
///连续3个数字var pattern1 = /\d\d\d/g;console.log(pattern1.test('s23')); // falseconsole.log(pattern1.test('s112s')); // true//连续2个相同的 数字var pattern1 = /(\d)1/g;console.log(pattern1.test('s23...原创 2018-09-11 22:38:08 · 8426 阅读 · 0 评论 -
js小记:test()、search()、match()、replace()、split()、
查找字符串的索引:search()、str.match().index、indexOf()、lastIndexOf()替换字符串:replace()将字符串转换为数组:split()各个函数参数是什么,太基础了就不说了,直接上代码1、match():返回数组, 没匹配到返回nullvar str = 'car,bat,sat,asr';//match()返回数组, 没匹...原创 2018-08-30 15:37:01 · 1449 阅读 · 0 评论 -
深入JavaScript 执行上下文(五):整个过程
执行上下文现在加上this,再把过一遍整过过程。以下面例子为例:var scope = "global scope";function checkscope(){ var scope = "local scope"; function f(){ return scope; }原创 2018-11-10 20:50:46 · 731 阅读 · 0 评论 -
深入JavaScript 执行上下文(三):变量对象
深入JavaScript 执行上下文(一):作用域深入JavaScript 执行上下文(二):执行上下文栈变量对象变量对象是与执行上下文相关的数据作用域,存储了在上下文中定义的变量和函数声明。因为不同执行上下文下的变量对象稍有不同,所以我们来聊聊全局上下文下的变量对象和函数上下文下的变量对象。变量对象 / 活动对象:每个执行环境都有一个变量对象,环境中定义的所有变量和函数都保存在这个...原创 2018-11-12 20:41:25 · 476 阅读 · 0 评论 -
深入JavaScript 从原型到原型链
一、构造函数、原型对象、实例对象的关系function Foo(){} //Foo为构造函数Foo.prototype.name = 'Feidian'; //Foo.prototype即原型对象var f1 = new Foo() //f1 为 实例对象要想了解Foo、Foo.prototype、f1 之间的关系,我们就要理解prototype...原创 2018-12-11 21:09:56 · 613 阅读 · 0 评论 -
深入JavaScript 模拟实现new
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。例1function Person(name, age) { this.name = name; this.age = age;}var child = new Person('sam', 18);new Person() 过程种发生了什么:(1)创建了一个新对象(2)这个新对象 的_...原创 2018-12-21 22:44:16 · 371 阅读 · 0 评论 -
深入JavaScript 模拟实现bind
bindbind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。由此我们可以首先得出 bind 函数的两个特点:返回一个函数可以传入参数例1var foo = { value: 1};function bar() { console.log(this.value...原创 2018-12-21 17:30:09 · 222 阅读 · 0 评论 -
JS构造函数与普通函数的区别
1、直观上构造函数都应该以 一个大写字母开头:function Foo(){...}非构造函数则应该以一个小写字母开头:(本文所说的普通函数就是 非构造函数)function foo(){...}2、本质区别无论是构造函数还是非构造函数,两者并没有实质性的区别;构造函数可以作为普通函数使用,普通函数也可以作为构造函数来用;首字母大小写仅仅是为了在开发中能易于区分他们。...原创 2018-12-14 23:02:32 · 3111 阅读 · 0 评论 -
深入JavaScript 模拟实现call、apply
一、call()call() :在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。1、实际的call()var value = 2;var foo = { value: 1 };function bar(name, age) { console.log(this.value); console.log(name, age);}bar.call(foo...原创 2018-12-14 21:47:29 · 599 阅读 · 0 评论 -
关于 “JavaScript重写原型对象后设置constructor” 的误解
首先我们要知道prototype、constructor及其关系:每个函数都有 prototype属性(即原型对象)原型对象都有 constructor属性(指针):它指向着该原型对象的拥有者。现在看下面例子:function Child() {}Child.prototype = {}; //重写prototypeChild.prototype.constructor = C...原创 2018-12-14 01:05:47 · 1746 阅读 · 4 评论 -
深入JavaScript 继承的各种方式及优缺点
一、原型链继承1、优点可以函数复用function Parent () { this.name = 'kevin';}Parent.prototype.getName = function () { console.log(this.name);}function Child () {}Child.prototype = new Parent();Child.p...原创 2018-12-13 22:22:12 · 695 阅读 · 0 评论 -
深入JavaScript 共享传递
在《JavaScript高级程序设计》第三版,讲到传递参数:ECMAScript中所有函数的参数都是按值传递的。什么是按值传递呢?也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。如果你没有学过C/C++/C#等编程语言,对堆栈以及汇编并不是很了解,那么阅读《一、从小白角度讲》;反之,请看《二、从底层角度讲》一、从小白角度讲这种讲解方式是...原创 2018-11-20 10:28:40 · 1299 阅读 · 4 评论 -
深入JavaScript 闭包
ECMAScript中,闭包指的是:从理论角度:所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此,因为函数中访问全局变量就相当于是在访问自由变量,这个时候使用最外层的作用域。从实践角度:以下函数才算是闭包:即使创建它的上下文已经销毁,它仍然存在(比如,内部函数从父函数中返回)在代码中引用了自由变量上面看不懂不要紧,往下看~一、理...原创 2018-11-18 04:22:04 · 553 阅读 · 0 评论 -
深入JavaScript 赋值后的内存分布
在阅读前,请先读下面这篇链接文章里的《二、从底层角度讲》,它能让你对JS参数传递的具体机理有一定了解。其实两者差别不大。深入JavaScript之参数共享传递现在开始进入正题关键点:运算符=就是创建或修改变量在内存中的指向.初始化变量时为创建,重新赋值即为修改.一、例1var a = {b: 1}; // a = {b: 1}var c = a; /...原创 2018-11-20 16:39:20 · 863 阅读 · 1 评论 -
快速排序算法: js实现
快排是一种常用的排序算法,它的基本步骤如下:选择基准重新排序数列,所有元素比基准值小的摆放在基准前面,所有元素比基准值大的在基准的后面(相同的数可以到任一边)。递归地对两个子序列进行快速排序,直到序列为空或者只有一个元素为止。function quickSort(arr){ if(arr.length <= 1){ return arr; ...原创 2018-08-30 12:14:24 · 2000 阅读 · 1 评论 -
js数组练习:去重、随机排序、N维变1维、求交/并/差集等
1、数组去重//去重function noReapt(arr){ let result = []; arr.forEach((item) => { if(result.indexOf(item) == -1){ result.push(item); } }); return result; ...原创 2018-09-04 13:14:58 · 342 阅读 · 0 评论 -
为什么要用setTimeout模拟setInterval ?
一、简介setTimeout 延迟一段时间执行一次 (Only one);用clearTimeout()终止setTimeout(function(){··· }, n); // n毫秒后执行functionsetInterval 每隔一段时间执行一次 (Many times);用clearInterval()终止setInterval(function(){··· }...原创 2018-09-01 13:34:24 · 8264 阅读 · 3 评论 -
js数组遍历所有元素方法 总结
方法一:for(){} 遍历这是最笨的方法,low到不解释 缺点:蠢!var arr = [1,2,3,"a",true];for(var i=0;i<arr.length;i++){ console.log("第" + i + "次遍历:" + arr[i]);}执行结果: 方法二:forEach 遍历缺点:不能使用 break 语句来跳原创 2018-02-28 01:39:42 · 18342 阅读 · 0 评论 -
js数组去重方法 总结
方法一:双层for循环法思路: (1)先构建一个reArr数组用来存在结果 (2)再for()循环原数组 与 reArr数组(也要加个循环)中的元素进行比较。 (3)比较后如果不相等,则放入reArr数组;反之,不放入。 缺点:很明显,效率太低。Array.prototype.unique = function(){ if(this.length < 1){ret...原创 2018-03-03 17:23:17 · 365 阅读 · 0 评论 -
js数组克隆方法 总结
方法一:for(){}最笨low的方法Array.prototype.clone = function(){ var a = []; for(var i=0;i<this.length;i++){ a.push(this[i]); } return a;};//使用调用var arr = [1,true,{},"a"];v...原创 2018-02-28 02:24:43 · 6024 阅读 · 0 评论 -
js获取当前时间的前几天时间
在C语言等语言,正常获取当前时间的前几天时间,我们往往要考虑”今年是否是润年? 月份是否是2月?”等很多情况的逻辑判断。而在javascript中这些逻辑都可以省去,下面来介绍实现方法。一、首先介绍几个函数 getTime():返回 1970 年 1 月 1 日至今的毫秒数。 setTime():以毫秒设置 Date 对象。 getDate():从 Date 对象返回一个月中的某一天 (...原创 2018-03-01 18:12:56 · 4737 阅读 · 0 评论 -
js读取解析JSON数据
简介1、JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 2、是轻量级的文本数据交换格式。 JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理JSON数据,不须要任何特殊的 API 或工具包。 3、JSON 独立于语言:JSON 虽然使用 JavaScript来描述数据对象,但JSON...原创 2018-02-01 16:06:26 · 11440 阅读 · 0 评论 -
js小记:DOM基本操作 总结
1、通用 - getElementByID() - getElementsByTagName() //得到数组NodeList - getElementsByName() //得到数组NodeList - nodeType - nodeName - nodeValue2、节点关系 - childrenNodes - firstChild -...原创 2018-03-09 14:57:22 · 643 阅读 · 0 评论 -
js实现鼠标拖拽div
直接上代码,简单实用。<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title> <script type="text/javascript" src='./js/jquery-1.8.3.min.js原创 2018-02-28 00:58:43 · 5151 阅读 · 0 评论 -
web程序员表白程序,三行情书
很久之前的作品,用JS和CSS3实现的,今天给大家分享一部分。 若要见完整版,请点击右侧链接下载:程序员浪漫表白“三行情书”一等奖(JS+CSS3) 注:这是一个3D场景,在PC端的话还可以按住鼠标左键并拖动鼠标,来从各个视角观察它。降低作品档次的效果图: 寓意解释:通过JS和CSS3组合实现的 碎片飘零效果。每个碎片都由一句情话组成,无数的情话碎片构成了心型原创 2018-01-21 00:58:12 · 49647 阅读 · 31 评论 -
跨域:JSONP
一、简介JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。原理: 由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的&amp;amp;lt; script&amp;amp;gt; 元素是一个例外。利用 &amp;amp;lt; script&amp;amp;gt;原创 2018-02-09 19:33:28 · 245 阅读 · 0 评论 -
高德地图 动态绘制多个路线轨迹
最近在用高德地图的API,顺便记录下。平时我们只是通过如下代码,给path一串经纬度数组, 静态绘制修改路径,但怎么才能通过接收数据(例如Json数据)来动态绘制 多个路径呢? 这里有两种方法。//设置数据 pathSimplifierIns.setData([{ name: '路线0', path: [ [116.405289, 39.9049原创 2018-02-01 15:51:12 · 46238 阅读 · 5 评论 -
js数组的顺序排序、完全随机打乱排序 总结
一、顺序排序1、按字符编码排序:sort()var testArray=[23,500,1000,300,34,-2]; testArray.sort(); alert(testArray); //-2,1000,23,300,34,5002、将数组元素倒序排:reverse()var testArray=[-2,53,34,300,500,1000]; testAr...原创 2018-03-01 20:01:36 · 24015 阅读 · 1 评论 -
js数组合并方法 总结
一、concat()concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。该方法会产生一个新的数组。//函数function concatArr(arr1, arr2){ var arr = arr1.concat(arr2); return arr;}//测试arr1 = [1,2];arr2 = ["aa","as"];console...原创 2018-03-03 17:44:28 · 3227 阅读 · 0 评论 -
Ajax基础:XHR、XHR2
Ajax用一句话来说就是无须刷新页面即可从服务器取得数据。注意,虽然Ajax翻译过来叫异步JavaScript与XML,但是获得的数据不一定是XML数据,现在服务器端返回的都是JSON格式的文件。一、Ajax请求过程完整的Ajax请求过程: ① 创建XHR实例 ( XMLHttpRequest 或 ActiveXObject ) ② 发出HTTP请求(send()、open() )...原创 2018-08-21 16:47:08 · 2711 阅读 · 1 评论 -
js小记:伪数组
一、简介:伪数组:是对象,且 obj instanceof Array === false必须有length属性,但不能调用push()、indexOf()之类的 数组方法如果这个对象的length不为0,那么必须要按照下标存储数据为了方便大家理解,举几个例子:// 不是伪数组var obj = {};var obj2 = { length: 3 };var obj...原创 2018-08-24 15:12:15 · 464 阅读 · 0 评论 -
前端模块化:AMD, CMD, CommonJS, ES6 Module
模块化就是将一个大的功能拆分为多个块,每一个块都是独立的,你不需要去担心污染全局变量,命名冲突什么的,它们只是向外暴露特定的变量和函数。模块化的好处:①解决命名冲突 ②依赖管理 ③代码更加可读 ④提高复用性目前流行的js模块化规范有AMD、CMD、CommonJS以及ES6的模块系统。本文重点掌握AMD与CMD的区别、CommonJS与ES6 Module的区别一、AMDA...原创 2018-08-27 13:01:09 · 610 阅读 · 1 评论