js原理
关注
分享
扫一扫
ForMyWebFrontSide
做过后端，管理过项目，管过人。在前端技术迅猛发展的这几年，猛然的发现前端工作才是自己的心头爱。目前是一个热爱并志向能从头设计、并实现优秀项目的，偏设计、视觉系方向的前端人或者独立项目者，也喜欢了解性能、优化方面、安全、部署、测试等一条龙的东西。平时愿意倒腾同一玩意的不同实现，有一定程度的代码洁癖，喜欢高质量，结构优秀的代码。一定程度的喜欢研究原理性的东西。对项目能大包大揽，但更喜欢能各尽所能，发挥最大优势，提高工作效率的分工合作。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
预编译 作用域例子
看下面的代码：v_name = "global"; function fn() { alert(v_name ); var v_name = "local"; alert(v_name ); }fn();执行结果：第一个弹框为：undefined，第二个弹框为：local。原因是： 按代码处理原则（两个阶段）。 第一个阶段：变量声明，函数声明，正常格式的参数创建，原创 2016-07-22 14:27:28 · 525 阅读 · 0 评论 -
前端js文件合并三种方式
原文：http://www.cnblogs.com/lovesong/p/5068025.html最近在思考前端js文件该如何合并，当然不包括不能合并文件，而是我们能合并的文件，想了想应该也只有三种方式。三个方式如下：一个大文件，所有js合并成一个大文件，所有页面都引用它。各个页面大文件，各自页面合并生成自己所需js的大文件。合并多个共用大文件，根据实践情况合并出多个共用js文件，每个页面引用转载 2016-08-03 18:28:50 · 9342 阅读 · 0 评论 -
js中避免函数名和变量名跟别人冲突
方式1：var mainNS={};mainNS.Person = { id: name: $d:$('#s1'); fn1: fn2:function(){ $d.bind('click',function(){ ... }); }}//调用mainNS.Person.fn2();方式2：(fun原创 2016-08-04 18:15:52 · 5534 阅读 · 0 评论 -
js中避免函数名和变量名跟别人冲突（1）
方法1：(function(){ var m = 0; var n = 1; function getName(){ return m; } function setName(name){ m=name;原创 2016-08-04 14:05:14 · 3178 阅读 · 0 评论 -
函数声明和函数表达式的（区别）应用场景注意事项
函数声明在条件语句内虽然可以用，但是没有被标准化，也就是说不同的环境可能有不同的执行结果，所以这样情况下，最好使用函数表达式：01// 千万别这样做！02// 因为有的浏览器会返回first的这个function，而有的浏览器返回的却是第二个0304if (true) {05 function foo() {06 return 'first';07 }08}09转载 2016-07-22 10:03:05 · 892 阅读 · 0 评论 -
javascript预编译原理和例子
先看代码：<script> alert( typeof vv); var vv= "variable" ; function vv() { alert( "function vv" ); } alert(vv); </script> 执行结果是”function”和”variable”。 照理说，一开原创 2016-07-22 11:23:26 · 800 阅读 · 0 评论 -
javascript高级开发资料收集
1.收集的一个深入理解JavaScript系列文章： http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html2.深入理解原型和闭包 http://www.cnblogs.com/wangfupeng1988/tag/%E5%8E%9F%E5%9E%8B/原创 2016-07-12 15:28:06 · 358 阅读 · 0 评论 -
原型和闭包，笔记摘录
1.一切（引用类型）都是对象，对象是属性的集合原创 2016-07-08 11:03:30 · 474 阅读 · 0 评论 -
闭包的实际应用（更新中。。。）
1、匿名自执行函数 我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处， 比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。 除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护， 比如UI的初始化，那转载 2016-07-13 19:45:17 · 2589 阅读 · 0 评论 -
jQuery源码学习之 noConflict
jquery源码截取noConflict: function( deep ) { if ( window.$ === jQuery ) { console.log('in1'); console.log(_$); window.$ = _$; }原创 2016-08-08 17:19:06 · 428 阅读 · 0 评论 -
javascript图片懒加载与预加载的分析
http://www.cnblogs.com/Leo_wl/p/3526254.html懒加载与预加载的基本概念。懒加载也叫延迟加载：前一篇文章有介绍：JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增转载 2016-09-13 17:48:08 · 885 阅读 · 0 评论 -
JavaScript单线程和异步机制
转自：http://www.cnblogs.com/sxz2008/p/6513619.html总括： Javascript 本身是单线程的，并没有异步的特性。由于 Javascript 的运用场景是浏览器，浏览器本身是典型的 GUI 工作线程，GUI 工作线程在绝大多数系统中都实现为事件处理，避免阻塞交互，因此产生了 Javascript 异步基因。此后种种都源于此。随着对JavaScript学转载 2017-08-09 18:23:40 · 557 阅读 · 0 评论 -
javascript中的浅拷贝和深拷贝例子
参考： http://blog.csdn.net/yisuowushinian/article/details/455443431.js对象浅拷贝简单的赋值就是浅拷贝。因为对象和数组在赋值的时候都是引用传递。赋值的时候只是传递一个指针。看下面的实例代码：var a = [1,2,3]; var b =a ; var test = {name:’xiaohong’, age:15}; var转载 2016-07-26 16:36:07 · 513 阅读 · 0 评论 -
深拷贝、浅拷贝、对象引用概念
http://bbs.miaov.com/forum.php?mod=viewthread&tid=5760&highlight=%E5%AF%B9%E8%B1%A1%E5%BC%95%E7%94%A82. http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385 13,14集原创 2016-07-27 00:12:31 · 660 阅读 · 0 评论 -
闭包解决for循环 的代码示例，解释为什么for循环后，打印的i值不是它自己当时的取值
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><style> li{ cursor:pointer; }</style><ul id="ul1"> <li>sdfsd</li> <li>ffff原创 2016-07-12 17:24:15 · 1055 阅读 · 0 评论 -
setTimeout，异步，原理
总的来说： 1. 先解释一个误区：setTimeout或者setInterval是间隔某个时间立即执行，真是这样的么？错！实际上时间参数的具体意思是：在参数指定的时间后将待执行方法放到javascript引擎的执行队列中， 如果队列中没有其他方法等待，才会立即执行setTimeout指定的方法，此时才会有立即执行的假象。 2. setTimeout(function(){XXXX},0)，原创 2017-08-09 16:51:30 · 1037 阅读 · 0 评论 -
setTimeout系列（1）----弄清setTimeout中this的指向问题及解决方案
示例1：function foo(){ setTimeout(function(){ console.log(this); },100);}var obj ={a:1};foo.call(obj);示例2：function foo(){ setTimeout(()=&amp;amp;amp;amp;amp;amp;amp;gt;{ console.log(this);原创 2017-09-25 12:13:38 · 6177 阅读 · 2 评论 -
javascript中如何判断一个属性是实例对象属性，还是原型对象属性
在写vue插件的时候，遇到一个问题：一、 在main.js中定义let obj = { install: function (Vue, options) { // 把方法定义在Vue原型对象上。 Vue.prototype.$myPlugin = { save(){}; get(){}; // console.log(Vue); ...原创 2018-04-19 18:17:08 · 3365 阅读 · 0 评论 -
拷贝继承（call+拷贝继承）
属性和方法分开继承： 1、属性的继承：调用父类的构造函数.call。 2、方法的继承：for in，拷贝继承（jquery也是采用拷贝继承extend）;function Person(name,sex){ //父类 this.name = name; this.sex = sex;}Person.prototype.showName = function(){原创 2016-07-30 16:15:03 · 583 阅读 · 0 评论 -
原型继承
var a = { name:'ShuKe'};var b = cloneObj(a);b.name = 'BeiTa';alert(b.name); //ShuKealert(a.name); //BeiTafunction cloneObj(obj){ var f = function(){}; f.prototype = obj; re原创 2016-07-30 15:24:27 · 303 阅读 · 0 评论 -
var
单var形式 优势：在函数顶部使用单var语句是比较有用的一种形式，其好处在于：提供了一个单一的地方去寻找功能所需要的所有局部变量 防止变量在定义之前使用的逻辑错误 帮助你记住声明的全局变量，因此较少了全局变量//zxx:此处我自己是有点晕乎的… 少代码（类型啊传值啊单线完成） 单var形式长得就像下面这个样子：function func() { var a = 1, b转载 2016-07-22 15:39:40 · 384 阅读 · 0 评论 -
全局变量的产生
由于JavaScript的两个特征，不自觉地创建出全局变量是出乎意料的容易。首先，你可以甚至不需要声明就可以使用变量；第二，JavaScript有隐含的全局概念，意味着你不声明的任何变量都会成为一个全局对象属性。参考下面的代码：function sum(x, y) { // 不推荐写法: 隐式全局变量 result = x + y; return result;}此段代码中的re转载 2016-07-22 17:14:27 · 368 阅读 · 0 评论 -
javascript 函数前面有加号，叹号的意思
1. !function(){}();2. +function(){}(); 等等...这都是自执行函数表达式的写法，相当于(function(){}()); //推荐使用这个或者(function(){})(); 前面的+，！还可以换成其它一元操作符，如：-，~。甚至可以写成：true && function (){}();0 , function(){}原创 2016-07-12 15:08:17 · 2845 阅读 · 0 评论 -
jquery 插件编写例子5个
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div> <a href="http://www.cnblog.com">cnblog</a> <a href="http://www.zhihu.com">zhihu</a>原创 2016-07-23 18:55:26 · 640 阅读 · 0 评论 -
jQuery.extend 函数详解
JQuery的extend扩展方法： Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。 一、Jquery的扩展方法原型是: extend(dest,src1,src2,src3…); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，转载 2016-07-23 19:09:13 · 332 阅读 · 0 评论 -
（function($){….}）（jQuery）
（function($){….}）（jQuery） 初次看到这种写法时，一头雾水，不知所云。在网上查找了一些资料之后才有点明白。我们先看第一个括号里边的内容：function()….，这不就是一个匿名的函数吗？但是它的形参比较奇怪，是){….}，这不就是一个匿名的函数吗？但是它的形参比较奇怪，是,这里主要是为了不与其它的库冲突。这样我们就比较容易理解第一个括号内的内容就是定义了一个匿名函数，我们在转载 2016-07-23 20:21:00 · 342 阅读 · 0 评论 -
不同的函数定义方式,new出不同的结果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body><!--不同的函数定义方式,new出不同的结果--><script> function person() { this.name = 'd1';原创 2016-07-13 19:47:38 · 390 阅读 · 0 评论 -
javascript原理系列— new的原理
通过new创建对象经历4个步骤1、创建一个新对象；[var o = new Object();]2、将构造函数的作用域赋给新对象（因此this指向了这个新对象）；[Person.apply(o)] [Person原来的this指向的是window]3、执行构造函数中的代码(为这个新对象添加属性)；4、返回新对象。通过代码还原new的步骤：function Person(name, age) {转载 2016-07-13 20:06:10 · 816 阅读 · 0 评论 -
javascript 中的 this 分类详解(持续完善中...)
在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。this的取值，分四种情况。情况1：构造函数所谓构造函数就是用来new对象的函数。其实严格来说，所有的函数都可以new一个对象，但是有些函数的定义是为了new一个对象，而有些函数则不是。转载 2016-07-11 16:52:00 · 466 阅读 · 0 评论 -
javascript实现深拷贝的办法
解决的办法有：1.用jquery的extend方法，把对象合并到新的对象去，会返回一个深层次的副本。 2.使用JSON的序列化，var b = JSON.stringify(a); 在反序列化：JSON.parse(b);原创 2016-07-26 17:21:05 · 3030 阅读 · 0 评论 -
深入剖析 JavaScript 的深复制
参考： http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/一年前我曾写过一篇 Javascript 中的一种深复制实现，当时写这篇文章的时候还比较稚嫩，有很多地方没有考虑仔细。为了不误人子弟，我决定结合 Underscore、lodash 和 jQuery 这些主流的第三方库来重新谈一谈这个问题。第三方库的实现 讲一句唯心主转载 2016-07-26 18:12:37 · 717 阅读 · 0 评论 -
访问对象属性的点表示法和方括号表示法的区别
var person = { name:'gogo'}一般来说，访问对象属性时都使用点表示法，这也是很多面向对象语言中通用的语法。不过在javascript中，也可以使用方括号表示法来访问对象的属性。在使用方括号语法时，应该把属性以字符串的形式放在方括号中，如：alert(person["name"]); //gogoalert(person.nam原创 2016-07-26 15:01:36 · 6530 阅读 · 2 评论 -
JavaScript探秘：for-in循环(for-in Loops)
for-in循环应该用在非数组对象的遍历上，使用for-in进行循环也被称为“枚举”。从技术上将，你可以使用for-in循环数组（因为JavaScript中数组也是对象），但这是不推荐的。因为如果数组对象已被自定义的功能增强，就可能发生逻辑错误。另外，在for-in中，属性列表的顺序（序列）是不能保证的。所以最好数组使用正常的for循环，对象使用for-in循环。有个很重要的hasOwnProper转载 2016-07-27 18:13:14 · 620 阅读 · 0 评论 -
js中的继承
1.拷贝继承 2.类继承 3.原型继承原创 2016-07-27 11:19:30 · 390 阅读 · 0 评论 -
原型继承例子，看各自的prototype和constructor
<script> function superF(){ this.sup = true; } superF.prototype.getSuperValue = function(){ return this.sup; } function sub(){ this.subProperty = false; }原创 2016-07-28 22:04:22 · 425 阅读 · 0 评论 -
构造函数里面的引用类型属性也是独立的
<script> function SimpleMap(table){ this.table=table||{}; this.count = 0; } var v1 = new SimpleMap({z:2}); var v2 = new SimpleMap(); var v3 = new SimpleMap([1,2,3])原创 2016-07-29 16:41:11 · 448 阅读 · 0 评论 -
原型链和构造函数技术组合到一起的组合继承（类继承）
<script> function SuperType(name){ this.name = name; this.color = ["red","blue","green"]; } SuperType.prototype.sayName = function(){ console.log(this.name); };原创 2016-07-29 17:55:06 · 570 阅读 · 0 评论 -
总结下JSON 和 对象字面量的区别 及字面量在es6中的简洁表示法
一、类型的区别 JSON 值可以是：数字（整数或浮点数），字符串（在双引号中），逻辑值（true 或 false），数组（在方括号中），对象（在花括号中），null。 对象字面量 值可以是任何类型，而且函数，undefined或者是正则都是可以的 。二、语法 JSON 要求严格，名称/值对都必须在双引号中！！数据在名称/值对中，数据由逗号分隔，花括号保存对象，方括号...原创 2018-09-07 14:22:12 · 956 阅读 · 0 评论