因为日常工作中经常使用到this
,而且在JavaScript中this
的指向问题也很容易让人混淆一部分知识。
this
,进而总结一篇文章。 this 是什么
this
是 JavaScript 语言的一个关键字。它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。
this
具体指向什么,取决于你是怎么调用的函数。 this 指向的四种情况
这四种情况基本涵盖了JavaScript中常见的this
指向问题
1. 全局的函数调用,this指向window
var a = 1;function fn() { console.log(this.a);}fn(); // 1复制代码
这种 情况下的this
其实就是window
对象,这个很好理解。 但是还有一种情况,就是匿名函数的this
也会指向window
。
var a= 'window';var obj={a: 'object'}obj.fn=function(){ console.log(this.a);//Object +function(){ console.log(this.a)//window }()}obj.fn()复制代码
匿名函数的执行环境具有全局性,因此它的this
对象通常指向windows。
2. 作为对象方法的调用,this指向该对象
var a ='window'var obj={ a: 'object', fn: function(){ console.log(this.a); }}obj.fn(); // object复制代码
当函数作为某个对象的方法调用时,this
就指这个函数所在的对象。
3. 作为构造函数调用,this指向实例
function fn() { this.x = 1;}var obj = new fn();console.log(obj.x) // 1复制代码
构造函数中的this
,在通过new
之后会生成一个新对象,this就指这个新对象。
new
有疑问的话,可以看 4. 使用call/apply/bind调用, this指向第一个参数
var obj1={ a: 'boj1'}var obj2={ a: 'obj2'}var obj3={ a: 'obj3'}function fn(){ console.log(this.a);}// applyfn.apply(obj1);// 'obj1'// callfn.call(obj2);// 'obj2'// bindvar fnBind= fn.bind(obj3);fnBind();// 'obj3'复制代码
call/ apply / bind
都有一个共同的特点,就是改变this
的指向,使用这种方法可以把别人的方法拿过来用到自己身上。
第一个参数为 null
的时候,视为指向 window
.
var a='window'var obj={ a: 'boj', fn: function (){ console.log(this.a); }}obj.fn.call(null);// 'window'复制代码
在这里如果是obj.fn()
调用的fn()
方法,this
应该指向obj
没错。 但是因为call(null)
的存在,改变了指向,所以this
指向了window
。
深入理解
正因为比较难理解,所以this
指向也是面试时最容易遇到的问题,比如下面这道我曾遇到的一个面试题:
var length = 10;function fn(){ console.log(this.length);}var obj = { length: 5, method: function(fn){ fn(); arguments[0](); }};obj.method(fn, 1);复制代码
在这道题里,不仅考察了对this
熟悉程度,还考察了函数的传参形式、作用域、以及arguments
这种特殊的数组的理解。
this
究竟指向了谁。 所以,只有对JavaScript
中的各项知识点深入理解,才会对this
的概念越加清晰。 参考:
文章仅日常学习工作所得,欢迎大家访问我的。