var、let、const区别

 javascript  var、let、const区别已关闭评论
2月 182019
 

var、let、const区别

在javascript中有三种声明变量的方式:var、let、const。

var 声明全局变量,换句话理解就是,声明在for循环中的变量,跳出for循环同样可以使用。

for(var i=0;i<=1000;i++){ 
var sum=0; 
sum+=i; 

alert(sum);

声明在for循环内部的sum,跳出for循环一样可以使用,不会报错正常弹出结果

 

let:声明块级变量,即局部变量。 

在上面的例子中,跳出for循环,再使用sum变量就会报错,有着严格的作用域,变量只作用域当前隶属的代码块,不可重复定义同一个变量,不可在声明之前调用,必须先定义再使用,会报错,循环体中可以用let

注意:必须声明’use strict’;后才能使用let声明变量否则浏览并不能显示结果,

 

const:用于声明常量,也具有块级作用域 ,也可声明块级。

const PI=3.14;

它和let一样,也不能重复定义同一个变量,const一旦定义,无法修改

详解JS正则replace的使用方法

 javascript  详解JS正则replace的使用方法已关闭评论
2月 092018
 

想不到一个replace还有这么多奥妙:http://www.jb51.net/article/80544.htm 

在讲replace的高级应用之前,我们先简单梳理一下JS正则中的几个重要的知识点,以帮助你对基础知识的回顾,然后再讲解JS正则表达式在replace中的使用,以及常见的几个经典案例。 

一、正则表达式的创建

JS正则的创建有两种方式: new RegExp() 和 直接字面量。

?
1
2
3
4
5
//使用RegExp对象创建
varregObj =newRegExp(“(^\s+)|(\s+$)”,”g”);
 
//使用直接字面量创建
varregStr = /(^\s+)|(\s+$)/g;

其中 g 表示全文匹配,与之相关的还有 i 和m,i 表示匹配时忽略大小写,m 表示多行匹配,如果多个条件同时使用时,则写成:gmi 

二、()、[]、{} 的区别

() 的作用是提取匹配的字符串。表达式中有几个()就会得到几个相应的匹配字符串。比如 (\s+) 表示连续空格的字符串。

[]是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示字符文本要匹配英文字符和数字。

{}一般用来表示匹配的长度,比如 \d{3} 表示匹配三个空格,\d[1,3]表示匹配1~3个空格。

三、^ 和 $

^ 匹配一个字符串的开头,比如 (^a) 就是匹配以字母a开头的字符串

$ 匹配一个字符串的结尾,比如 (b$) 就是匹配以字母b结尾的字符串

^ 还有另个一个作用就是取反,比如[^xyz] 表示匹配的字符串不包含xyz

需要注意的是:如果^出现在[]中一般表示取反,而出现在其他地方则是匹配字符串的开头

四、\d  \s  \w  .

\d 匹配一个非负整数, 等价于 [0-9]

\s 匹配一个空白字符

\w 匹配一个英文字母或数字,等价于[0-9a-zA-Z]

.   匹配除换行符以外的任意字符,等价于[^\n]

五、* + ?

* 表示匹配前面元素0次或多次,比如 (\s*) 就是匹配0个或多个空格

+ 表示匹配前面元素1次或多次,比如 (\d+) 就是匹配由至少1个整数组成的字符串

? 表示匹配前面元素0次或1次,相当于{0,1} ,比如(\w?) 就是匹配最多由1个字母或数字组成的字符串

六、test 、match

前面的大都是JS正则表达式的语法,而test则是用来检测字符串是否匹配某一个正则表达式,如果匹配就会返回true,反之则返回false

?
1
2
3
/\d+/.test(“123”) ;//true
 
/\d+/.test(“abc”) ;//false

match是获取正则匹配到的结果,以数组的形式返回

“186a619b28”.match(/\d+/g); // [“186″,”619″,”28”] 

以上基本上是我经常用到的基础知识,不是很全面,不常用的就没有列出来,因为列出来也只是摆设,反而混淆主次!

七、replace

replace 本身是JavaScript字符串对象的一个方法,它允许接收两个参数:

replace([RegExp|String],[String|Function])
第1个参数可以是一个普通的字符串或是一个正则表达式

第2个参数可以是一个普通的字符串或是一个回调函数

如果第1个参数是RegExp, JS会先提取RegExp匹配出的结果,然后用第2个参数逐一替换匹配出的结果

如果第2个参数是回调函数,每匹配到一个结果就回调一次,每次回调都会传递以下参数:

?
1
2
3
4
5
6
7
result: 本次匹配到的结果
 
$1,…$9: 正则表达式中有几个(),就会传递几个参数,$1~$9分别代表本次匹配中每个()提取的结果,最多9个
 
offset:记录本次匹配的开始位置
 
source:接受匹配的原始字符串

以下是replace和JS正则搭配使用的几个常见经典案例: 

(1)实现字符串的trim函数,去除字符串两边的空格

?
1
2
3
4
5
6
7
8
9
10
String.prototype.trim =function(){
 
  //方式一:将匹配到的每一个结果都用””替换
  returnthis.replace(/(^\s+)|(\s+$)/g,function(){
    return””;
  });
 
  //方式二:和方式一的原理相同
  returnthis.replace(/(^\s+)|(\s+$)/g,”);
};

^\s+ 表示以空格开头的连续空白字符,\s+$ 表示以空格结尾的连续空白字符,加上() 就是将匹配到的结果提取出来,由于是 | 的关系,因此这个表达式最多会match到两个结果集,然后执行两次替换:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
String.prototype.trim =function(){
  /**
   * @param rs:匹配结果
   * @param $1:第1个()提取结果
   * @param $2:第2个()提取结果
   * @param offset:匹配开始位置
   * @param source:原始字符串
   */
  this.replace(/(^\s+)|(\s+$)/g,function(rs,$1,$2,offset,source){
    //arguments中的每个元素对应一个参数
    console.log(arguments);
  });
};
 
” abcd “.trim();
 
输出结果:
 
[” “,” “, undefined, 0,” abcd “]//第1次匹配结果
[” “, undefined,” “, 5,” abcd “]//第2次匹配结果

(2)提取浏览器url中的参数名和参数值,生成一个key/value的对象

?
1
2
3
4
5
6
7
8
9
10
11
functiongetUrlParamObj(){
  varobj = {};
  //获取url的参数部分
  varparams = window.location.search.substr(1);
  //[^&=]+ 表示不含&或=的连续字符,加上()就是提取对应字符串
  params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
    obj[$1] = $2;
  });
 
  returnobj;
}

