目前为止,我们的例子中提到过很多次 this 以及函数了。例如 Function.prototype.apply 和 Function.prototype.call 他们都有各自的优势,但是,在讨论这门语言的其他方面之前,先来看看 this 关键字和执行上下文。

方法和函数

方法在ECMAScript规范中被定义如下:

……函数是属性的值。

注:当一个函数被当做对象的方法调用的时候,此时,函数的值就会被当做对象的值。

当被当做对象的方法调用的时候,也可以将函数当做单独的子程序,这在社区中,也是被普遍使用的。

执行上下文(Execution Context)

ECMAScript 5.1 规定,执行中的程序形成执行上下文。此执行上下文支持此语言的某些结构,而这些结构就是需要管理的范围–来自于其他部分的可见变量和函数声明。

此执行上下文包含一个引用到各种可用状态元素的处于当前逻辑范围内的被管理的程序。更多详细信息,请访问 执行上下文

全局上下文和构造函数 (this)

运行下面的代码:

function add(x, y) {
  console.log(this);
  return x + y;
}

add(1, 1);

第二行代码将会是一个全局变脸被现实:window ,但是,如果在第一行之后增加 use strict 的话,将会返回 undefined .

现在思考一下,当构造函数被执行的时候,发生了神马?

当作为 new Shape() 的结果,进入 Shape 构造函数的时候,this 的值就会使当前对象,也就是此处的 shape 。请记住下面的话,如果想写面向对象的程序的话:如果一个函数被作为一个对象的方法调用,或者使用 new 关键字,此时, this 的值就是对象的当前实例,否则就是全局上下文 window 或者 undefined 。但是此处要讨论的是,this 的值,取决于如何调用函数。

一般可能犯得错误

小心的对待嵌套在方法中的函数,例如下面的例子:

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype = {
  move: function(x, y) {
    this.x += x;
    this.y += y;

    function checkBounds() {
      if (this.x > 100) {
        console.error('Warning: Shape out of bounds');
      }
    }

    checkBounds();
  }
};

var shape = new Shape();
shape.move(101, 1);

checkBounds 函数被定义在 move 方法内部,但是 console.error 此行代码,却永远不会被运行到,这是因为 checkBounds 函数中的 this 的值是全局上下文 window 而不是此处的 shape。因为虽然函数在 move 方法内部,但执行函数的时候,函数是单独的子程序,所以 this 还是指向 window。而 window.x 没有定义,所以永远执行不到。但是此时就可能混淆,所以带来错误。

但是,我们可以将 this 赋值给其他变量,从而可以正常使用。请注意有 self 的两行代码。如何修改的。

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype = {
  move: function(x, y) {

    var self = this;

    this.x += x;
    this.y += y;

    function checkBounds() {
      if (self.x > 100) {
        console.error('Warning: Shape out of bounds');
      }
    }

    checkBounds();
  }
};

var shape = new Shape();
shape.move(101, 1);

现在,当执行 move 方法的时候,self 代替了 this,从而可以正常的执行了。

总结

使用 this 的时候,请记住以下三点:

1. 取决于函数被以何种方式调用,new MyConstructor 和 myObject.method() 将被指向其实例,而当 this 在函数中的话,将会指向 window 。
2. 严格模式下,this 将会是 undefined 而不是 window 。
3. this 可以赋值给任意合法变量,但是一般 self 用的比较多。

ECMAScript 5.1 规范定义了调用内建构造函数时候的行为,例如,不仅 new Array(1,2) 是正确的,直接使用 Array(1,2) 也是正确的。也就是说这两种方式都可以用,但是结果却不同,第一种创建并初始化一个新的数组对象,而第二种则返回一个具有那两个参数的表达式,但是其构造函数必须是函数才行。

例如,Object() 可以进行数据类型的转换,而 String() 也可以,例如:String();

var a = new String(1);
console.log(a);
// { '0': '1' }
var b = String(1);
console.log(b);
// '1'

Date() 构造函数也可以进行类型转换,但是这样有时候有比较混乱,尤其是对那些只想让日期可读的初学者。例如,

