js之this关键字--下

js之this关键字–下

JavaScript 语言之所以有this的设计,跟内存里面的数据结构有关系.

var obj={foo:5};

上面的代码将一个对象赋值给变量obj. JavaScript引擎会先在内存里面,生成一个对象{foo:5},然后把这个对象的内存地址赋值给变量obj.也就是说,变量obj是一个地址.后面如果要读取obj.foo,引擎先从obj拿到内存地址,然后再从该地址读出原始的对象,返回它的foo属性.

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

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

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

这样的结构是很清晰的,问题在于属性的值可能是一个函数。

var obj = { foo: function () {} };

这时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。

{
  foo: {
    [[value]]: 函数的地址
    ...
  }
}

由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。

var f = function () {};
var obj = { f: f };

// 单独执行
f()

// obj 环境执行
obj.f()

JavaScript允许在函数体内部，引用当前环境的其他变量。

var f = function () {
  console.log(x);
};

上面代码中，函数体里面使用了变量x。该变量由运行环境提供。

现在问题来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在哈拿书体内部获得当前的运行环境。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

var f = function () {
  console.log(this.x);
}

上面代码中，函数体里面的this.x就是指当前运行环境的x.

var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2

上面代码中,函数f在全局环境执行,this.x指向全局环境的x,在obj环境执行,this.x指向obj.x.

this关键字的使用场合

this主要有以下几个使用场合

1.全局环境

全局环境使用this,它指的就是顶层对象window.

this === window // true

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

上面代码说明,不管是不是在函数内部,只要是在全局环境下运行,this就是指顶层对象window.

构造函数

构造函数中的this,指的是实例对象.

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

上面代码定义了一个构造函数obj.由于this指向实例对象,所以在构造函数内部定义this.p,就相当于定义实例对象有一个p属性.

var o = new Obj('Hello World!');
o.p // "Hello World!"

对象的方法

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

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

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

obj.foo() // obj

上面的代码中,obj.foo方法执行时,它内部的this指向obj.

但是,下面这几种用法,都会改变this的指向.

// 情况一
(obj.foo = obj.foo)() // window
// 情况二
(false || obj.foo)() // window
// 情况三
(1, obj.foo)() // window

上面代码中,obj.foo就是一个值,这个值真正调用的时候,运行环境已经不是obj了,而是全局环境,所以this不再指向obj.个

可以这样理解,JavaScript引擎内部,obj和obj.foo存储在两个内存地址,称为地址一和地址二.obj.foo()这样调用时,是从地址一调用地址二,因此地址二的运行环境是地址一,this指向obj.但是,上面三种情况,都是直接取出地址二进行调用,这样的话,运行环境就是全局环境,因此this指向全局环境.

使用注意点

2.避免多层this

由于this的指向是不确定的,所以切勿在函数中包含多层的this.

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

o.f1()
// Object
// Window

上面代码包含两层this,结果运行后,第一层指向对象o,第二层指向全局对象,因此实际执行的是下面的代码.

var temp = function () {
  console.log(this);
};

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

一个解决方法是在第二层改用一个指向外层this的变量。

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

o.f1()
// Object
// Object

上面代码定义了变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变。

事实上，使用一个变量固定this的值，然后内层函数调用这个变量，是非常常见的做法，请务必掌握。

this关键字就学到这里啦 整理自阮一峰老师的this关键字,希望大家喜欢.