Javascript this全攻略

Javascript this

在JavaScript中,<font color=#7FFFD4 >this</font> 是当前执行函数的上下文。

JavaScript有4种不同的函数调用方式:

  • 函数调用: alert('Hello World!')
  • 方法调用: console.log('Hello World!')
  • 构造函数调用: new RegExp('\d')
  • 隐式调用: alert.call(undefined, 'Hello World!')

并且每种方法都定义了自己的上下文,<font color=#7FFFD4>this</font> 会表现得跟程序员预期的不太一样。
同时,<font color=#7FFFD4 >strict</font> 模式也会影响函数执行时的上下文。

函数调用与方法调用

  • 函数调用:当一个表达式为函数接着一个 <font color=#7FFFD4>(</font> ,一些用逗号分隔的参数以及一个 <font color=#7FFFD4>)</font> 时,函数调用被执行。例如 <font color=#7FFFD4>parseInt('18')</font>

  • 方法调用(属性访问):<font color=#7FFFD4>myObject.myFunction</font>,是一个方法调用。<font color=#7FFFD4>[1,5].join(',')</font> 是一个方法调用。实质就是对象属性的访问

在函数调用中的this

this 在函数调用中是一个全局对象

function sum(a, b) {
   console.log(this === window); // => true
   this.myNumber = 20; // add 'myNumber' property to global object
   return a + b;
}
// sum() is invoked as a function
// this in sum() is a global object (window)
sum(15, 16); // => 31
window.myNumber; // => 20

strict模式中, this 不再是全局对象而是变成undefined

function multiply(a, b) {
 'use strict'; // enable the strict mode
  console.log(this === undefined); // => true
  return a * b;
}
// multiply() function invocation with strict mode enabled
// this in multiply() is undefined
multiply(2, 5); // => 10

当multiply(2, 5)作为函数被调用时,this是undefined。

陷阱: 内部函数中的 <font color=#7FFFD4>this</font>

一个函数调用中的常见错误就是以为this在内部函数中跟在外部函数中一样。

正确来说,内部函数的上下文依赖于调用方法,而不是外部函数的上下文。

var numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       // this is window or undefined in strict mode
       console.log(this === numbers); // => false
       return this.numberA + this.numberB;
     }
     return calculate();
   }
};
numbers.sum(); // => NaN or throws TypeError in strict mode

<font color=#7FFFD4>numbers.sum()</font> 是一个对象上的方法调用,所以 <font color=#7FFFD4>sum</font> 中的上下文是 <font color=#7FFFD4>numbers</font> 对象。

<font color=#7FFFD4>calculate</font> 函数定义在 <font color=#7FFFD4>sum</font> 内部,所以你会指望 <font color=#7FFFD4>calculate()</font> 中的 <font color=#7FFFD4>this</font> 也是 <font color=#7FFFD4>numbers</font> 对象。

然而,<font color=#7FFFD4>calculate()</font> 是一个函数调用(而不是方法调用),它的 <font color=#7FFFD4>this</font> 是全局对象 <font color=#7FFFD4>window</font> 或者 <font color=#7FFFD4>strict</font> 模式下的 <font color=#7FFFD4>undefined</font>

即使外部函数 <font color=#7FFFD4>sum</font> 的上下文是 <font color=#7FFFD4>numbers</font> 对象,它在这里也没有影响。

为了解决这个问题,calculate应该跟sum有一样的上下文,以便于使用numberA和numberB。解决方法之一是使用 <font color=#7FFFD4>.call()</font> 方法

var numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       console.log(this === numbers); // => true
       return this.numberA + this.numberB;
     }
     // use .call() method to modify the context
     return calculate.call(this);
   }
};
numbers.sum(); // => 15

方法调用

一个方法是作为一个对象的属性存储的函数。例如:

var myObject = {
  // helloFunction is a method
  helloFunction: function() {
    return 'Hello World!';
  }
};
var message = myObject.helloFunction();

