this解惑
前言
要正确理解this,首先得理解执行上下文,这里推荐汤姆大叔的执行上下文,因为this
是在运行代码时确认具体指向谁,箭头函数除外。
全局作用域中的this
node
: 每个javaScript
文件都是一个模块,this
指向空对象(module.exports
)
this.a = 1;
console.log(this, module.exports);
// { a: 1 } { a: 1 }
当然也有些意外,比如下面这种情况:
this.a = 1;
module.exports = {}
console.log(this, module.exports);
// { a: 1 } {}
浏览器端: this
指向window
。
函数作用域中的this
这里分为两种,一种是全局作用域下直接执行函数,另外一种是被当作某个对象的属性的时候执行。eval的情况这里不作讨论。
全局环境下执行
function foo() {
console.log(this); // 此时的执行上下文为全局对象
}
foo();
// node global, 浏览器 window
当然严格模式下有不同,具体区别如下:
严格模式
this
指向undefined
(node
and 浏览器端)
非严格模式
浏览器端: this
指向全局变量window
node
: this
指向global
被当作属性调用
当函数作为一个对象的属性时,node
和浏览器端一致,指向调用该属性的对象
var obj = {
name: 'foo',
foo: function foo() {
console.log(this);
}
}
obj.foo();
// { name: 'foo', foo: [Function: foo] }
接下来,做一些升级。
var obj = {
name: 'foo',
foo: function foo() {
console.log(this);
}
}
var objA = obj.foo;
objA();
// node环境指向global,浏览器端指向window,严格模式下均指向undefined
--------------------------------------------------------------
var obj = {
name: 'foo',
foo: function foo() {
console.log(this);
}
}
var objA = {
name: 'objA',
foo: obj.foo
};
objA.foo();
// { name: 'objA', foo: [Function: foo] }
call、apply、bind
如果想手动更改函数里的this
指向,可通过上述3个方法。call
和apply
会立即执行,bind
则返回一个绑定好this
指向的函数。
var obj = {
name: 'foo',
foo: function foo() {
console.log(this);
}
}
var objA = {
name: 'objA',
foo: obj.foo
};
obj.foo.call(objA); // 将this指向objA
obj.foo.apply(objA);
obj.foo.bind(objA)(); // bind函数会返回一个绑定好this的函数,可供以后调用
/**
{ name: 'objA', foo: [Function: foo] }
{ name: 'objA', foo: [Function: foo] }
{ name: 'objA', foo: [Function: foo] }
*/
这里对上述3个方法进行更细的说明,方便更好的理解之间的差异。
var obj = {
name: 'foo',
foo: function foo() {
console.log(this, arguments); // 通过arguments对象访问函数传入的参数列表,类似数组但不是数组,可通过arguments[0]访问到传入的Tom
}
}
var objA = {
name: 'objA',
foo: obj.foo
};
obj.foo.call(objA, 'Tom', 'Jerry');
obj.foo.apply(objA, ['Tom', 'Jerry']);
obj.foo.bind(objA, 'Tom', 'Jerry')(1);
/**
{ name: 'objA', foo: [Function: foo] } [Arguments] { '0': 'Tom', '1': 'Jerry' }
{ name: 'objA', foo: [Function: foo] } [Arguments] { '0': 'Tom', '1': 'Jerry' }
{ name: 'objA', foo: [Function: foo] } [Arguments] { '0': 'Tom', '1': 'Jerry', '2': 1 }
可以看到call和bind是按序列传参,而apply是按数组传参,bind不会更改传参的顺序
*/
new构造
当函数被当作构造函数调用时,this
指向构造的那个对象。
注:new
调用中的this
不会被call
、apply
、bind
改变。
接下来,简单验证一下,由于call
和apply
会立即执行,无法被当作构造函数,只能选择bind
。
function Foo() {
console.log(this);
}
var foo = Foo.bind({ name: 'Tom' });
foo();
// { name: 'Tom' }
new foo();
// Foo {}
箭头函数中的this
this
在定义时,就已经知道其具体指向,因为在运行到声明的箭头函数时,会将this
进行强绑定到外部作用域中的this
,且无法更改。可以理解为继承了外部作用域中的this
。由于箭头函数的this
是确定的,无法更改,因此也无法被当作构造函数调用。
外部作用域为全局作用域:
var foo = () => {
console.log(this);
}
this.a = 1;
foo();
// 或者下面代码
var obj = {
name: 'obj',
foo: () => {
console.log(this);
}
}
var foo = obj.foo;
obj.foo();
foo();
foo.call({ name: 'Tom' });
/**
因为obj是在全局作用域下被定义,所以外部作用域为全局对象
node: 指向module.exports
浏览器:指向window
*/
外部作用域为函数作用域:
function foo() {
var a = () => {
console.log(this); // 继承外部作用域foo函数的this
};
a();
}
foo();
foo.call({ name: 'foo' });
new foo();
/**
这里foo函数中的this并不确定,由于调用方式不同,其this指向也不同
*/
相信写ES6类的情况很多,本人经常写React
类组件,刚开始初学者会好奇为什么在类组件里写方法时要用bind
或者箭头函数来强绑定this
。因为一般类组件里的方法,都会设计到this
的处理。比如事件处理函数,当触发相应事件时,调用事件对应的处理函数,此时访问到的this
为undefined
(ES6默认类与模块内就是严格模式),这就导致不能正确处理该组件的状态,甚至出错(处理函数内可能调用this.setState
方法)。所以在类组件内部声明方法时会需要我们进行强绑定。
接下来我们看看React
组件渲染流程:new
构造一个组件实例instance
,然后调用其render
方法进行渲染和事件绑定。new
构造的过程,this
已经确定指向构造的组件实例,所以你可以在constructor
进行bind
或直接使用箭头函数,这样函数内部this
就绑定到了instance
。render
函数里之所以能正常访问this
,是因为以instance.render()
进行渲染。
当然这里不特指React
类组件,只要是ES6类,只能用new
构造调用,否则会报错,所以ES6类里this
指向是确定的,可以放心使用箭头函数。
迷惑的代码
还有一个比较迷惑的地方,遇到的机会很少,代码如下:
(function(){
console.log(this); // 运行结果和全局作用域下执行结果一致
})();
// 由于没有以对象属性的方式调用,则被认为是全局环境下调用
--------------------------------------------------------
(function(){
console.log(this);
}).call({ name: 'Hello World' });
// { name: 'Hello World' },this指向可以被改变
--------------------------------------------------------
new (function(name){
this.name = name;
console.log(this);
})('Tom');
// { name: 'Tom' },this指向新创建的对象
更好的阅读体验在我的github,欢迎
this解惑的更多相关文章
- [C#解惑] #2 对象的初始化顺序
谜题 在上一篇C#解惑中,我们提到了对象的初始化顺序.当我们创建一个子类的实例时,总是会先执行基类的构造函数,然后再执行子类的构造函数.那么实例字段是什么时候初始化的呢?静态构造函数和静态字段呢?今天 ...
- [C#解惑] #1 在构造函数内调用虚方法
谜题 在C#中,用virtual关键字修饰的方法(属性.事件)称为虚方法(属性.事件),表示该方法可以由派生类重写(override).虚方法是.NET中的重要概念,可以说在某种程度上,虚方法使得多态 ...
- Python 包管理工具解惑
Python 包管理工具解惑 本文链接:http://zengrong.net/post/2169.htm python packaging 一.困惑 作为一个 Python 初学者,我在包管理上感到 ...
- 《浅谈磁盘控制器驱动》,磁盘控制器驱动答疑解惑![2012.1.29完结]by skyfree
<浅谈磁盘控制器驱动>,磁盘控制器驱动答疑解惑![2012.1.29完结] https://www.itiankong.net/thread-178655-1-1.html Skyfre ...
- SAE上传web应用(包括使用数据库)教程详解及问题解惑
转自:http://blog.csdn.net/baiyuliang2013/article/details/24725995 SAE上传web应用(包括使用数据库)教程详解及问题解惑: 最近由于工作 ...
- 【解惑】Java动态绑定机制的内幕
在Java方法调用的过程中,JVM是如何知道调用的是哪个类的方法源代码? 这里面到底有什么内幕呢? 这篇文章我们就将揭露JVM方法调用的静态(static binding) 和动态绑定机制(auto ...
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- (译)iOS Code Signing: 解惑
子龙山人 Learning,Sharing,Improving! (译)iOS Code Signing: 解惑 免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切 ...
- C#中的 ref 传进出的到底是什么 解惑篇
今天在浏览博文时,看到这篇文章:C#中的ref 传进出的到底是什么 ? 在传对象时使用ref的疑问 另附言: 本文写于早上,就在想发布的那瞬间,靠,公司断网了,原来修改的部分丢失了. 网一断就是一天了 ...
- 【解惑】深入jar包:从jar包中读取资源文件
[解惑]深入jar包:从jar包中读取资源文件 http://hxraid.iteye.com/blog/483115 TransferData组件的spring配置文件路径:/D:/develop/ ...
随机推荐
- OEM7GRUB 0.4.4 2009-11-18
windows7电脑重装系统后, 启动不了, 提示这个错误: Error: OEM7GRUB 0.4.4 2009-11-18...... 解决办法: 用PE系统进入后, 运行DiskGenius软件 ...
- php总结7——文件函数库、序列化数据、文件包含
7.1 文件函数库 php用来操作文件的 1) fopen 代开文件或URL 格式:resource fopen(string $filename, string $mode) 'r' 只读方式 ...
- tensorflow:typeerror:‘noneType’ object is not callable
程序运行报错 typeerror: ‘noneType’ object is not callable 解决方法:删除缓存文件,再次运行没有错误 删除__pycache__文件夹
- 可视化工具与pymongo
可视化工具 链接:https://robomongo.org/ pymongo 官网:http://api.mongodb.com/python/current/tutorial.html from ...
- hihocoder #1152 Lucky Substrings 【字符串处理问题】strsub()函数+set集合去重
#1152 : Lucky Substrings时间限制:10000ms单点时限:1000ms内存限制:256MB描述A string s is LUCKY if and only if the nu ...
- LightOJ - 1284 Lights inside 3D Grid —— 期望
题目链接:https://vjudge.net/problem/LightOJ-1284 1284 - Lights inside 3D Grid PDF (English) Statistic ...
- js中使用对象变量的两种方式
function Person(){ this.a=function(){ window.alert("a"); } this.b=function(){ window.alert ...
- 获取url的参数
function getPrams () { var url, urlPrams, urlPramsArr=[], item=[], prams={}; url = location.href; if ...
- nodejs && apidoc
1. 安装nodejs http://www.nodejs.org 源码编译 configure —prefix=/usr/local/nodejs make ...
- mybatis进行分页,使用limit
这里记录两个思路: 首先是写一个不能执行的代码. <select id="query" parameterType="map" resultType=&q ...