浅谈JavaScript中 this关键字
在学习JavaScript这门语言时,我们经常会接触到this关键字。可是有时候我们会对this关键字产生疑问,什么时候使用它? 为什么此处使用this更好?所以,掌握好this的使用方法对我们学习JavaScript会有很大的帮助。
1.为什么要学习this?
考虑这样一个重要问题,假设开发者,比如 Douglas Crockford (译者注:JavaScript 领域必知牛人),不再使用 new 和 this,转而使用完完全全的函数式写法来做代码复用,会怎样?
事实上,基于 JavaScript 内置的现成的原型继承功能,我们已经使用并且将继续广泛使用 new 和 this 关键词来实现代码复用。
理由一,如果只能使用自己写过的代码,你是没法工作的。现有的代码以及你读到这句话时别人正在写的代码都很有可能包含 this 关键词。那么学习怎么用好它是不是很有用呢?因此,即使你不打算在你的代码库中使用它,深入掌握 this 的原理也能让你在接手别人的代码理解其逻辑时事半功倍。
理由二,拓展你的编码视野和技能。使用不同的设计模式会加深你对代码的理解,怎么去看、怎么去读、怎么去写、怎么去理解。我们写代码不仅是给机器去解析,还是写给我们自己看的。这不仅适用于 JavaScript,对其他编程语言亦是如此。
2.什么是this?
JavaScript 的 this 关键词不同于基于类的 面向对象编程语言(比如 C#,Java,C++),因为 JavaScript 本来就不是一门基于类的面向对象编程语言。虽说 ES6 里面 JavaScript 提供了类这个特性给我们用,但它只是一个语法糖,一个基于原型继承的语法糖。
3.this的四种用法
用法1:在一般函数方法中使用 this 指代全局对象
function fn() {
console.log( this.a );
}
var a = 2;
fn();
// 2 -- fn单独调用,this引用window
用法2:作为构造函数调用,this 指代new 出的对象
function test(){
this.x = 1;
}
var obj = new test();
alert(obj.x); // 1
//运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
var x = 2;
function test(){
this.x = 1;
}
var obj = new test();
alert(x); //2
用法3:作为对象方法调用,this 指代上级对象
function test(){
alert(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m(); // 1
用法4:apply 调用 ,apply方法作用是改变函数的调用对象,此方法的第一个参数为改变后调用这个函数的对象,this指代第一个参数
var x = 0;
function test(){
alert(this.x);
}
var obj={};
obj.x = 1;
obj.m = test;
obj.m.apply(); //0
//apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。如果把最后一行代码修改为
obj.m.apply(o); //1