/([^&=]+)=([^&=]*)/gi 每次匹配到的都是一个完整key/value,形如 xxxx=xxx, 每当匹配到一个这样的结果时就执行回调,并传递匹配到的key和value,对应到$1和$2

(3)在字符串指定位置插入新字符串

?
1
2
3
4
5
6
7
8
9
10
String.prototype.insetAt =function(str,offset){
 
  //使用RegExp()构造函数创建正则表达式
  varregx =newRegExp(“(.{“+offset+”})”);
 
  returnthis.replace(regx,”$1″+str);
};
 
“abcd”.insetAt(‘xyz’,2);//在b和c之间插入xyz
>>”abxyzcd”

当offset=2时,正则表达式为:(^.{2})  .表示除\n之外的任意字符,后面加{2} 就是匹配以数字或字母组成的前两个连续字符,加()就会将匹配到的结果提取出来,然后通过replace将匹配到的结果替换为新的字符串,形如:结果=结果+str

(4) 将手机号12988886666转化成129 8888 6666

?
1
2
3
4
5
6
7
8
9
10
11
12
functiontelFormat(tel){
 
  tel = String(tel);
 
  //方式一
  returntel.replace(/(\d{3})(\d{4})(\d{4})/,function(rs,$1,$2,$3){
    return$1+” “+$2+” “+$3
  });
 
  //方式二
  returntel.replace(/(\d{3})(\d{4})(\d{4})/,”$1 $2 $3″);
}

(\d{3}\d{4}\d{4}) 可以匹配完整的手机号,并分别提取前3位、4-7位和8-11位,”$1 $2 $3″ 是在三个结果集中间加空格组成新的字符串,然后替换完整的手机号。

 (5) 实现函数escapeHtml,将<, >, &, ” 进行转义

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
functionescapeHtml(str) {
  //匹配< > ” &
  returnstr.replace(/[<>”&]/g,function(rs) {
    switch(rs) {
      case”<“:
        return”<“;
      case”>”:
        return”>”;
      case”&”:
        return”&”;
      case”\””:
        return”””;
    }
  });
}

JavaScript 开发进阶:理解 JavaScript 作用域和作用域链

 javascript  JavaScript 开发进阶:理解 JavaScript 作用域和作用域链已关闭评论
7月 232017
 

网上找到的一篇对javascript 作用域链描述比较深入的文章,强烈推荐:http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。

JavaScript作用域

任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

1.  全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域,一般来说以下几种情形拥有全局作用域:

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域,例如:

1
2
3
4
5
6
7
8
9
10
11
12
var authorName=”山边小溪”;
function doSomething(){
    var blogName=”梦想天空”;
    function innerSay(){
        alert(blogName);
    }
    innerSay();
}
alert(authorName); //山边小溪
alert(blogName); //脚本错误
doSomething(); //梦想天空
innerSay() //脚本错误

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

1
2
3
4
5
6
7
8
function doSomething(){
    var authorName=”山边小溪”;
    blogName=”梦想天空”;
    alert(authorName);
}
doSomething(); //山边小溪
alert(blogName); //梦想天空
alert(authorName); //脚本错误

变量blogName拥有全局作用域,而authorName在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下,window对象的内置属性都拥有全局作用域,例如window.name、window.location、window.top等等。

1.  局部作用域(Local Scope)

和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域称为函数作用域,例如下列代码中的blogName和函数innerSay都只拥有局部作用域。

1
2
3
4
5
6
7
8
9
function doSomething(){
    var blogName=”梦想天空”;
    function innerSay(){
        alert(blogName);
    }
    innerSay();
}
alert(blogName); //脚本错误
innerSay(); //脚本错误

作用域链(Scope Chain)

在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。例如定义下面这样一个函数:

1
2
3
4
function add(num1,num2) {
    var sum = num1 + num2;
    return sum;
}

