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一旦定义,无法修改

产生Ethereum HD wallet代码,BIP32、BIP39、BIP44, 使用javascript套件产生Ethereum HD Wallet

 区块链  产生Ethereum HD wallet代码,BIP32、BIP39、BIP44, 使用javascript套件产生Ethereum HD Wallet已关闭评论
11月 012018
 

非常好的文章,来自: https://www.jianshu.com/p/30af695404b0

钱包是很多人第一次接触 Ethereum 或其他虚拟货币的地方。不管是用手机或浏览器的钱包,相信很多人都对一串陌生的单字感到好奇(而且很重要还要备份)。这是源自于 Bitcoin 中钱包的设计,采用这套机制的钱包通常称为 HD Wallet本篇希望简述 HD Wallet 的架构,再使用 JavaScript 套件从头创建一个 Ethereum HD Wallet

虚拟货币钱包

钱包顾名思义是存放$$$。但在虚拟货币世界有点不一样,我的帐户资讯(像是我有多少钱)是储存在区块链上,实际存在钱包中的是我的帐户对应的 key。有了这把 key 我就可以在虚拟货币世界证明我的身份、就可以更改我帐户的状态(像是送钱给别人)。这样来说,虚拟货币钱包实际上是管理和储存 key 的工具。这把 key 就是我的私钥,而帐户是从我的公钥衍伸出来。

Ledger 虚拟货币钱包

BIP32, BIP39, BIP44

BIP 全名是 Bitcoin Improvement Proposals,是提出 Bitcoin 的新功能或改进措施的文件。可由任何人提出,经过审核后公布在 bitcoin/bips 上。BIP 和 Bitcoin 的关系,就像是 RFC 之于 Internet。

而其中的 BIP32, BIP39, BIP44 共同定义了目前被广泛使用的 HD Wallet,包含其设计动机和理念、实作方式、实例等。

  • BIP32:定义 Hierarchical Deterministic wallet (简称 “HD Wallet”),是一个系统可以从单一个 seed 产生一树状结构储存多组 keypairs(私钥和公钥)。好处是可以方便的备份、转移到其他相容装置(因为都只需要 seed),以及分层的权限控制等。

BIP32 定义的 HD Wallet

  • BIP39:将 seed 用方便记忆和书写的单字表示。一般由 12 个单字组成,称为 mnemonic code(phrase),中文称为助记词或助记码。例如:

    rose rocket invest real refuse margin festival danger anger border idle brown

  • BIP44:基于 BIP32 的系统,赋予树状结构中的各层特殊的意义。让同一个 seed 可以支援多币种、多帐户等。各层定义如下:

    m / purpose’ / coin_type’ / account’ / change / address_index

    其中的purporse’固定是44’,代表使用 BIP44。而coin_type’用来表示不同币种,例如 Bitcoin 就是0’,Ethereum 是60’。

Ethereum HD Wallet

Ethereum 的钱包目前均采用以上 Bitcoin HD Wallet 的架构,并订coin_type’为60’,可以在 ethereum/EIPs/issues 中看到相关的讨论。举例来说,在一个 Ethereum HD Wallet 中,第一个帐户(这里的帐户指 BIP44 中定义的account’)的第一组 keypair,其路径会是m/44’/60’/0’/0/0。


创建 Ethereum HD wallet

使用的 JavaScript 套件包含:

  • bip39:实作 BIP39,随机产生新的 mnemonic code,并可以将其转成 binary 的 seed。
  • ethereumjs-wallet:产生和管理公私钥,我使用其中的 hdkey 子套件来创建 HD Wallet。
  • ethereumjs-util:集合许多 Ethereum 需要的运算功能。

安装套件

npm install bip39 ethereumjs-wallet ethereumjs-util --save

汇入套件

var bip39 = require('bip39') var hdkey = require('ethereumjs-wallet/hdkey') var util = require('ethereumjs-util')

产生 mnemonic code

var mnemonic = bip39.generateMnemonic()

取得的 mnemonic code 会像:

rose rocket invest real refuse margin festival danger anger border idle brown

产生 HD wallet

先将 mnemonic code 转成 binary 的 seed。

var seed = bip39.mnemonicToSeed(mnemonic)

使用 seed 产生 HD Wallet。如果要说更明确,就是产生 Master Key 并记录起来。

var hdWallet = hdkey.fromMasterSeed(seed)

产生第一个 Ethereum Address

产生 Wallet 中第一个帐户的第一组 keypair。可以从 Master Key,根据其路径m/44’/60’/0’/0/0推导出来。

var key1 = hdWallet.derivePath("m/44'/60'/0'/0/0")

使用 keypair 中的公钥产生 address。

var address1 = util.pubToAddress(key1._hdkey._publicKey, true)

取得的 Address:

685ce4cbdd5c19b64ca008cb85b83947e5318efa

Encoding Address

Ethereum 很贴心,为了避免大家打错 address(导致把钱送错人),Ethereum 让 Address 变得比较难打?!总之一般会用 EIP55: Mixed-case checksum address encoding 再进行编码。许多钱包也支援用户输入没经过编码的 Address,那就会跳过 checksum 机制,建议还是使用编码过的 Address。

address1 = util.toChecksumAddress(address1.toString('hex'))

最后取得的 Address 会像:

0x685ce4CbDd5c19b64CA008cB85b83947e5318EFA

可以用 Mnemonic Code Converter 验证结果

输入 mnemonic code

产生 Address、公钥、私钥,结果和我取得的 Address 一致


使用 Ethereum HD wallet

把 mnemonic code 记录下来好好保存,就会是一个冷钱包(指不连网路的钱包,所以安全很多)。可以使用产生出来的 address 收 Ether 或任何 REC20 Token。要送钱的话,可以汇入到任一个支援 Ethereum HD Wallet 的钱包。常用的 Ethereum HD wallet 像,在浏览器使用的 MyEtherWallet、MetaMask 和在手机使用的 imToken 等。

MetaMask

题外话,MetaMask 如何在浏览器储存我们的 mnemonic code?

相信大家都了解了,有 mnemonic code 就可以产生 HD Wallet 中所有的 keys。有了 keys 就可以任意送钱包中的 Ether 或 Token 给别人。所以 mnemonic code 很重要!!!那这么重要的东西保存在浏览器不会很危险吗?我便研究下我常用的 MetaMask 浏览器钱包。MetaMask 将加密后的 mnemonic code 存在浏览器的 Local Storage(一块只存在 Local 且不会过期的资料区块)。加密使用用户另外输入的密码,再汇入时会要求用户设定密码(如上图),而每一次重新开启钱包都会要求输入密码。解密算法有 Open Source,也有线上 Live Demo

MetaMask Local Storage


References

其他相关 Ethereum JavaScript 套件

作者:安德森_Anderson
链接:https://www.jianshu.com/p/54a2b14dfdf2
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

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

浏览器支持

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 语言的新信息。

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