var a = new Date(2012, 0, 1);
// Sun, 01 Jan 2012 00:00:00 GMT
Date(2012, 0, 1)
// 'Sun Jun 10 2012 11:28:03 GMT+0100 (BST)'

第一段代码返回来日期对象,而第二段代码返回了原始的日期字符串。

从构造函数返回的对象

在规范的 13.2.2 节,从构造函数返回的对象的行为被定义为:如果 使用 Type(result) 来检测返回的是 object 的话,则直接返回 result。

这使得构造函数返回另一个对象而不是一个实例。

function Shape() {
  return {
    x: 1, y: 1
  };
}

Shape.prototype = {
  move: function() {}
};

var shape = new Shape();
shape.move();
// TypeError: Object #<Object> has no method 'move'

返回没有此方法的结果,因为 shape 返回 {x: 1, y: 1} ,而其没有 move() 方法,可以使用 instanceof 来测试是否构造函数是作为构造函数来调用的。

function Shape() {
  if (this instanceof Shape) {
    // An object is being instantiated
  } else {
    return {
      a: 'b'
    };
  }
}

Shape.prototype = {
  move: function() {}
};

var shape = new Shape();
shape.move(); //instance nothing returned

Shape(); // Returns { a: 'b' }

jQuery 也使用了类似的方法来实例化 jQuery.Event 对象,而不需要 new 关键字。

