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标签)

浏览器支持

jQuery事件命名空间

 javascript  jQuery事件命名空间已关闭评论
12月 232016
 

命名控件是event对象上的一个属性

官网栗子:

 

 

使用场景

 

我们知道在JavaScript中对同一DOM元素使用传统的绑定模型绑定事件,后绑定的事件会覆盖先绑定的事件,也就是某个类型的事件只能有一个处理函数;而使用jQuery则可以绑定多个事件,无论前后绑定的事件都能被触发。(使用原生js,现代绑定方法也可以,addEventListener)

 

例:

 

<button id=”button1″>按钮</button>

JavaScript传统绑定方法:

 

?
1
2
3
4
5
6
7
var button1 = document.getElementById(“button1”);
button1.onclick = function(){
alert(“handler1”);
};
button1.onclick = function(){
alert(“handler2”);
};

 

只会弹出“handler2”一个提示框

jQuery绑定方法:

 

?
1
2
3
4
5
6
7
$(“#button”).on(“click”,handler1).on(“click”,handler2);
function handler1(){
         alert(“handler1”);
     }
function handler2(){
         alert(“handler2”);
}

 

如果想要解绑其中的一个事件处理函数,可以这样:

 

$(“#button”).off(“click”,handler1);

如果绑定的事件处理函数都是匿名函数的话则无法实现,例如:

 

?
1
2
3
$(“#button”).on(“click”,function(){
alert(“handler2”);
});

 

使用事件命名空间

?
1
2
3
4
5
$(“#button”).on(“click.name1”,function(){
    alert(“handler1”);
}).on(“click.name2”,function(){
    alert(“handler2”);
});

 

这样就可以解绑具体的函数了:

 

