入门前端-《JavaScript 语言入门教程-this关键字》

Dear 丶 2022-10-11 13:31 133阅读 0赞

# 涵义 #

> `this`关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。

前一章已经提到，`this`可以用在构造函数之中，表示实例对象。  
除此之外，`this`还可以用在别的场合。  
但不管是什么场合，`this`都有一个共同点：**它总是返回一个对象。**

简单说，**`this`就是属性或方法“当前”所在的对象。**

# 实质 #

> `JavaScript` 语言之所以有 `this` 的设计，跟内存里面的数据结构有关系。

var obj = {  foo:  5 };

上面的代码将一个对象赋值给变量`obj`。`JavaScript` 引擎会先在内存里面，生成一个对象`{ foo: 5 }`，然后把这个对象的内存地址赋值给变量`obj`。

也就是说，变量`obj`是一个地址（`reference`）。后面如果要读取`obj.foo`，引擎先从`obj`拿到内存地址，然后再从该地址读出原始的对象，返回它的`foo`属性。

原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。  
举例来说，上面例子的`foo`属性，实际上是以下面的形式保存的。

{ 
      foo: { 
        [[value]]: 5
        [[writable]]: true
        [[enumerable]]: true
        [[configurable]]: true
      }
    }

注意，`foo`属性的值保存在属性描述对象的`value`属性里面。

# 使用场合 #

## 全局环境 ##

> 全局环境使用`this`，它指的就是顶层对象`window`。

this === window // true
    
    function f() { 
      console.log(this === window);
    }
    f() // true

## 构造函数 ##

> 构造函数中的`this`，指的是实例对象。

var Obj = function (p) { 
      this.p = p;
    };

## 对象的方法 ##

> 如果对象的方法里面包含`this`，`this`的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变`this`的指向。

但是，这条规则很不容易把握。请看下面的代码。

var obj ={ 
      foo: function () { 
        console.log(this);
      }
    };
    
    obj.foo() // obj

# 使用注意点 #

## 避免多层 this ##

> 由于`this`的指向是不确定的，所以切勿在函数中包含多层的`this`。

var o = { 
      f1: function () { 
        console.log(this);
        var f2 = function () { 
          console.log(this);
        }();
      }
    }
    
    o.f1()
    // Object
    // Window

## 避免数组处理方法中的 this ##

> 数组的`map`和`foreach`方法，允许提供一个函数作为参数。这个函数内部不应该使用`this`。

var o = { 
      v: 'hello',
      p: [ 'a1', 'a2' ],
      f: function f() { 
        this.p.forEach(function (item) { 
          console.log(this.v + ' ' + item);
        });
      }
    }
    
    o.f()
    // undefined a1
    // undefined a2

## 避免回调函数中的 this ##

> 回调函数中的`this`往往会改变指向，最好避免使用。

var o = new Object();
    o.f = function () { 
      console.log(this === o);
    }
    
    // jQuery 的写法
    $('#button').on('click', o.f);

# 绑定 this 的方法 #

> `this`的动态切换，固然为 `JavaScript` 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把`this`固定下来，避免出现意想不到的情况。`JavaScript`提供了`call、apply、bind`这三个方法，来切换/固定`this`的指向。

## Function.prototype.call() ##

> 函数实例的`call`方法，可以指定函数内部`this`的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。

var obj = { };
    
    var f = function () { 
      return this;
    };
    
    f() === window // true
    f.call(obj) === obj // true

## Function.prototype.apply() ##

> `apply`方法的作用与`call`方法类似，也是改变`this`指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数，使用格式如下。

func.apply(thisValue, [arg1, arg2, ...])

`apply`方法的第一个参数也是`this`所要指向的那个对象，如果设为`null`或`undefined`，则等同于指定全局对象。

第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。原函数的参数，在`call`方法中必须一个个添加，但是在`apply`方法中，必须以数组形式添加。

## Function.prototype.bind() ##

> `bind()`方法用于将函数体内的`this`绑定到某个对象，然后返回一个新函数。

var d = new Date();
    d.getTime() // 1481869925657
    
    var print = d.getTime;
    print() // Uncaught TypeError: this is not a Date object.

上面代码中，我们将`d.getTime()`方法赋给变量`print`，然后调用`print()`就报错了。  
这是因为`getTime()`方法内部的`this`，绑定`Date`对象的实例，赋给变量`print`以后，内部的`this`已经不指向`Date`对象的实例了。

`bind()`方法可以解决这个问题。

var print = d.getTime.bind(d);
    print() // 1481869925657

上面代码中，`bind()`方法将`getTime()`方法内部的`this`绑定到`d`对象，这时就可以安全地将这个方法赋值给其他变量了。

## 箭头函数没有自己的 “this” ##

箭头函数有些特别：它们没有自己的 `this`。如果我们在这样的函数中引用 `this`，`this` 值取决于外部`“正常的”`函数。

举个例子，这里的 `arrow()` 使用的 `this` 来自于外部的 `user.sayHi()` 方法：

let user = { 
      firstName: "Ilya",
      sayHi() { 
        let arrow = () => alert(this.firstName);
        arrow();
      }
    };
    
    user.sayHi(); // Ilya

这是箭头函数的一个特性，当我们并不想要一个独立的 `this`，反而想从外部上下文中获取时，它很有用。

# 示例 #

## 链式调用 ##

> 这种方法在 JavaScript 库中被广泛使用。

# 总结 #

*  存储在对象属性中的函数被称为`“方法”`。
 *  方法允许对象进行像 `object.doSomething()` 这样的`“操作”`。
 *  方法可以将对象引用为 `this` 。

`this` 的值是在程序运行时得到的。

*  一个函数在声明时，可能就使用了 `this`，但是这个 `this`只有在函数被调用时才会有值。
 *  可以在对象之间复制函数。
 *  以`“方法”`的语法调用函数时：`object.method()`，调用过程中的 `this` 值是 `object`。

Tip 注意：  
箭头函数有些特别：它们没有 `this`。在箭头函数内部访问到的 `this` 都是从外部获取的。