方法调用中的 <font color=#7FFFD4>this</font>

在方法调用中,this是拥有这个方法的对象

当调用一个对象上的方法时,this变成这个对象自身。

var calc = {
  num: 0,
  increment: function() {
    console.log(this === calc); // => true
    this.num += 1;
    return this.num;
  }
};
// method invocation. this is calc
calc.increment(); // => 1
calc.increment(); // => 2

构造函数调用

function Country(name, traveled) {
   this.name = name ? name : 'United Kingdom';
   this.traveled = Boolean(traveled); // transform to a boolean
}
Country.prototype.travel = function() {
  this.traveled = true;
};

var france = new Country('France', false);

france.traveled // false

france.travel();

france.traveled // true

从ECMAScript 6开始,JavaScript允许用class关键词来定义构造函数:

class City {
  constructor(name, traveled) {
    this.name = name;
    this.traveled = false;
  }
  travel() {
    this.traveled = true;
  }
}

var paris = new City('Paris', false);
paris.travel();

当属性访问 <font color=#7FFFD4>myObject.myFunction</font> 前面有一个 <font color=#7FFFD4>new</font> 关键词时,JavaScript会执行 <font color=#7FFFD4>构造函数调用</font> 而不是原来的方法调用。

例如new myObject.myFunction():它相当于先用属性访问把方法提取出来extractedFunction = myObject.myFunction,

然后利用把它作为构造函数创建一个新的对象: new extractedFunction()。

构造函数中的 <font color=#7FFFD4>this</font>

在构造函数调用中this指向新创建的对象

function Foo () {
  console.log(this instanceof Foo); // => true
  this.property = 'Default Value';
}
// Constructor invocation
var fooInstance = new Foo();
fooInstance.property; // => 'Default Value'

陷阱: 忘了new

function Vehicle(type, wheelsCount) {
  this.type = type;
  this.wheelsCount = wheelsCount;
  return this;
}
// Function invocation
var car = Vehicle('Car', 4);
car.type; // => 'Car'
car.wheelsCount // => 4
car === window // => true

你可能以为它正确地创建并初始化了对象。

然而,在函数调用中,<font color=#7FFFD4>this</font><font color=#7FFFD4>window</font> 对象,<font color=#7FFFD4>Vehicle('Car', 4)</font> 实际上是在给 <font color=#7FFFD4>window</font> 对象设置属性--这是错的。它并没有创建一个新的对象。

当你希望调用构造函数时,确保你使用了new操作符:

function Vehicle(type, wheelsCount) {
  if (!(this instanceof Vehicle)) {
    throw Error('Error: Incorrect invocation');
  }
  this.type = type;
  this.wheelsCount = wheelsCount;
  return this;
}
// Constructor invocation
var car = new Vehicle('Car', 4);
car.type // => 'Car'
car.wheelsCount // => 4
car instanceof Vehicle // => true

// Function invocation. Generates an error.
var brokenCat = Vehicle('Broken Car', 3);

在构造函数里我们添加了一个验证 <font color=#7FFFD4>this instanceof Vehicle</font> 来确保执行的上下文是正确的对象类型。如果this不是Vehicle,那么就会报错。

隐式调用

当函数被.call()或者.apply()调用时,执行的是隐式调用。

方法.call(thisArg[, arg1[, arg2[, ...]]])将接受的第一个参数thisArg作为调用时的上下文,arg1, arg2, ...这些则 <font color=#7FFFD4>作为参数</font> 传入被调用的函数。

方法.apply(thisArg, [args])将接受的第一个参数thisArg作为调用时的上下文,并且接受另一个 <font color=#7FFFD4>类似数组的对象[args]</font> 作为被调用函数的参数传入。

function increment(number) {
  return ++number;
}
increment.call(undefined, 10); // => 11
increment.apply(undefined, [10]); // => 11

