目录
一:为什么要用this?
因为this提供了更优雅的方式来隐式传递一个对象的引用,可以将API设计的更加简洁且易于复用。
下面来看一个例子
function fun() {
return this.name;
}
let obj = {
name: 'obj name'
}
let person = {
name: 'person'
}
console.log(fun.call(obj))
console.log(fun.call(person))
如果不使用this
function fun1(obj) {
return obj.name
}
let obj = {
name: 'obj name'
}
let person = {
name: 'person'
}
console.log(fun1(obj))
console.log(fun1(person))
当随着程序的代码越来越复杂的时候,this的重要性就会变得更加明显。
二:常见误解
1、this指向自身
看一个例子:
function foo() {
this.count ++;
}
foo.count = 0;
foo()
console.log(foo.count) // 0
如果this是指向自身的话,foo运行一次之后,那么它的属性count应该是会自增1的,从输出的结果来看,并不是这样的。实际上这时候this已经指向全局作用域window了。
上面的例子如果要达到目的,可以这样写
function foo() {
foo.count ++; // 使用foo指向自身
}
foo.count = 0;
foo()
console.log(foo.count) // 1
具名函数可以使用函数变量名来调用自身;匿名函数可以使用arguments.callee来引用当前正在运行的函数对象(此用法很少用)。更好的方式是使用具名函数。
上面的例子还有一种方法可以达到目的
function foo() {
this.count ++;
}
foo.count = 0;
foo.call(foo) // 使用call方法改变this的指向
console.log(foo.count) // 1
2、this指向函数的作用域
来看一个例子,证实this不是指向函数作用域
function foo() {
var a = 2;
this.bar();
}
function bar() {
console.log(this.a);
}
foo(); // undefined,理论上应该是ReferenceError,但是并没有报这个错误
这个例子,如果this是指向函数作用域的话,那么执行this.bar()应该是可以输出2的,但是并没有,这就可以说明this并没有指向函数作用域。
this在任何情况下都不指向函数的词法作用域。
三:this指向什么?
前面已经排除了一些误解,那么实际上this指向的是什么呢?
其实,this是在运行的时候进行绑定的,并不是在编写代码时绑定的。它的上下文取决于函数调用时的各种条件,和函数的声明位置没有任何关系。
本文内容学习于《你不知道的JavaScript》(上卷)