$(“#button”).off(“click.name2”);

命名空间和事件好比人的姓和名

 

命名空间 <==> 姓

 

事件 <==> 名字

转自:http://www.2cto.com/kf/201508/439264.html

JavaScript中的原型和继承

 javascript  JavaScript中的原型和继承已关闭评论
12月 232016
 

英文原文:Prototypes and Inheritance in JavaScript

有关对象和类

JavaScript 中全是对象,这指的是传统意义上的对象,也就是“一个包含了状态和行为的单一实体”。例如,JavaScript 中的数组是含有数个值,并且包含 push、reverse 和 pop 方法的对象。

var myArray = [1, 2];
myArray.push(3);
myArray.reverse();
myArray.pop(); var length = myArray.length;

现在问题是,push 这样的方法是从何而来的呢?我们前面提到的那些静态语言使用“类语法”来定义对象的结构,但是 JavaScript 是一个没有“类语法”的语言,无法用 Array“类”的语法来定义每个数组对象。而因为 JavaScript 是动态语言,我们可以在实际需要的情况下,将方法任意放置到对象上。例如下面的代码,就在二维空间中,定义了用来表示一个点的点对象,同时还定义了一个 add 方法

var point = {
    x : 10,
    y : 5,
    add: function(otherPoint) { this.x += otherPoint.x; this.y += otherPoint.y;
    }
}; 

但是上面的做法可扩展性并不好。我们需要确保每一个点对象都含有一个 add 方法,同时也希望所有点对象都共享同一个 add 方法的实现,而不是这个方法手工添加每一个点对象上。这就是原型发挥它作用的地方。

有关原型

在 JavaScript 中,每个对象都保持着一块隐藏的状态 —— 一个对另一个对象的引用,也被称作原型。我们之前创建的数组引用了一个原型对象,我们自行创建的点对象也是如此。上面说原型引用是隐藏的,但也有 ECMAScript(JavaScript 的正式名称)的实现可以通过一个对象的__proto__属性(例如谷歌浏览器)访问到这个原型引用。从概念上讲,我们可以将对象当作类似于 图1 所表示的对象 —— 原型的关系。

1

展望未来,开发者将能够使用 Object.getPrototypeOf 函数,代替__proto__属性,取得对象原型的引用。在本文写出的时候,已经可以在 Google Chrome,FIrefox 和 IE9 浏览器中使用 Object.getPrototypeOf 函数。更多浏览器在未来会实现此功能,因为它已经是 ECMAScript 标准的一部分了。我们可以使用下面的代码,来证明我们建立的 myArray 和点对象引用的是两个不同的原型对象。

Object.getPrototypeOf(point) != Object.getPrototypeOf(myArray);

对于本文的其余部分,我将交叉使用 __proto__和Object.getPrototypeOf 函数,主要是因为 __proto__ 在图和句子中更容易识别。需要记住的是它(__proto__)不是标准,而 Object.getPrototypeOf 函数才是查看对象原型的推荐方法。

是什么让原型如此特别?

我们还没有回答这个问题:数组中 push 这样的方法是从何而来的呢?答案是:它来源于 myArray 原型对象。图 2 是 Chrome 浏览器中脚本调试器的屏幕截图。我们已经调用 Object.getPrototypeOf 方法查看 myArray 的原型对象。

2

注意 myArray 的原型对象中有许多方法,包括那些在代码示例中调用的 push、pop 和 reverse 方法。因此,原型对象中的确包括 push 方法,但是 myArray 方法如何引用到呢?

myArray.push(3);

了解其工作原理的第一步,是要认识到原型并不是特别的。原型只是普通的对象。可以给原型添加方法,属性,并把他们当作其他 JavaScript 对象一样看待。然而,套用乔治·奥威尔的小说《动物农场》中“猪”的说法 —— 所有的对象应当是平等的,但有些对象(遵守规则的)比其他人更加平等。

JavaScript 中的原型对象的确是特殊的,因为他们遵从以下规则。当我们告诉 JavaScript 我们要调用一个对象的 push 方法,或读取对象的 x 属性时,运行时会首先查找对象本身。如果运行时找不到想要的东西,它就会循着 __proto__ 引用和对象原型寻找该成员。当我们  调用 myArray 的 push 方法时,JavaScript 并没有在 myArray 对象上发现 push 方法,而是在 myArray 的原型对象上找到了,于是 JavaScript 调用此方法(见图 3)。

3

上面所描述的行为是指一个对象本身继承了原型上的任何方法或属性。JavaScript 中其实不需要使用类语法也能实现继承。就像从赛车原型上继承了相应的技术的车,一个 JavaScript 对象也可以从原型对象上继承功能特性。

图 3 还展示了每个数组对象同时也可以维护自身的状态和成员。在请求得到 myArray 的 length 属性的情况下,JavaScript 会取得 myArray 中 length 属性的值,而不会去读取原型中的对应值。我们可以通过向对象上添加 push 这样的方法来“重写”push 方法。这样就会有效地隐藏原型中的 push 方法实现。

共享原型

JavaScript 中原型的真正神奇之处是多个对象如何维持对同一个原型对象的引用。例如,如果我们创建了这样的两个数组:

var myArray = [1, 2]; var yourArray = [4, 5, 6];

那么这两个数组将共享同一个原型对象,而下面的代码计算结果为 true:

Object.getPrototypeOf(myArray) === Object.getPrototypeOf(yourArray);

如果我们引用两个数组对象上的 push 方法,JavaScript 会去寻找原型上共享的 push 方法。

4

JavaScript 中的原型对象提供继承功能,同时也就实现了该方法实现的共享。原型也是链式的。换句话说,因为原型对象只是一个对象,所以一个原型对象可以维持到另一个原型对象的引用。如果你重新审视图 2 便可以看到,原型的 __proto__ 属性是一个指向另一个原型的非空值。当 JavaScript 查找像 push 方法这样的成员时,它会循着原型引用链检查每一个对象,直到找到该成员,或者抵达原型链的末端。原型链为继承和共享开辟了一条灵活的途径。

你可能会问的下一个问题是:我该如何设置那些自定义对象的原型引用呢?例如前面所使用的点对象,如何才能将 add 方法添加到原型对象中,并从多个点对象中继承方法呢?在回答这个问题之前,我们需要看看函数。

有关函数

JavaScript 中的函数也是对象。这样的表述带来了几个重要的结果,而我们并不会在本文中涉及所有的事项。这其中,能将一个函数赋值给一个变量,并且将一个函数作为参数传递给另一个函数的能力构成了现代 JavaScript 编程表达的基本范式。

我们需要关注的是,函数本身就是对象,因此函数可以有自身的方法,属性,并且引用一个原型对象。让我们来讨论下面的代码的含义。

// 这将返回 true: typeof (Array) === "function" // 这样的表达式也是: Object.getPrototypeOf(Array) === Object.getPrototypeOf(function () { }) // 这样的表达式同样: Array.prototype != null

代码中的第一行证明, JavaScript 中的数组是函数。稍后我们将看到如何调用 Array 函数创建一个新的数组对象。下一行代码,证明了 Array 对象使用与任何其他函数对象相同的原型,就像我们看到数组对象间共享相同的原型一样。最后一行代码证明了 Array 函数都有一个 prototype 属性,而这个 prototype 属性指向一个有效的对象。这个 prototype 属性十分重要。

JavaScript 中的每一个函数对象都有 prototype 属性。千万不要混淆这个 prototype 属性的 __proto__ 属性。他们用途并不相同,也不是指向同一个对象。

// 返回 true Object.getPrototypeOf(Array) != Array.prototype

Array.__proto__ 提供的是 数组原型 – 请把它当作 Array 函数所继承的对象。

而 Array.protoype,提供的的是 所有数组的原型对象。也就是说,它提供的是像 myArray 这样数组对象的原型对象,也包含了所有数组将会继承的方法。我们可以写一些代码来证明这个事实。

// true Array.prototype == Object.getPrototypeOf(myArray) // 也是 true Array.prototype == Object.getPrototypeOf(yourArray);

我们也可以使用这项新知识重绘之前的示意图。

5

基于所知道的知识,请想象创建一个新的对象,并让新对象表现地像数组的过程。一种方法是使用下面的代码。

// 创建一个新的空对象 var o = {}; // 继承自同一个原型,一个数组对象 o.__proto__ = Array.prototype; // 现在我们可以调用数组的任何方法... o.push(3); 

虽然这段代码很有趣,也能工作,可问题在于,并不是每一个 JavaScript 环境都支持可写的 __proto__ 对象属性。幸运的是,JavaScript 确实有一个创建对象内建的标准机制,只需要一个操作符,就可以创建新对象,并且设置新对象的 __proto__ 引用 – 那就是“new”操作符。

var o = new Array();
o.push(3); 

JavaScript 中的 new 操作符有三个基本任务。首先,它创建新的空对象。接下来,它将设置新对象的 __proto__ 属性,以匹配所调用函数的原型属性。最后,操作符调用函数,将新对象作为“this”引用传递。如果要扩展最后两行代码,就会变成如下情况:

var o = {};
o.__proto__ = Array.prototype;
Array.call(o);
o.push(3); 

函数的 call 方法允许你在调用函数的情况下在函数内部指定“this”所引用的对象。当然,函数的作者在这种情况下需要实现这样的函数。一旦作者创建了这样的函数,就可以将其称之为构造函数。

构造函数

构造函数和普通的函数一样,但是具有以下两个特殊性质。

  1. 通常构造函数的首字母是大写的(让识别构造函数变得更容易)。
  2. 构造函数通常要和 new 操作符结合,用来构造新对象。

Array 就是一个构造函数的例子。Array 函数需要和 new 操作符一起使用,而且 Array 的首字母是大写的。JavaScript 将 Array 作为内置函数包括在内,而任何人都可以写出自己的构造函数。事实上,我们最后可以为先前创建的点对象编写出构造函数。

var Point = function (x, y) { this.x = x; this.y = y; this.add = function (otherPoint) { this.x += otherPoint.x; this.y += otherPoint.y;
    }
} var p1 = new Point(3, 4); var p2 = new Point(8, 6);
p1.add(p2);

在上面的代码中,我们使用了 new 操作符和 Point 函数来构造点对象,这个对象带有 x 属性和 y 属性和一个 add 方法。你可以将最后的结果想象成图 6 的样子。

 6

现在的问题是我们的每个点对象中仍然有单独的 add 方法。使用我们学到的原型和继承的知识,我们更希望将点对象的 add 方法从每个点实例中转移到 Point.prototype 中。要达到继承 add 方法的效果,我们所需要做的,就是修改 Point.prototype 对象。

var Point = function (x, y) { this.x = x; this.y = y;
}
Point.prototype.add = function (otherPoint) { this.x += otherPoint.x; this.y += otherPoint.y;
} var p1 = new Point(3, 4); var p2 = new Point(8, 6);
p1.add(p2);

大功告成!我们刚刚在 JavaScript 中完成原型式的继承模式!

 7

总结

我希望这篇文章能够帮助你揭开 JavaScript 原型概念的神秘面纱。开始看到的是原型怎样让一个对象从其他对象中继承功能,然后看到怎样结合 new 操作符和构造函数来构建对象。这里所提到的,只是开启对象原型力量和灵活性的第一步。本文鼓励你自己发现学习有关原型和 JavaScript 语言的新信息。

同时,请小心驾驶。你永远不会知道这些行驶在路上的车辆会从他们的原型继承到什么(有缺陷)的技术。

function,!function,+function等函数表达式解析

 javascript  function,!function,+function等函数表达式解析已关闭评论
2月 242016
 

网上找到的一篇资料,对理解!function等概念讲的很清楚,分享下:


如果在function之前加上感叹号 (!) 会怎么样?比如下面的代码:

!function(){alert('iifksp')}() // true 

在控制台运行后得到的值时true,为什么是true这很容易理解,因为这个匿名函数没有返回值,默认返回的就是undefined,求反的结果很自然的就是true。所以问题并不在于结果值,而是在于,为什么求反操作能够让一个匿名函数的自调变的合法?

平时我们可能对添加括号来调用匿名函数的方式更为习惯:

(function(){alert('iifksp')})() // true 

或者:

(function(){alert('iifksp')}()) // true 

虽然上述两者括号的位置不同,不过效果完全一样。

那么,是什么好处使得为数不少的人对这种叹号的方式情有独钟?如果只是为了节约一个字符未免太没有必要了,这样算来即使一个100K的库恐怕也节省不了多少空间。既然不是空间,那么就是说也许还有时间上的考量,事实很难说清,文章的最后有提到性能。

回到核心问题,为什么能这么做?甚至更为核心的问题是,为什么必须这么做?

其实无论是括号,还是感叹号,让整个语句合法做的事情只有一件,就是让一个函数声明语句变成了一个表达式

function a(){alert('iifksp')} // undefined 

这是一个函数声明,如果在这么一个声明后直接加上括号调用,解析器自然不会理解而报错:

function a(){alert('iifksp')}() // SyntaxError: unexpected_token 

因为这样的代码混淆了函数声明和函数调用,以这种方式声明的函数a,就应该以 a(); 的方式调用。

但是括号则不同,它将一个函数声明转化成了一个表达式,解析器不再以函数声明的方式处理函数a,而是作为一个函数表达式处理,也因此只有在程序执行到函数a时它才能被访问。

所以,任何消除函数声明和函数表达式间歧义的方法,都可以被解析器正确识别。比如:

var i = function(){return 10}(); // undefined 1 && function(){return true}(); // true 1, function(){alert('iifksp')}(); // undefined 

赋值,逻辑,甚至是逗号,各种操作符都可以告诉解析器,这个不是函数声明,它是个函数表达式。并且,对函数一元运算可以算的上是消除歧义最快的方式,感叹号只是其中之一,如果不在乎返回值,这些一元运算都是有效的

!function(){alert('iifksp')}() // true +function(){alert('iifksp')}() // NaN -function(){alert('iifksp')}() // NaN ~function(){alert('iifksp')}() // -1 

甚至下面这些关键字,都能很好的工作:

void function(){alert('iifksp')}() // undefined new function(){alert('iifksp')}() // Object delete function(){alert('iifksp')}() // true 

最后,括号做的事情也是一样的,消除歧义才是它真正的工作,而不是把函数作为一个整体,所以无论括号括在声明上还是把整个函数都括在里面,都是合法的:

(function(){alert('iifksp')})() // undefined (function(){alert('iifksp')}()) // undefined 

说了这么多,实则在说的一些都是最为基础的概念——语句,表达式,表达式语句,这些概念如同指针与指针变量一样容易产生混淆。虽然这种混淆对编程无表征影响,但却是一块绊脚石随时可能因为它而头破血流。

最后讨论下性能,运行测试查看结果。我也同时将结果罗列如下表所示(测试配置:奔腾双核1.4G,2G内存,win7企业版):

Option Code Ops/sec
Chrome 13 Firefox 6 IE9 Safari 5
! !function(){;}() 3,773,196 10,975,198 572,694 2,810,197
+ +function(){;}() 21,553,847 12,135,960 572,694 1,812,238
-function(){;}() 21,553,847 12,135,960 572,694 1,864,155
~ ~function(){;}() 3,551,136 3,651,652 572,694 1,876,002
(1) (function(){;})() 3,914,953 12,135,960 572,694 3,025,608
(2) (function(){;}()) 4,075,201 12,135,960 572,694 3,025,608
void void function(){;}() 4,030,756 12,135,960 572,694 3,025,608
new new function(){;}() 619,606 299,100 407,104 816,903
delete delete function(){;}() 4,816,225 12,135,960 572,694 2,693,524
= var i = function(){;}() 4,984,774 12,135,960 565,982 2,602,630
&& 1 && function(){;}() 5,307,200 4,393,486 572,694 2,565,645
|| 0 || function(){;}() 5,000,000 4,406,035 572,694 2,490,128
& 1 & function(){;}() 4,918,209 12,135,960 572,694 1,705,551
| 1 | function(){;}() 4,859,802 12,135,960 572,694 1,612,372
^ 1 ^ function(){;}() 4,654,916 12,135,960 572,694 1,579,778
, 1, function(){;}() 4,878,193 12,135,960 572,694 2,281,186

可见不同的方式产生的结果并不相同,而且,差别很大,因浏览器而异。

但我们还是可以从中找出很多共性:new方法永远最慢——这也是理所当然的。其它方面很多差距其实不大,但有一点可以肯定的是,感叹号并非最为理想的选择。反观传统的括号,在测试里表现始终很快,在大多数情况下比感叹号更快——所以平时我们常用的方式毫无问题,甚至可以说是最优的。加减号在chrome表现惊人,而且在其他浏览器下也普遍很快,相比感叹号效果更好。

当然这只是个简单测试,不能说明问题。但有些结论是有意义的:括号和加减号最优。

但是为什么这么多开发者钟情于感叹号?我觉得这只是一个习惯问题,它们之间的优劣完全可以忽略。一旦习惯了一种代码风格,那么这种约定会使得程序从混乱变得可读。如果习惯了感叹号,我不得不承认,它比括号有更好的可读性。我不用在阅读时留意括号的匹配,也不用在编写时粗心遗忘——

转自:http://blog.sina.com.cn/s/blog_775f158f01016j12.html

关于jQuery新的事件绑定机制on()的使用技巧

 javascript  关于jQuery新的事件绑定机制on()的使用技巧已关闭评论
2月 242016
 

从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()

当第二个参数’selector’为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的’selector’参数,所以on()可以非常方便的换掉bind()

替换live()

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法

复制代码代码如下:

 $(‘#list li’).live(‘click’, ‘#list li’, function() {
    //function code here.
}); 