隐式调用中的 <font color=#7FFFD4>this</font>

在隐式调用.call()或.apply()中,this是第一个参数

var rabbit = { name: 'White Rabbit' };
function concatName(string) {
  console.log(this === rabbit); // => true
  return string + this.name;
}
// Indirect invocations
concatName.call(rabbit, 'Hello '); // => 'Hello White Rabbit'
concatName.apply(rabbit, ['Bye ']); // => 'Bye White Rabbit'

当一个函数应该在特定的上下文中执行时,隐式调用就非常有用。例如为了解决方法调用时,this总是window或strict模式下的undefined的上下文问题。隐式调用可以用于模拟在一个对象上调用某个方法。

绑定函数

绑定函数是一个与对象绑定的函数。通常它是通过在原函数上使用 <font color=#7FFFD4>.bind()</font> 来创建的。原函数和绑定的函数共享代码跟作用域,但是在执行时有不同的上下文。

方法.bind(thisArg[, arg1[, arg2[, ...]]])接受第一个参数thisArg作为绑定函数执行时的上下文,并且它接受一组可选的参数 arg1, arg2, ...作为被调用函数的参数。它返回一个绑定了thisArg的新函数。

下面的代码创建了一个绑定函数并在之后调用它:

function multiply(number) {
 'use strict';
  return this * number;
}
// create a bound function with context
var double = multiply.bind(2);
// invoke the bound function
double(3); // => 6
double(10); // => 20
var say = concatName.bind(rabbit);
say('Hello'); // => 'Hello White Rabbit'

绑定函数中的 <font color=#7FFFD4>this</font>

在调用绑定函数时,this是.bind()的第一个参数。

var numbers = {
  array: [3, 5, 10],
  getNumbers: function() {
    return this.array;
  }
};
// Create a bound function
var boundGetNumbers = numbers.getNumbers.bind(numbers);
boundGetNumbers(); // => [3, 5, 10]
// Extract method from object
var simpleGetNumbers = numbers.getNumbers;
simpleGetNumbers(); // => undefined or throws an error in strict mode

numbers.getNumbers函数能在不绑定的情况下赋值给变量simpleGetNumbers。

在之后的函数调用中,<font color=#7FFFD4>simpleGetNumbers()</font><font color=#7FFFD4>this</font><font color=#7FFFD4>window</font> 或者strict模式下的undefined,不是 <font color=#7FFFD4>number</font> 对象。

在这个情况下,simpleGetNumbers()不会正确返回数组。

<font color=#7FFFD4>.bind()</font> 永久性地建立了一个上下文的链接,并且会一直保持它。

一个绑定函数不能通过 <font color=#7FFFD4>.call()</font> 或者 <font color=#7FFFD4>.apply()</font> 来改变它的上下文,甚至是再次绑定也不会有什么作用。

只有用绑定函数的构造函数调用方法能够改变上下文,但并不推荐这个方法(因为构造函数调用用的是常规函数而不是绑定函数)。

下面的例子声明了一个绑定函数,接着试图改变它预先定义好的上下文:

function getThis() {
 'use strict';
  return this;
}
var one = getThis.bind(1);
// Bound function invocation
one(); // => 1
// Use bound function with .apply() and .call()
one.call(2); // => 1
one.apply(2); // => 1
// Bind again
one.bind(2)(); // => 1
// Call the bound function as a constructor
new one(); // => Object

只有new one()改变了绑定函数的上下文,其他方式的调用中this总是等于1。

箭头函数

箭头函数是 <font color=#7FFFD4>匿名的</font>,这意味着它的name属性是个空字符串''。

var sumArguments = (...args) => {
   console.log(typeof arguments); // => 'undefined'
   return args.reduce((result, item) => result + item);
};
sumArguments.name // => ''
sumArguments(5, 5, 6); // => 16

箭头函数中的 <font color=#7FFFD4>this</font>

