原文地址:http://www.moye.me/2014/11/21/也说this/

引子

Any sufficiently advanced technology is indistinguishable from magic.

— Arthur C.Clarke

老爷子所言不虚,各种技术里都有黑魔法,比如JavaScript,就有着像 this这样的奇葩存在。

What's this?

this是什么?大概能得到的答案有:

  • 当前方法引用的对象实例
  • 当前调用函数本身
  • 全局上下文(顶层对象)
  • 函数运行的context环境

哪种解释是对的呢?来看段代码:

function foo() {
console.log(this.a);
}
var a = 2;
var obj = {a: 1};
foo(); // 2 (在Node下是undefined)
foo.call(obj); // 1
obj.foo = foo;
obj.foo(); // 1

在这段代码中,this 呈现了三种可能:

  1. 全局上下文:foo执行时,this 开放式的指向了全局上下文(在node下为undefined,原因在于Global的作用域与浏览器不同
  2. 向方法传递的上下文:Function对象固有的applycall方法,第一个参数均为 thisArg,它将被调用函数做为执行的上下文(在非strict模式,如果这个值为null或undefined,将有污染全局上下文的风险
  3. 方法引用的对象:可以将这个对象看成new创建的对象,函数的this将指向它

看起来是要有无限可能的节奏……好在我提前找到了这本书:

You Don't Know JS: this & Object Prototypes

To learn this, you first have to learn what this is not, despite any assumptions or misconceptions that may lead you down those paths. this is neither a reference to the function itself, nor is it a reference to the function’s lexical scope.

this is actually a binding that is made when a function is invoked, and what it references is determined entirely by the call-site where thefunction is called.

 

this 绑定上下文

this 实质上是一种绑定(binding)机制,只关乎函数被调用时所处的 上下文(context),而不关心它在哪里被定义。举个粟子:

function foo(something) {
this.a = something;
}
var obj1 = {
foo: foo
};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); // 2
obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3
var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2
console.log( bar.a ); // 4

this做为一个被绑定的context,甚至与函数依附的对象无关,通过obj1.foo.call( obj2, 3 )一句我们能看清:这个context被引入,函数既可以读也可以修改它,但这里涉及到一个优先级问题,即:为什么 obj1绑定的this.a 没有被foo()改写,却是 obj2的 this.a?

this 绑定优先级

绑定 this 的形式大概有以下几种,它们的优先级如下排列:

  1. 被new过的函数实例,那么函数里的this绑定的就是这个实例对象本身,如 var bar = new foo();
  2. 函数是被 call 或者 apply 调用,那么 this 绑定的是第一个参数: var bar = foo.call( obj2 );
  3. 函数是被某个对象引用的方法,那么它的this 绑定的是这个对象:var bar = obj1.foo();
  4. 最后,就是隐式绑定了,这种情况的this 绑定的是全局上下文,在 strict mode(Node)下是 undefined:var bar = foo();

建议

对于闭包惯用的self = this技俩,You Don't Know JS 一书是不提倡的,它的建议是:

Embrace  this-style mechanisms completely, including using bind(..) where necessary, and try to avoid  self = this ...

Function.prototype.bind,它的实现看起来是这样的:

if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError(
"Function.prototype.bind - what is trying " +
"to be bound is not callable"
);
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {
},
fBound = function () {
return fToBind.apply(
(this instanceof fNOP && oThis ? this : oThis),
aArgs.concat(Array.prototype.slice.call(arguments))
)
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}

更多文章请移步我的blog新地址: http://www.moye.me/

[Node.js] 也说this的更多相关文章

  1. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  2. 利用Node.js的Net模块实现一个命令行多人聊天室

    1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类:Server和Socket类.工厂方法. Server类 ...

  3. Node.js:进程、子进程与cluster多核处理模块

    1.process对象 process对象就是处理与进程相关信息的全局对象,不需要require引用,且是EventEmitter的实例. 获取进程信息 process对象提供了很多的API来获取当前 ...

  4. Node.js:理解stream

    Stream在node.js中是一个抽象的接口,基于EventEmitter,也是一种Buffer的高级封装,用来处理流数据.流模块便是提供各种API让我们可以很简单的使用Stream. 流分为四种类 ...

  5. Node.js:Buffer浅谈

    Javascript在客户端对于unicode编码的数据操作支持非常友好,但是对二进制数据的处理就不尽人意.Node.js为了能够处理二进制数据或非unicode编码的数据,便设计了Buffer类,该 ...

  6. node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  7. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

  8. Node.js入门(一)

    一.Node.js本质上是js的运行环境. 二.可以解析js代码(没有浏览器安全级的限制): 提供系统级的API:1.文件的读写 2.进程的管理 3.网络通信 三.可以关注的四个网站: 1.https ...

  9. Node.js学习笔记——Node.js开发Web后台服务

    一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

  10. Node.js入门

    开始之前,安利一本正在看的书<站在两个世界的边缘>,作者程浩,上帝丢给他太多理想,却忘了给他完成理想的时间.OK,有兴趣的可以看一看. node.js如标题一样,我也是刚开始接触,大家一起 ...

随机推荐

  1. INNO安装卸载自动结束进程插件使用

    [Code] //安装前判断是否有进程正在运行,istask.dll文件与打包的exe文件一起function RunTask(FileName: string; bFullpath: Boolean ...

  2. android: SQLite添加数据

    现在你已经掌握了创建和升级数据库的方法,接下来就该学习一下如何对表中的数据进 行操作了.其实我们可以对数据进行的操作也就无非四种,即 CRUD.其中 C 代表添加 (Create),R 代表查询(Re ...

  3. Android的消息机制: Message/MessageQueue/Handler/Looper

    概览   * Message:消息.消息里面可包含简单数据.Object和Bundle,还可以包含一个Runnable(实际上可看做回调). * MessageQueue:消息队列,供Looper线程 ...

  4. github host你懂得,如果你是程序员请不要乱传,求求了

    可用截止测试时间 2015-01-12 github相关的hosts 207.97.227.239 github.com 65.74.177.129 www.github.com 207.97.227 ...

  5. HTTP基本认证(Basic Authentication)的JAVA示例

    大家在登录网站的时候,大部分时候是通过一个表单提交登录信息.但是有时候浏览器会弹出一个登录验证的对话框,如下图,这就是使用HTTP基本认证.下面来看看一看这个认证的工作过程:第一步:  客户端发送ht ...

  6. Android webView打不开网页的解决办法

    在我们开发过程中,有可能会遇到webview有些网页打不开的问题.这可能是设置的不对,下面就是解决办法. 进行如下设置吧,大多数情况都能解决! displayWebview.getSettings() ...

  7. mybatis热加载的实现

    最近在使用mybatis,由于是刚刚开始用,用的并不顺手,目前是感觉有2个地方非常的不好用: 1.mybatis调试不方便 由于dao层只有接口,实现只是一个map的xml文件,想加断点都没有地方加, ...

  8. 修改nginx服务器类型

    通常nginx服务器不隐藏服务器类型及版本信息  curl -I http://www.aaa.com    获取web服务器的类型和版本代码   HTTP/1.1 200 OK   Server: ...

  9. .net微信公众号开发——群发消息

    作者:王先荣    本文将介绍微信公众号开发中用于群发消息的类MassMessage,包括:(1)MassMessage类:(2)群发:(3)删除:(4)预览:(5)查询发送状态:(6)接收推送群发结 ...

  10. SAP的吐槽来源

    这几天看了 梅林传奇(英国剧) , 封面是 梅林传奇的男主 对着女主 一脸无语的玩着电脑. 原来 看梅林传奇的时候,以为自己看错了,没有理会到这部剧的真谛,是自己不懂得和发现美,为了滚娘从第二季就弃了 ...