this学习（一）this指向什么？

目录

 

一：为什么要用this？

二：常见误解

1、this指向自身

2、this指向函数的作用域

三：this指向什么？

---

一：为什么要用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》（上卷）