在函数add创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图所示(注意:图片只例举了全部变量中的一部分):

JavaScript作用域链

函数add的作用域将会在执行时用到。例如执行如下代码:

1
var total = add(5,10);

执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象,运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链,用于标识符解析,当运行期上下文被创建时,而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象,叫“活动对象(activation object)”,该对象包含了函数的所有局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图所示:

JavaScript作用域链

在函数执行过程中,没遇到一个变量,都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部,也就是从活动对象开始搜索,查找同名的标识符,如果找到了就使用这个标识符对应的变量,如果没找到继续搜索作用域链中的下一个对象,如果搜索完所有对象都未找到,则认为该标识符未定义。函数执行过程中,每个标识符都要经历这样的搜索过程。

作用域链和代码优化

从作用域链的结构可以看出,在运行期上下文的作用域链中,标识符所在的位置越深,读写速度就会越慢。如上图所示,因为全局变量总是存在于运行期上下文作用域链的最末端,因此在标识符解析的时候,查找全局变量是最慢的。所以,在编写代码的时候应尽量少使用全局变量,尽可能使用局部变量。一个好的经验法则是:如果一个跨作用域的对象被引用了一次以上,则先把它存储到局部变量里再使用。例如下面的代码:

1
2
3
4
5
function changeColor(){
    document.getElementById(“btnChange”).onclick=function(){
        document.getElementById(“targetCanvas”).style.backgroundColor=”red”;
    };
}

这个函数引用了两次全局变量document,查找该变量必须遍历整个作用域链,直到最后在全局对象中才能找到。这段代码可以重写如下:

1
2
3
4
5
6
function changeColor(){
    var doc=document;
    doc.getElementById(“btnChange”).onclick=function(){
        doc.getElementById(“targetCanvas”).style.backgroundColor=”red”;
    };
}

这段代码比较简单,重写后不会显示出巨大的性能提升,但是如果程序中有大量的全局变量被从反复访问,那么重写后的代码性能会有显著改善。

改变作用域链

函数每次执行时对应的运行期上下文都是独一无二的,所以多次调用同一个函数就会导致创建多个运行期上下文,当函数执行完毕,执行上下文会被销毁。每一个运行期上下文都和一个作用域链关联。一般情况下,在运行期上下文运行的过程中,其作用域链只会被 with 语句和 catch 语句影响。

with语句是对象的快捷应用方式,用来避免书写重复代码。例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function initUI(){
    with(document){
        var bd=body,
            links=getElementsByTagName(“a”),
            i=0,
            len=links.length;
        while(i < len){
            update(links[i++]);
        }
        getElementById(“btnInit”).onclick=function(){
            doSomething();
        };
    }
}

这里使用width语句来避免多次书写document,看上去更高效,实际上产生了性能问题。

当代码运行到with语句时,运行期上下文的作用域链临时被改变了。一个新的可变对象被创建,它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部,这意味着函数的所有局部变量现在处于第二个作用域链对象中,因此访问代价更高了。如下图所示:

JavaScript作用域链

因此在程序中应避免使用with语句,在这个例子中,只要简单的把document存储在一个局部变量中就可以提升性能。

另外一个会改变作用域链的是try-catch语句中的catch语句。当try代码块中发生错误时,执行过程会跳转到catch语句,然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部,函数的所有局部变量将会被放在第二个作用域链对象中。示例代码:

1
2
3
4
5
try{
    doSomething();
}catch(ex){
    alert(ex.message); //作用域链在此处改变
}

请注意,一旦catch语句执行完毕,作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用,因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理,例如:

1
2
3
4
5
try{
    doSomething();
}catch(ex){
    handleError(ex); //委托给处理器方法
}

优化后的代码,handleError方法是catch子句中唯一执行的代码。该函数接收异常对象作为参数,这样你可以更加灵活和统一的处理错误。由于只执行一条语句,且没有局部变量的访问,作用域链的临时改变就不会影响代码性能了。

javascript变量声明 及作用域

 javascript  javascript变量声明 及作用域已关闭评论
7月 182017
 

javascript的变量声明具有hoisting机制