on()写法

复制代码代码如下:

$(document).on(‘click’, ‘#list li’, function() {
    //function code here.
});

这里的关键就是第二个参数’selector’在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()
delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

复制代码代码如下:

$(‘#list’).delegate(‘li’, ‘click’, function() {
    //function code here.
});

on()写法

复制代码代码如下:

$(‘#list’).on(‘click’, ‘li’, function() {
    //function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结
jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

转自:http://www.jb51.net/article/36064.htm

jQuery.extend 函数详解

 javascript  jQuery.extend 函数详解已关闭评论
2月 242016
 

理解下jquery.extend函数

JQuery的extend扩展方法:
      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
      一、Jquery的扩展方法原型是:

 extend(dest,src1,src2,src3...);


      它的含义是将src1,src2,src3…合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

 var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。


      这样就可以将src1,src2,src3…进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 

 

      那么合并后的结果

 result={name:"Jerry",age:21,sex:"Boy"}


      也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

      二、省略dest参数
      上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:
  1、$.extend(src)
   该方法就是将src合并到jquery的全局对象中去,如:

 $.extend({
  hello:function(){alert('hello');}
  });


   就是将hello方法合并到jquery的全局对象中。
  2、$.fn.extend(src)
   该方法将src合并到jquery的实例对象中去,如:

 $.fn.extend({
  hello:function(){alert('hello');}
 }); 

 

 就是将hello方法合并到jquery的实例对象中。

   下面例举几个常用的扩展实例:

$.extend({net:{}}); 

 

这是在jquery全局对象中扩展一个net命名空间。

 $.extend($.net,{
   hello:function(){alert('hello');}
  })


    这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

  三、Jquery的extend方法还有一个重载原型:  

extend(boolean,dest,src1,src2,src3...)


      第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } ); 


      我们可以看出src1中嵌套子对象location:{city:”Boston”},src2中也嵌套子对象location:{state:”MA”},第一个深度拷贝参数为true,那么合并后的结果就是: 

result={name:"John",last:"Resig",
        location:{city:"Boston",state:"MA",county:"China"}} 

 

       也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

var result=$.extend( false, {},  
{ name: "John", location:{city: "Boston",county:"USA"} },  
{ last: "Resig", location: {state: "MA",county:"China"} }  
                    ); 


     那么合并后的结果就是:

 result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

 

以上就是$.extend()在项目中经常会使用到的一些细节。

来自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html