jQuery.Event = function( src, props ) {
  // Allow instantiation without the 'new' keyword
  if ( !(this instanceof jQuery.Event) ) {
    return new jQuery.Event( src, props );
  }

此工厂式的行为也可能适合某些API – Dojo 在 NodeList 也使用了它。

结论

调用内置构造函数时,如果不使用关键字,则是类型转换,但是某些构造函数的行为又好像使用了 new 关键字,为了避免因为丢掉 new 关键字而造成的 bug ,所以,还是要牢记,加 new 关键字,和不加,是不一样的。

所以,当编写构造函数的时候,这个行为可以被用来创建类工厂式的 API,这是因为一个构造函数被当作函数调用的话,其行为可以被检测得到。

想了解更多这方面的知识,请在 ECMAScript 规范中搜索 called as a function 。

以下内容,仅作记录使用,因为脑子总是不好使,怕忘记了。
从一种编码的网页向另一种编码的网页提交表单。此时如果提交表单的话,一般情况下目标页面搜索都会乱码的。例如,在做 www.zgwdq.com 头部搜索的时候,由于页面是 UTF8 格式,而搜狗的 MP3 需要的是 GBK 格式,所以总是乱码。但是其页面又不像其他几个搜索站可以接受 ie=’utf-8′ 的参数。例如 搜狗搜索的参数就可以写为:&ie=utf8,但是对于音乐却不起作用。

这是因为音乐使用了奇怪的参数:&encoding=utf-8,这样子就可以正常提交了。

这一系列文章都讲述的是关于使用 JavaScript 操作文件相关的知识,其中最重要的是 File 对象,而实际上 file 对象只是 blob 对象的一个更具体的版本,blob 存储着大量的二进制数据,并且 blob 的 size 和 type 属性,都会被 file 对象所继承。

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

Slicing (分割)

通过 Blob 对象可以做的一件有趣的事情就是可以创建一个子 Blob 对象,其实就是可以将其分割(file 对象也可以)。由于每个 Blob 对象都是通过指针指向数据的而不是指向数据本身,因此可以快速的创建指向其他子部分的新的 Blob 对象,这里就需要使用 slice() 方法了。是不是和 JavaScript 的 slice() 方法很象,其实差不多。

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

不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice() 。重写的兼容各个浏览器的例子如下:

function sliceBlob(blob, start, end, type) {

    type = type || blob.type;

    if (blob.mozSlice) {
        return blob.mozSlice(start, end, type);
    } else if (blob.webkitSlice) {
        return blob.webkitSlice(start, end type);
    } else {
        throw new Error("This doesn't work!");
    }
}

当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。例如,Flickr 的工程师就使用此方法将照片中的需要使用的 exif 信息截取出来,而不是等到其传到服务器上之后,才处理的,并且一旦选择要上传照片,则同时传输文件数据和 Exif 数据,这样几乎就可以在上传照片的时候同时显示照片的信息了。

使用旧方法创建 Blob 对象

当 File 对象开始出现在浏览器中的时候,开发者们意识到 Blob 对象太强大了,都想可以在用户不干预的情况下,创建 Blob 对象,毕竟任何数据都可以用 Blob 对象表示,不用非要和文件产生关系。通过 BlobBuilder 创建一个包含有特定数据的 Blob 对象,然后浏览器快速响应即可。(不过目前其还不统一,Firefox:MozBlobBuilder, Internet Explorer 10:MSBlobBuilder,Chrome:WebKitBlobBuilder)。

例子:

var builder = new BlobBuilder();
builder.append("Hello world!");
var blob = builder.getBlob("text/plain");

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

并且 BlobBuilder() 还可以处理动态数据,例如 worker 中的数据等,这里就不翻译了。

使用新方法创建 Blob 对象

因为开发者一直想要能够直接创建 Blob 对象,因此浏览器实现了 BlobBuilder(); Blob 作为构造函数而存在,而且,此构造函数也已经被作为标准了,其也是今后创建 Blob 对象的方式。

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

type — MIME 的类型。

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

例子:

var blob = new Blob(["Hello world!"], { type: "text/plain" });

可以看到,此方法比 BlobBuilder() 简单多了。

但是,此 Blob 构造函数还没有被一些浏览器实现,目前只有某些版本的 Chrome 和 Firefox 实现了。而且剩余的浏览器也没有确定什么时候实现,但是其现在作为 File API 的一部分,将来应该会被统一实现的。

全文完。

会使用传统的方式上传图片,也能够用 js 从本地读取图片,现在讨论一下一种更简单的方法来上传文件。那就是 URL 对象 。

什么是 URL 对象(object url)

URL 对象就是一个指向磁盘上文件的 url,例如,想要在浏览器中显示一个文件,而这个文件存在与用户的电脑上,通常的办法是先上传到服务器,然后在现实,但这里却不需要服务器的干预,只需要加载图片即可。上一节的讨论可以讲文件加载进一个 file 对象。将图像文件数据读取为 data URI 然后将此 data URI 加入一个 img 对象的属性中即可,但是既然图像已经存在于硬盘上,为什么还要将它读取为其他格式,然后再来使用呢?为何要多此一举呢?如果使用 URL 对象的话,那么就可以直接将硬盘里的文件付给 img 对象了。

如何工作?

File API 对全局的 URL 对象,定义了两个方法,一个是 createObjectURL() ,接受一个指向文件的参数,然后返回 URL 对象 ,这就使得浏览器能够创建和管理一个指向本地文的 URL ;另一个方法是 revokeObjectURL() ,使得浏览器可以销毁传递给它的 URL 对象,以释放内存,并且页面一旦关闭,所有的 url 对象都会被销毁。不过这样做的好处就是不需要他们的时候,浏览器可以及时释放内存。

示例:

那该怎么做呢?首先给用户一个选择文件的方式,然后将其引用到一个变量 file。然后可以使用下面的代码:

var URL = window.URL || window.webkitURL,
    imageUrl,
    image;

if (URL) {
    imageUrl = URL.createObjectURL(file);
    image = document.createElement("img");

    image.onload = function() {
        URL.revokeObjectURL(imageUrl);
    };

    image.src = imageUrl;
    document.body.appendChild(image);
}

示例首先创建了一个本地 URL 变量(假设此 URL 变量正常可用),接着代码直接将本地的文件创建了一个 URL 对象然后将其存储在 imageUrl 中,然后后创建一个 img 对象,给 img 对象一个事件,等 img 对象加载完成之后,销毁 imageUrl ,然后将此 imageUrl 付给 img 对象的 src 属性,再将其插入到页面,此时,就可以看到图像在页面上显示了。

为什么在图像加载完成之后就销毁次数据呢,因为此数据在这里只会被使用一次,所以手动的释放它以节省内存占用,但是如果还有其他用处的话,就不应该手动销毁它。

安全问题和其他注意事项

初一看,此功能有点恐怖,因为竟然可以直接加载用户的磁盘文件。当然了,这样有一些安全隐患,不过 URL 本身并没有多大的问题,因为它都是动态分配,并且在其他计算机上无法访问。

对于不同的源 File API 是不允许被使用的,当 URL 对象被创建的时候,它就被绑定到此 javascript 运行的页面,所以不可能从 www.yimity.com 访问到 post.yimity.com 页面的 URL 对象,但是两个页面都来源于 www.yimity.com ,并且一个页面是另一个页面的 iframe 的话,那就可以访问到了。

URL 对象的储存时间很短,只在文档创建他们的期间存在,一旦页面被关闭,则他们都会被销毁。所以他们不会被存储在客户端。因为页面一关闭,他们都是无用的数据了。

在 GET 请求中可以使用 URL 对象,就和正常的脚本,图像一样。但是在 post 请求中确实不可用的,例如给 form post 属性。

下一节

下一节将会有更多的关于如何处理文件数据的方式。

主题名称: iSimple

主题链接: https://yimity.com/2012/06/01/isimple.html

主题描述: iSimple . 单栏主题,支持后台选项,包括自定义站点统计,支持评论框右侧 125*125 像素的广告,评论错误/正确提示,评论 Ajax 支持,SEO 友好,支持自定义菜单,支持IE8以上,及 Chrome,Firefox,Opera等现代浏览器。不需要任何插件支持。

主题版本: 1.0

主题作者: 一米

发布日期:06月01日。

主题预览:https://yimity.com/

介绍:

iSimple. 单栏主题,支持后台选项,包括自定义站点统计,支持评论框右侧 125*125 像素的广告,评论错误/正确提示,评论 Ajax 支持,SEO 友好,支持自定义菜单,支持IE8以上,及 Chrome,Firefox,Opera等现代浏览器。不需要任何插件支持。即使 JS 加载失败,功能同样正常可用。文章样式已经定义好,几乎所有的文章发表即可正常显示。支持 10 中文章格式。支持一键切换评论模式,WP 原始评论模式和多说评论系统。后台有说明。支持响应式设计,移动设备访问更舒服,类似阅读模式。支持发布 .mp3 结尾文件直接显示播放器。全站 placeholder 支持。极度个性化的 404 页面。

后续升级计划:

增加白色内容背景选择。
优化响应式设计。
优化代码。
其他

安装:

1.将本文件解压,得到 iSimple 文件夹及其内部文件,将此文件夹上传到 WordPress 程序中的 wp-content/themes 文件夹。

2.进入博客后台,外观-主题, 选择 iSimple 主题,并且激活。

使用:

1. 上传成功,并激活成功即可使用。

2. 在 外观-主题选项中,点击“主题选项”即可设置相关的选项,不要忘记点击“更新选项”哦。

4. 后台所有输入框 HTML 都是可用的,但是建议该用的时候用,不该用的就不要用。

5. 统计代码 可以使用单选框选择是否可用,选中状态则起作用,否则统计代码即使在后台能看到,但不会起作用。

7. 多语言支持。目前只有中文简体及英语。

9. 其他任何问题,请联系 [email protected]。谢谢。

10. 主题为 1.0 版,如有相关建议或 Bugs 也请发邮件,谢谢。

当然,此份主题不是免费的,但是只出售 10 份,每份 99 元人民币。同时附赠价格同样 99 元的 BreakUp airSquare 一份。

购买者,享受不限时一对一服务,但是也只是我一人,当然了,大家都有工作,最好是晚上,最最好是周末把。

最后,当然是走支付宝,你放心,我放心。

更新日志:

更新内容 , 时间 , 版本
增加 slimbox 功能 , 2012.6.1 , 1.0
优化评论框样式 , 2012.6.4 , 1.0.1
优化响应式设计样式 , 2012.6.4 , 1.0.2
修复一处文章内容样式及翻译错误 , 2012.6.5 , 1.0.3
增加评论分页功能 , 2012.6.6 , 1.1.3
修改音频播放器样式, 2012.7.30 , 1.1.4
将文章底部时间改为多少时间以前(类似新浪微薄), 2012.9.11 , 1.2.5