(转自: http://openwares.net/js/javascript_declaration_hoisting.html)

javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面。

先看一段代码

1
2
3
4
5
var v =”hello”;
(function(){
  console.log(v);
  var v =”world”;
})();

这段代码运行的结果是什么呢?
答案是:undefined
这段代码说明了两个问题,
第一,function作用域里的变量v遮盖了上层作用域变量v。代码做少些变动

1
2
3
4
5
var v =”hello”;
if(true){
  console.log(v);
  var v =”world”;
}

输出结果为”hello”,说明javascript是没有块级作用域的函数是JavaScript中唯一拥有自身作用域的结构。

第二,在function作用域内,变量v的声明被提升了。所以最初的代码相当于:

1
2
3
4
5
6
var v =”hello”;
(function(){
  var v;//declaration hoisting
  console.log(v);
  v =”world”;
})();

声明、定义与初始化

声明宣称一个名字的存在,定义则为这个名字分配存储空间,而初始化则是为名字分配的存储空间赋初值。
用C++来表述这三个概念

1
2
3
extern int i;//这是声明,表明名字i在某处已经存在了
int i;//这是声明并定义名字i,为i分配存储空间
i = 0;//这是初始化名字i,为其赋初值为0

javascript中则是这样

1
2
var v;//声明变量v
v =”hello”;//(定义并)初始化变量v

因为javascript为动态语言,其变量并没有固定的类型,其存储空间大小会随初始化与赋值而变化,所以其变量的“定义”就不像传统的静态语言一样了,其定义显得无关紧要。

声明提升

当前作用域内的声明都会提升到作用域的最前面,包括变量和函数的声明

1
2
3
4
5
6
(function(){
  var a =”1″;
  var f =function(){};
  var b =”2″;
  var c =”3″;
})();

变量a,f,b,c的声明会被提升到函数作用域的最前面,类似如下:

1
2
3
4
5
6
7
(function(){
  var a,f,b,c;
  a =”1″;
  f =function(){};
  b =”2″;
  c =”3″;
})();

请注意函数表达式并没有被提升,这也是函数表达式与函数声明的区别。进一步看二者的区别:

1
2
3
4
5
6
7
8
9
(function(){
  //var f1,function f2(){}; //hoisting,被隐式提升的声明
 
  f1();//ReferenceError: f1 is not defined
  f2();
 
  var f1 =function(){};
  function f2(){}
})();

上面代码中函数声明f2被提升,所以在前面调用f2是没问题的。虽然变量f1也被提升,但f1提升后的值为undefined,其真正的初始值是在执行到函数表达式处被赋予的。所以只有声明是被提升的。

名字解析顺序

javascript中一个名字(name)以四种方式进入作用域(scope),其优先级顺序如下:
1、语言内置:所有的作用域中都有 this 和 arguments 关键字
2、形式参数:函数的参数在函数作用域中都是有效的
3、函数声明:形如function foo() {}
4、变量声明:形如var bar;

名字声明的优先级如上所示,也就是说如果一个变量的名字与函数的名字相同,那么函数的名字会覆盖变量的名字,无论其在代码中的顺序如何。但名字的初始化却是按其在代码中书写的顺序进行的,不受以上优先级的影响。看代码:

1
2
3
4
5
6
7
8
9
(function(){
    var foo;
    console.log(typeof foo);//function
     
    function foo(){}
 
    foo =”foo”;
    console.log(typeof foo);//string
})();

如果形式参数中有多个同名变量,那么最后一个同名参数会覆盖其他同名参数,即使最后一个同名参数并没有定义。

以上的名字解析优先级存在例外,比如可以覆盖语言内置的名字arguments。

命名函数表达式

可以像函数声明一样为函数表达式指定一个名字,但这并不会使函数表达式成为函数声明。命名函数表达式的名字不会进入名字空间,也不会被提升。

1
2
3
4
5
f();//TypeError: f is not a function
foo();//ReferenceError: foo is not defined
var f =function foo(){console.log(typeof foo);};
f();//function
foo();//ReferenceError: foo is not defined

命名函数表达式的名字只在该函数的作用域内部有效。
===
在认识一切事物之后,人才能认识自己,因为事物仅仅是人的界限。 —— 尼采

 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

JS作用域与作用链

http://blog.csdn.net/yueguanghaidao/article/details/9568071

一:函数作用域

   先看一小段代码:

  1. var scope=“global”;  
  2. function t(){  
  3.     console.log(scope);  
  4.     var scope=“local”  
  5.     console.log(scope);  
  6. }  
  7. t();  

(PS: console.log()是firebug提供的调试工具,很好用,有兴趣的童鞋可以用下,比浏览器+alert好用多了)

第一句输出的是: “undefined”,而不是 “global”

第二讲输出的是:”local”

  你可能会认为第一句会输出:”global”,因为代码还没执行var scope=”local”,所以肯定会输出“global”。

  我说这想法完全没错,只不过用错了对象。我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。

  在C/C++中,花括号内中的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域,而是函数作用域.

所谓函数作用域就是说:-》变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

所以根据函数作用域的意思,可以将上述代码重写如下:

  1. var scope=“global”;  
  2. function t(){  
  3.     var scope;  
  4.     console.log(scope);  
  5.     scope=“local”  
  6.     console.log(scope);  
  7. }  
  8. t();  

    我们可以看到,由于函数作用域的特性,局部变量在整个函数体始终是由定义的,我们可以将变量声明”提前“到函数体顶部,同时变量初始化还在原来位置。

为什么说Js没有块级作用域呢,有以下代码为证:

  1. var name=“global”;  
  2. if(true){  
  3.     var name=“local”;  
  4.     console.log(name)  
  5. }  
  6. console.log(name);  

都输出是“local”,如果有块级作用域,明显if语句将创建局部变量name,并不会修改全局name,可是没有这样,所以Js没有块级作用域。

现在很好理解为什么会得出那样的结果了。scope声明覆盖了全局的scope,但是还没有赋值,所以输出:”undefined“。

所以下面的代码也就很好理解了。

  1. function t(flag){  
  2.     if(flag){  
  3.         var s=“ifscope”;  
  4.         for(var i=0;i<2;i++)   
  5.             ;  
  6.     }  
  7.     console.log(i);  
  8.     console.log(s);  
  9. }  
  10. t(true);  

输出:2  ”ifscope”

二:变量作用域

还是首先看一段代码:

  1. function t(flag){  
  2.     if(flag){  
  3.         s=“ifscope”;  
  4.         for(var i=0;i<2;i++)   
  5.             ;  
  6.     }  
  7.     console.log(i);  
  8. }  
  9. t(true);  
  10. console.log(s);  


就是上面的翻版,知识将声明s中的var去掉。

程序会报错还是输出“ifscope”呢?

让我揭开谜底吧,会输出:”ifscope”

这主要是Js中没有用var声明的变量都是全局变量,而且是顶层对象的属性。

所以你用console.log(window.s)也是会输出“ifconfig”

当使用var声明一个变量时,创建的这个属性是不可配置的,也就是说无法通过delete运算符删除

var name=1    ->不可删除

sex=”girl“         ->可删除

this.age=22    ->可删除

三:作用域链

先来看一段代码:

  1. name=“lwy”;  
  2. function t(){  
  3.     var name=“tlwy”;  
  4.     function s(){  
  5.         var name=“slwy”;  
  6.         console.log(name);  
  7.     }  
  8.     function ss(){  
  9.         console.log(name);  
  10.     }  
  11.     s();  
  12.     ss();  
  13. }  
  14. t();  


当执行s时,将创建函数s的执行环境(调用对象),并将该对象置于链表开头,然后将函数t的调用对象链接在之后,最后是全局对象。然后从链表开头寻找变量name,很明显

name是”slwy”。

但执行ss()时,作用域链是: ss()->t()->window,所以name是”tlwy”

下面看一个很容易犯错的例子:

  1. <html>  
  2. <head>  
  3. <script type=“text/javascript”>  
  4. function buttonInit(){  
  5.     for(var i=1;i<4;i++){  
  6.         var b=document.getElementById(“button”+i);  
  7.         b.addEventListener(“click”,function(){ alert(“Button”+i);},false);  
  8.     }  
  9. }  
  10. window.onload=buttonInit;  
  11. </script>  
  12. </head>  
  13. <body>  
  14. <button id=“button1”>Button1</button>  
  15. <button id=“button2”>Button2</button>  
  16. <button id=“button3”>Button3</button>  
  17. </body>  
  18. </html>  

当文档加载完毕,给几个按钮注册点击事件,当我们点击按钮时,会弹出什么提示框呢?

很容易犯错,对是的,三个按钮都是弹出:”Button4″,你答对了吗?

当注册事件结束后,i的值为4,当点击按钮时,事件函数即function(){ alert(“Button”+i);}这个匿名函数中没有i,根据作用域链,所以到buttonInit函数中找,此时i的值为4,

所以弹出”button4“。

四:with语句

说到作用域链,不得不说with语句。with语句主要用来临时扩展作用域链,将语句中的对象添加到作用域的头部。

看下面代码

  1. person={name:“yhb”,age:22,height:175,wife:{name:“lwy”,age:21}};  
  2. with(person.wife){  
  3.     console.log(name);  
  4. }  

with语句将person.wife添加到当前作用域链的头部,所以输出的就是:“lwy”.

with语句结束后,作用域链恢复正常。

Javascript 创建对象方法的总结

 javascript  Javascript 创建对象方法的总结已关闭评论
7月 142017
 

网上找到的资料,记录下,免得下次再找了,http://www.cnblogs.com/wangjq/p/3755691.html

使用Javascript创建对象的方法有很多,现在就来列举一下:

1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值。

    var person = new Object();
    person.name="kevin";
    person.age=31;
    alert(person.name);
    alert(person["name"])

2. 使用对象字面量创建一个对象;不要奇怪person[“5”],这里是合法的;另外使用这种加括号的方式字段之间是可以有空格的如person[“my age”].

复制代码
    var person = {
        name:"Kevin",
        age:31, 5:"Test" };
    alert(person.name);  alert(person["5"]);
复制代码

3. 使用工厂模式创建对象,返回带有属性和方法的person对象。

复制代码
function createPerson(name, age,job)
{ var o = new Object();
    o.name=name;
    o.age=31;
    o.sayName=function()
    {
        alert(this.name);
    }; return o;
}
createPerson("kevin",31,"se").sayName();
复制代码

4. 使用自定义构造函数模式创建对象;这里注意命名规范,作为构造函数的函数首字母要大写,以区别其它函数。这种方式有个缺陷是sayName这个方法,它的每个实例都是指向不同的函数实例,而不是同一个。

复制代码
function Person(name,age,job)
{ this.name=name; this.age=age; this.job=job; this.sayName=function()
    {
        alert(this.name);
    };
} var person = new Person("kevin",31,"SE");
person.sayName();
复制代码

5. 使用原型模式创建对象;解决了方法4中提到的缺陷,使不同的对象的函数(如sayFriends)指向了同一个函数。但它本身也有缺陷,就是实例共享了引用类型friends,从下面的代码执行结果可以看到,两个实例的friends的值是一样的,这可能不是我们所期望的。

复制代码
function Person()
{

}

Person.prototype = {
    constructor : Person,
    name:"kevin",
    age:31,
    job:"SE",
    friends:["Jams","Martin"],
    sayFriends:function()
    {
        alert(this.friends);
    }
}; var person1 = new Person();
person1.friends.push("Joe");
person1.sayFriends();//Jams,Martin,Joe
var person2 = new Person(); 
person2.sayFriends();//James,Martin,Joe
复制代码

6. 组合使用原型模式和构造函数创建对象,解决了方法5中提到的缺陷,而且这也是使用最广泛、认同度最高的创建对象的方法。

复制代码
function Person(name,age,job)
{ this.name=name; this.age=age; this.job=job;
   this.friends=["Jams","Martin"];
}
Person.prototype.sayFriends=function()
{
    alert(this.friends);
}; var person1 = new Person("kevin",31,"SE");
var person2 = new Person("Tom",30,"SE");
person1.friends.push("Joe");
person1.sayFriends();//Jams,Martin,Joe
person2.sayFriends();//Jams,Martin
复制代码

 7. 动态原型模式;这个模式的好处在于看起来更像传统的面向对象编程,具有更好的封装性,因为在构造函数里完成了对原型创建。这也是一个推荐的创建对象的方法。

复制代码
function Person(name,age,job)
{ //属性 this.name=name; this.age=age; this.job=job; this.friends=["Jams","Martin"]; //方法 if(typeof this.sayName !="function")
    {
        Person.prototype.sayName=function()
        {
            alert(this.name);
        };
        
        Person.prototype.sayFriends=function()
        {
            alert(this.friends);
        };
    }
} var person = new Person("kevin",31,"SE");
person.sayName();
person.sayFriends();
复制代码

另外还有两个创建对象的方法,寄生构造函数模式和稳妥构造函数模式。由于这两个函数不是特别常用,这里就不给出具体代码了。

写了这么多创建对象的方法,其实真正推荐用的也就是方法6和方法7。当然在真正开发中要根据实际需要进行选择,也许创建的对象根本不需要方法,也就没必要一定要选择它们了。

javascript中 == 和 === 内部的实现机制

 javascript  javascript中 == 和 === 内部的实现机制已关闭评论
7月 102017
 

知其然还需知其所以然, 在知乎看到对==和===的解析,分享下。

作者:林建入
链接:https://www.zhihu.com/question/20348948/answer/19601270
来源:知乎

很多时候我们会对某个语言的某个特性争论不休,通常都只是因为我们不知道它是怎么实现的。其实解决这个疑惑的最好的方法,就是弄清楚 == 和 === 内部的实现机制。
例如 Google v8 就是开源的,只要看看里面的代码,就能知道到底是怎么一回事了。但是我相信绝大多数人都是没有这个耐心的——我知道大家都在忙着挣钱养家——好吧,那咱就不看 Google v8 了,看看 ECMA-262 吧,里面已经把实现算法描述得很清楚了,只要看懂了下面的内容,以后就再也不会有此类疑问了。
一、严格相等运算符 === 的实现
=== 被称为 Strict Equals Operator,假设有表达式 a === b,则它的实际运算过程如下

  1. 计算出表达式 a 的结果,并存入 lref 变量
  2. 将 GetValue(lref) 的结果存入 lval 变量
  3. 计算出表达式 b 的结果,并存入 rref 变量
  4. 将 GetValue(rref) 的结果存入 rval 变量
  5. 执行 Strict Equality Comparison 算法判断 rval === lval 并将结果直接返回

这里的 Strict Equality Comparison 算法很关键,假设要计算的是 x === y,则过程如下

1. 如果 Type(x) 和 Type(y) 不同,返回 false

2. 如果 Type(x) 为 Undefined,返回 true

3. 如果 Type(x) 为 Null,返回 true

4. 如果 Type(x) 为 Number,则进入下面的判断逻辑

4.1. 如果 x 为 NaN,返回 false

4.2. 如果 y 为 NaN,返回 false

4.3. 如果 x 的数字值和 y 相等,返回 true

4.4. 如果 x 是 +0 且 y 是 -0,返回 true

4.5. 如果 x 是 -0 且 y 是 +0,返回 ture

4.6. 返回 false

5. 如果 Type(x) 为 String,则当且仅当 x 与 y 的字符序列完全相同(长度相等,每个位置上的字符相同)时返回 true,否则返回 false

6. 如果 Type(x) 为 Boolean,则若 x 与 y 同为 true 或同为 false 时返回 true,否则返回 false

7. 如果 x 和 y 引用的是同一个对象,返回 true,否则返回 false

二、相等运算符 == 的实现
好了,当你明白了 === 的实现之后,我们再来看看 == 的实现,比较一下他们有何不同?
== 被称为 Equals Operator (注意看没有 Strict 了),假设有表达式 a == b,则它的实际运算过程如下

  1. 计算出表达式 a 的结果,并存入 lref 变量
  2. 将 GetValue(lref) 的结果存入 lval 变量
  3. 计算出表达式 b 的结果,并存入 rref 变量
  4. 将 GetValue(rref) 的结果存入 rval 变量
  5. 执行 Abstract Equality Comparison 算法判断 rval == lval 并将结果直接返回

注意,其中的前 4 个步骤是和 === 完全相同的。唯独 5 不同。对于 === 来说,调用的是 Strict Equality Comparison 算法,但是 == 则调用的是 Abstract Equality Comparison 算法。虽然仅一词之差,但是却有质的不同,我们下面就来看看到底它是怎么实现的
假设要计算的是 x == y,Abstract Equality Comparison 计算的过程如下(很冗长,但是每个步骤都很简单)

1. 如果 Type(x) 和 Type(y) 相同,则

1.1. 如果 Type(x) 为 Undefined,返回 true

1.2. 如果 Type(x) 为 Null,返回 true

1.3. 如果 Type(x) 为 Number,则

1.3.1. 如果 x 是 NaN,返回 false

1.3.2. 如果 y 是 NaN,返回 false

1.3.3. 如果 x 的数值与 y 相同,返回 true

1.3.4. 如果 x 是 +0 且 y 是 -0,返回 true

1.3.5. 如果 x 是 -0 且 y 是 +0,返回 true

1.3.6. 返回 false

1.4. 如果 Type(x) 为 String,则当且仅当 x 与 y 的字符序列完全相同(长度相等,每个位置上的字符相同)时返回 true,否则返回 false

1.5. 如果 Type(x) 为 Boolean,则若 x 与 y 同为 true 或同为 false 时返回 true,否则返回 false

1.6. 如果 x 和 y 引用的是同一个对象,返回 true,否则返回 false

2. 如果 x 是 null 且 y 是 undefined,返回 true

3. 如果 x 是 undefined 且 y 是 null,返回 ture

4. 如果 Type(x) 为 Number 且 Type(y) 为 String,以 x == ToNumber(y) 的比较结果作为返回

5. 如果 Type(x) 为 String 且 Type(y) 为 Number,以 ToNumber(x) == y 的比较结果作为返回值

6. 如果 Type(x) 为 Boolean,以 ToNumber(x) == y 的比较结果作为返回值

7. 如果 Type(y) 为 Boolean,以 x == ToNumber(y) 的比较结果作为返回值

8. 如果 Type(x) 为 String 或 Number 且 Type(y) 为 Object,以 x == ToPrimitive(y) 的比较结果作为返回值

9. 如果 Type(x) 为 Object 且 Type(y) 为 String 或 Number,以 ToPrimitive(x) == y 的比较结果作为返回值

10. 返回 false

三、总结

从上面的算法流程可以看出,a === b 是最简单的。如果 a 和 b 的类型不同,那么一定会返回 false。而 a == b 则要灵活得多。JavaScript 会尝试调整 a 和 b 的类型,例如若 a 为字符串 b 为数字,则将字符串先转化为数字再与 b 比较,等等。这在很多时候简化了程序员的代码量。

一些程序员害怕 == 而提倡使用 === 的根本原因是,他们不知道在 == 的内部具体发生了什么。而这就导致误用和出错。

JavaScript中eval()函数用法详解

 javascript  JavaScript中eval()函数用法详解已关闭评论
7月 032017
 

eval函数的用法,学习了, 来自:http://www.jb51.net/article/76374.htm

eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。

如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。

语法

复制代码代码如下:

eval(string)
参数 描述
string 必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。

eval()函数用法详解:

此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eval()函数的用法。

此函数可以接受一个字符串str作为参数,并把此str当做一段javascript代码去执行,如果str执行结果是一个值则返回此值,否则返回undefined。如果参数不是一个字符串,则直接返回该参数,实例如下:

eval("var a=1");//声明一个变量a并赋值1。
eval("2+3");//执行加运算,并返回运算值。
eval("mytest()");//执行mytest()函数。
eval("{b:2}");//声明一个对象。

在以上代码特别注意的是,最后一个语句是声明了一个对象,如果想返回此对象,则需要在对象外面再嵌套一层小括号,如下:

复制代码代码如下:

eval(“({b:2})”); 

以上内容简单介绍了eval()函数的用法,比较容易理解。此函数最让人感到困惑的是关于它的作用域问题,下面就结合实例来介绍一下相关内容,先看一段代码实例:

function a(){ 
 eval("var x=1"); 
 console.log(x); 
} 
a(); 
console.log(x); 

在上面的代码中,第一个alert()函数能够弹出1,而第二个会因为x未定义而报错。
由以上表现可以得出,eval()函数并不会创建一个新的作用域,并且它的作用域就是它所在的作用域。这在所有主流浏览器都是如此,但是有时候需要将eval()函数的作用域设置为全局,当然可以将eval()在全局作用域中使用,但是往往实际应用中,需要在局部作用域使用具有全局作用域的此函数,这个时候可以用window.eval()的方式实现,例如以上代码可以改造如下:

function a(){ 
 window.eval("var x=1"); 
 console.log(x); 
} 
a(); 
console.log(x); 

在上面的代码中,两个alert()语句都能够正常弹出1。但是此中方式在标准浏览器中是可以的,但是在IE8和IE8以下浏览器中的表现依然和eval()一样,作用域是它们所在的作用域。这个时候可以使用IE浏览器独有的window.execScript()解决IE8和IE8浏览器的问题。为了实现兼容所有主流浏览器,把代码改造如下:

function a(){ 
 if(window.execScript){ 
  window.execScript("var x=1"); 
 } 
 else{ 
  window.eval("var x=1"); 
 } 
 console.log(x); 
} 
a(); 
console.log(x); 

如果浏览器支持window.execScript(),则使用此函数,不支持则使用window.eval(),这样就可以解决IE8和IE8以下浏览器的问题。

Javascript的shift()和push(),unshift()和pop()方法简介

 javascript  Javascript的shift()和push(),unshift()和pop()方法简介已关闭评论
6月 192017
 

Javascript的shift()和push(),unshift()和pop()方法简介,记录下:http://www.cnblogs.com/itdream/archive/2012/06/04/2534265.html

javascript为数组专门提供了push和pop()方法,以便实现类似栈的行为。来看下面的例子:

var colors=new Array();       //创建一个数组

var count=colors.push(“red”,”green”);   //  推入两项,返回修改后数组的长度

alert(count);   // 2   返回修改后数组的长度

var item=colors.pop();   //取得最后一项

alert(item);           // “green”

alert(colors.length);   //  1

队列方法:

结合使用shift()和push()方法,可以像使用队列一样使用数组:

var colors=new Array();

var count=colors.push(“red”,”green”);  //推入两项

alert(count);   //2

count=  colors.push(“black”);  // 从数组末端添加项,此时数组的顺序是: “red”, “green” ,”black”

alert(count);  //3

var item=colors.shift();   // 取得第一项

alert(item);   // “red”

alert(colors.length);  //2

从例子中可以看出:shift()和push()方法可以从数组末端添加项,能够移除数组中的第一项并返回该项。

若是想实现相反的操作的话,可以使用unshift()和pop()方法,即在数组的前端添加项,从数组末端移除项。

var colors=new Array();

var count=colors.unshift(“red”,”green”);// 推入两项

alert(count);  // 2

count=colors.unshift(“black”);  // 从数组的前端添加项,此时数组的顺序是: “black”, “red”, “green”

alert(count);  //3

var item=colors.pop();

alert(item);    // 移除并返回的是最后一项   “green”

由以上的两组例子,大家可以清晰的看到这两组方法的用法了。

just think and do it

javascript下使用正则表达式验证密码复杂度

 javascript  javascript下使用正则表达式验证密码复杂度已关闭评论
2月 232017
 

javascript下使用正则表达式验证密码复杂度的例子:

对应的验证规则是:密码中必须包含字母、数字、特殊字符,至少8个字符,最多30个字符。

(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}

javacript测试代码:

var regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}');
 alert(regex.test('a(*4532*'));

