JS-this

作者: chrisghb | 来源:发表于2019-06-13 21:26 被阅读0次

参考文章：JavaScript 的 this 原理

一、问题的由来

学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。

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

var foo = obj.foo;

// 写法一
obj.foo()

// 写法二
foo()

上面代码中，虽然obj.foo和foo指向同一个函数，但是执行结果可能不一样。

请看下面的例子。

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

var foo = obj.foo;
var bar = 2;

obj.foo() // 1
foo() // 2

这种差异的原因，就在于函数体内部使用了this关键字。很多教科书会告诉你，this指的是函数运行时所在的环境。对于obj.foo()来说，foo运行在obj环境，所以this指向obj；对于foo()来说，foo运行在全局环境，所以this指向全局环境。所以，两者的运行结果不一样。

这种解释没错，但是教科书往往不告诉你，为什么会这样？也就是说，函数的运行环境到底是怎么决定的？举例来说，为什么obj.foo()就是在obj环境执行，而一旦var foo = obj.foo，foo()就变成在全局环境执行？

本文就来解释 JavaScript 这样处理的原理。理解了这一点，你就会彻底理解this的作用。

不管是什么场合，this都有一个共同点：它总是返回一个对象。

二、内存的数据结构

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

var obj = { foo:  5 };

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

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

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

image

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

三、函数

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

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

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

image

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

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

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

// 单独执行
f()

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

四、环境变量

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

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

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

现在问题就来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计<font color=red size=4>目的</font>就是在函数体内部，指定函数当前的运行环境。

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在全局环境执行，相当于window.f()，this.x指向全局环境的x。在obj环境执行，this.x指向obj.x。

回到本文开头提出的问题(如下)，obj.foo()是通过obj找到foo，所以就是在obj环境执行。只要函数被赋给另一个变量，this的指向就会变。一旦var foo = obj.foo，obj.foo被赋值给变量foo，内部的this就会指向foo()运行时所在的对象（本例是顶层对象window）。

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

var foo = obj.foo;

// 写法一
obj.foo()

// 写法二
foo()//相当于window.foo()

再看一个网页编程的例子。

<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

<script>
function validate(obj, lowval, hival){
  if ((obj.value < lowval) || (obj.value > hival))
    console.log('Invalid Value!');
}
</script>

上面代码是一个文本输入框，每当用户输入一个值，就会调用onChange回调函数，验证这个值是否在指定范围。浏览器会向回调函数传入当前对象，因此this就代表传入当前对象（即文本框），然后就可以从this.value上面读到用户的输入值。

五、使用场合

注意：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是最终调用它的对象

（1）全局环境

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

this === window // true

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

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

（2）构造函数

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

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

直接Obj()调用，this指向window。用new把Obj作为构造函数来调用，this指向原型为Obj.prototype的空对象。Obj函数表达式中，没有写返回值，默认用this作为返回值赋给o，所以o有了p属性。

（2.1）构造函数中的this碰到return时

如果返回值是一个对象，会将return的对象作为返回值。

如果没有返回值，或者返回值是基本类型，那么this会作为返回值。

function fn()  
{  
    this.user = '追梦子';  
    return { user: 11 };  
}
var a = new fn;  
console.log(a.user); //11
//fn ----> Function.prototype ----> Object.prototype ----> null

function fn()  
{  
    this.user = '追梦子';  
    return function(){};//函数对象作为返回值
}
var a = new fn;  
console.log(a.user); //undefine

function fn()  
{  
    this.user = '追梦子';  
    return 1;//this作为返回值
}
var a = new fn;  
console.log(a.user); //追梦子

function fn()  
{  
    this.user = '追梦子';  
    return undefined;//this作为返回值
}
var a = new fn;  
console.log(a.user); //追梦子

function fn()  
{  
    this.user = '追梦子';  
    return null;//this作为返回值
}
var a = new fn;  
console.log(a.user); //追梦子

注意：return之后的内容不执行。
（3）对象的方法

如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。

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

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

