this的工作原理

如果一个函数被作为一个对象的方法调用,那么this将被指派为这个对象。

var parent = {
    method: function () {
        console.log(this);
    }
};
 
parent.method();
// <- parent
 
注意这种行为非常“脆弱”,如果你获取一个方法的引用并且调用,那么this的值不会是parent了,而是window全局对象。这让大多数开发者迷惑。
var parentless = parent.method;
 
parentless();
// <- Window
 
底线是你应该查看调用链,以理解被调用函数是一个对象的属性还是它自己。如果它被作为属性调用,那么this的值将变成该属性的对象,否则this的值将被指派为全局对象或window。如果在严格模式下,this的值将是undefined。
 
在被当作构造函数的情况下,当使用new关键字时,this将被指派为被创建的实例对象。
 
function ThisClownCar () {
  console.log(this);
}
 
new ThisClownCar();
// <- ThisClownCar {}
 
注意,在这种情况下没有办法识别出一个函数是否应该被用作构造函数,因此省略new关键字导致this的结果将是全局对象,就像我们上面看到的没有用parent调用的例子。
 
ThisClownCar();
// <- Window
 

改动this

.call、 .apply .bind 方法用来操作调用函数的方式,帮我们定义this的值和传递给函数的参数值。

Function.prototype.call 可以有任意数量的参数,第一个参数被分配给this,剩下的被传递给调用函数。

Array.prototype.slice.call([1, 2, 3], 1, 2)
// <- [2]
 
Function.prototype.apply 的行为和.call类似,但它传递给函数的参数是一个数组,而不是任意参数。
 
String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']
 
Function.prototype.bind 创建一个特殊的函数,该函数将永远使用传递给.bind的参数作为this的值,以及能够分配部分参数,创建原函数的珂里化(curride)版本。
 
var arr = [1, 2];
var add = Array.prototype.push.bind(arr, 3);
 
// effectively the same as arr.push(3)
add();
 
// effectively the same as arr.push(3, 4)
add(4);
 
console.log(arr);
// <- [1, 2, 3, 3, 4]
 

作用域链中的this

在下面的例子,this将无法在作用域链中保持不变。这是规则的缺陷,并且常常会给业余开发者带来困惑。

function scoping () {
  console.log(this);
 
  return function () {
    console.log(this);
  };
}
 
scoping()();
// <- Window
// <- Window
 
有一个常见的方法,创建一个局部变量保持对this的引用,并且在子作用域中不能有同命变量。子作用域中的同名变量将覆盖父作用域中对this的引用。http://www.cnblogs.com/sosoft/
 
function retaining () {
  var self = this;
 
  return function () {
    console.log(self);
  };
}
 
retaining()();
// <- Window
 
除非你真的想同时使用父作用域的this,以及当前this值,由于某些莫名其妙的原因,我更喜欢是使用的方法.bind函数。这可以用来将父作用域的this指定给子作用域。
 
function bound () {
  return function () {
    console.log(this);
  }.bind(this);
}
 
bound()();
// <- Window

解密 JavaScript 中的 this的更多相关文章

  1. Javascript中双等号(==)隐性转换机制 JS里charCodeAt()和fromCharCode()方法拓展应用:加密与解密

    Javascript中双等号(==)隐性转换机制   在Javascript中判断相等关系有双等号(==)和三等号(===)两种.其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否 ...

  2. nodejs与javascript中的aes加密

    简介 1.aes加密简单来说,在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES,已经被多方分析且广为全世界所使用.高级加密标准已然成为对称密钥加 ...

  3. [转载]JavaScript 中小数和大整数的精度丢失

    标题: JavaScript 中小数和大整数的精度丢失作者: Demon链接: http://demon.tw/copy-paste/javascript-precision.html版权: 本博客的 ...

  4. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  5. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  6. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  7. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  8. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  9. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

随机推荐

  1. python--同一mysql数据库下批量迁移数据

    最近接手些mysql数据库维护,发现mysql在批量操作方面就是个渣渣啊,比起MS SQL SERVER简直就是“不可同日而语”. 咨询了下MySQL的高手,对于数据迁移这种问题,一种处理方式就是直接 ...

  2. Robotium的左右为难 -- enterText

    最近测试框架收到反馈,详查后发现了一个Robotium的问题,甚有趣,遂记录. 问题场景: Robotium.enterText输入数据后,点击"发送"按钮,多数情况下失败,少数时 ...

  3. Nginx做前端Proxy时TIME_WAIT过多的问题

    我们的DSP系统目前基本非凌晨时段的QPS都在10W以上,我们使用Golang来处理这些HTTP请求,Web服务器的前端用Nginx来做负载均衡,通过Nginx的proxy_pass来与Golang交 ...

  4. Javascript模块化编程笔记

    最近在读阮一峰的博客http://www.ruanyifeng.com/blog/2012/10/javascript_module.html,随手记录一些重要笔记.  Javascript模块的雏形 ...

  5. C#并行编程-Task

    菜鸟学习并行编程,参考<C#并行编程高级教程.PDF>,如有错误,欢迎指正. 目录 C#并行编程-相关概念 C#并行编程-Parallel C#并行编程-Task C#并行编程-并发集合 ...

  6. react5 事件 satate

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  7. chrome远程调试真机上的app - 只显示空白页面

    chrome远程调试真机上的app - 只显示空白页面 这个是chrome需要的插件没办法自动下载导致的,怎么办你懂得,越狱... 调试起来感觉卡顿的厉害哇,有没有更好的方式?

  8. Python数组合并

    Python数组合并 a = [1, 2] b = [3, 4] c = a + b print(c) # [1, 2, 3, 4]

  9. Python数据类型之“文本序列(Text Sequence)”

    Python中的文本序列类型 Python中的文本数据由str对象或字符串进行处理. 1.字符串 字符串是Unicode码值的不可变序列.字符串字面量有多种形式: 单引号:'允许嵌入"双&q ...

  10. jQuery事件流的顺序

    <div id="aaron"> <div id='test'> <ul> <p>点击p被委托,ul被阻止了,因为内部重写了事件对象 ...