javascript之 BLOG对象类型

 javascript  javascript之 BLOG对象类型已关闭评论
1月 052017
 

学习下blog对象,转自:http://blog.csdn.net/oscar999/article/details/36373183

什么是Blob?

Blob 是什么? 这里说的是一种Javascript的对象类型。

oracle 中也有类似的栏位类型。

在 

[JS进阶] HTML5 之文件操作(file)

这一篇中用到了File对象,而实际上 file 对象只是 blob 对象的一个更具体的版本,blob 存储着大量的二进制数据,并且 blob 的 size 和 type 属性,都会被 file 对象所继承。

所以, 在大多数情况下,blob 对象和 file 对象可以用在同一个地方,例如,可以使用 FileReader 借口从 blob 读取数据,也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。

如何创建Blob

1. 使用旧方法创建 Blob 对象。

旧的方法使用 BlobBuilder 来创建一个Blob 实例,并且使用一个 append() 方法,将字符串(或者 ArrayBuffer 或者 Blob,此处用 string 举例)插入,一旦数据插入成功,就可以使用 getBlob() 方法设置一个 mime 。

[javascript] view plain copy

  1. <script>  
  2.   var builder = new BolbBuilder();  
  3.   builder.append(“Hello World!”);  
  4.   var blob = builder.getBlob(“text/plain”);  
  5. </script>  