this是箭头函数定义时封装好的上下文

箭头函数并不会创建它自己的上下文,它从它定义处的外部函数获得this上下文。下面的例子说明了这个上下文透明的特性:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  log() {
    console.log(this === myPoint); // => true
    setTimeout(()=> {
      console.log(this === myPoint); // => true
      console.log(this.x + ':' + this.y); // => '95:165'
    }, 1000);
  }
}
var myPoint = new Point(95, 165);
myPoint.log();

setTimeout在调用箭头函数时跟 <font color=#7FFFD4>log()</font> 使用了相同的上下文( <font color=#7FFFD4>myPoint对象</font> )。

正如所见,箭头函数从它定义处“继承”了函数的上下文。如果在这个例子里尝试用常规函数,它会建立自己的上下文( <font color=#7FFFD4>window</font><font color=#7FFFD4>undefined</font> )。

所以,为了让同样的代码能在函数表达式中正确运行,需要手动绑定上下文: <font color=#7FFFD4>setTimeout(function() {...}.bind(this)</font> )。

这样一来就显得很啰嗦,不如用箭头函数来得简短。

如果箭头函数定义在最上层的作用域(在所有函数之外),那么上下文就总是全局对象(浏览器中的window对象):

var getContext = () => {
   console.log(this === window); // => true
   return this;
};
console.log(getContext() === window); // => true

箭头函数会一劳永逸地绑定词法作用域。即使使用修改上下文的方法,this也不能被改变:

var numbers = [1, 2];
(function() {
  var get = () => {
    console.log(this === numbers); // => true
    return this;
  };
  console.log(this === numbers); // => true
  get(); // => [1, 2]
  // Use arrow function with .apply() and .call()
  get.call([0]); // => [1, 2]
  get.apply([0]); // => [1, 2]
  // Bind
  get.bind([0])(); // => [1, 2]
}).call(numbers);

一个函数表达式通过.call(numbers)被隐式调用了,这使得这个调用的this变成了numbers。这样一来,箭头函数get的this也变成了numbers,因为它是从词法上获得的上下文。

无论get是怎么被调用的,它一直保持了一开始的上下文numbers。用其他上下文的隐式调用(通过.call()或.apply())或者重新绑定(通过.bind())都不会起作用

箭头函数不能用作构造函数。如果像构造函数一样调用new get(), JavaScript会抛出异常:TypeError: get is not a constructor。

陷阱: 用箭头函数定义方法

function Period (hours, minutes) {
  this.hours = hours;
  this.minutes = minutes;
}
Period.prototype.format = () => {
  console.log(this === window); // => true
  return this.hours + ' hours and ' + this.minutes + ' minutes';
};
var walkPeriod = new Period(2, 30);
walkPeriod.format(); // => 'undefined hours and undefined minutes'

由于format是一个箭头函数,并且它定义在全局上下文(最顶层的作用域)中,它的this指向window对象。即使format作为方法在一个对象上被调用如walkPeriod.format(),window仍然是这次调用的上下文。之所以会这样是因为箭头函数有静态的上下文,并不会随着调用方式的改变而改变。

函数表达式可以解决这个问题,因为一个常规的函数会随着调用方法而改变其上下文:

function Period (hours, minutes) {
  this.hours = hours;
  this.minutes = minutes;
}
Period.prototype.format = function() {
  console.log(this === walkPeriod); // => true
  return this.hours + ' hours and ' + this.minutes + ' minutes';
};
var walkPeriod = new Period(2, 30);
walkPeriod.format(); // => '2 hours and 30 minutes'

结论

因为函数调用对this有最大的影响,从现在起,不要再问你自己:

this是从哪里来的?

而要问自己:

函数是怎么被调用的?

对于箭头函数,问问你自己:

在这个箭头函数被定义的地方,this是什么?

这是处理this时的正确想法,它们可以让你免于头痛。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容