obj.foo() // obj

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

（3.2）但是，下面这几种用法，都会改变this的指向(有些难懂)。

var obj ={
  foo: function () {
    console.log(this);
  }
};
(obj.foo = obj.foo)() // window
(false || obj.foo)() // window
(1, obj.foo)() // window

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

（3.3）如果this所在的方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层。即这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

var a = {
  p: 'Hello',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};

a.b.m() // undefined

上面代码中，a.b.m方法在a对象的第二层，该方法内部的this不是指向a，而是指向a.b。
如果要达到预期效果，只有写成下面这样。

var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};
a.b.m() // Hello

（3.4）该函数方法赋值给另一个对象，就会改变this的指向。

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

以上虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行，所以最终指向的是window。this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的。
为了避免这个问题，可以只将fn所在的对象赋值给j，这样调用时，this的指向就不会变。

var j = o.b;
j.fn() // Hello

（3.5）对象原型链上的this

var o={f:function(){return this.a+this.b;}};
var p =Object.create(o);//p的原型指向o
p.a=1;
p.b=4;
console.log(p.f());//5

p调用原型链上的方法f，此时原型链上对象o也是可以去拿到p的属性a，b的。

（5）箭头函数与this
ES6箭头函数中的this绑定问题

var obj = {
    birth: 1990,
    getAge: function () {
        console.log(this); //obj
        var b = this.birth; // 1990
        var fn = function () {
            console.log(b); // 1990
            console.log(this); //window
            return new Date().getFullYear() - this.birth; 
            // 没有某个对象进行显示调用fn，this指向window或undefined
        };
        return fn();
    }
};
obj.getAge();

现在，箭头函数完全修复了this的指向，使this的指向很明确，this总是指向最外层调用者obj（箭头函数体内的this对象就是定义时所在的对象，而不是使用时所在对象）（箭头函数没有自己的this，它的this继承于外层代码库中的this）：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

（6）隐式绑定有一个大陷阱，绑定很容易丢失
一种丢失：var Hi = person.sayHi;
另一种丢失：隐式绑定的丢失是发生在回调函数中(事件回调也是其中一种)

六、使用注意点

避免多层 this

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

var o = {
  f1: function () {
    console.log(this);
    var f2 = function () {
      console.log(this);
    }();//函数赋值给变量，改变了this指向到window
  h}
}

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的值，然后内层函数调用这个变量，是非常常见的做法，请务必掌握。

另一种解决方法是JavaScript
提供了严格模式，也可以硬性避免这种问题。严格模式下，如果函数内部的this指向顶层对象，就会报错。

var counter = {
  count: 0
};
counter.inc = function () {
  'use strict';
  this.count++
};
var f = counter.inc;
f()
// TypeError: Cannot read property 'count' of undefined

上面代码中，inc方法通过'use strict'声明采用严格模式，这时内部的this一旦指向顶层对象，就会报错。

避免数组处理方法中的 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

上面代码中，foreach方法没有指定上下文参数，所以其回调函数中的this，其实是指向window对象，因此取不到o.v的值。

解决这个问题的方法有两种：

就是前面提到的，使用中间变量固定this。

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

o.f()
// hello a1
// hello a2

将this当作foreach方法的第二个参数，固定它的运行环境。

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

o.f()
// hello a1
// hello a2

避免回调函数中的 this

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

var o = new Object();
o.f = function () {
  console.log(this === o);
}

// jQuery 的写法
$('#button').on('click', o.f);

上面代码中，点击按钮以后，控制台会显示false。原因是此时this不再指向o对象，而是指向按钮的 DOM 对象，因为f方法是在按钮对象的环境中被调用的。这种细微的差别，很容易在编程中忽视，导致难以察觉的错误。

为了解决这个问题，可以采用call、apply、bind方法对this进行绑定，也就是使得this固定指向某个对象，减少不确定性。

JS-this

一、问题的由来

二、内存的数据结构

三、函数

四、环境变量

五、使用场合

六、使用注意点

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读