2. 新方法创建Blob 对象

在新的方法中直接可以通过 Blob() 的构造函数来创建了。
构造函数,接受两个参数,第一个为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。第二个参数,是一个包含了两个属性的对象,其两个属性分别是:

type — MIME 的类型。

endings — 决定 append() 的数据格式,(数据中的 \n 如何被转换)可以取值为 “transparent” 或者 “native”(t* 的话不变,n* 的话按操作系统转换;t* 为默认) 。

[javascript] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. <script>  
  2.   var blob = new Blob([“Hello World!”],{type:“text/plain”});  
  3. </script>  

Blob的应用

1. 大文件分割 (slice() 方法)

slice() 方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。

当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。

不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice() 

可以写一个兼容各浏览器的方法:

[javascript] view plain copy

 在CODE上查看代码片派生到我的代码片

  1. function sliceBlob(blob, start, end, type) {  
  2.   type = type || blob.type;  
  3.   if (blob.mozSlice) {  
  4.       return blob.mozSlice(start, end, type);  
  5.   } else if (blob.webkitSlice) {  
  6.       return blob.webkitSlice(start, end type);  
  7.   } else {  
  8.       throw new Error(“This doesn’t work!”);  
  9.   }  
  10. }  

2.  在Chrome 中指定下载的文件名;

具体可以参考:

Web 端 js 导出csv文件(使用a标签)

浏览器支持