浅谈this的四种绑定方式

再一次进行对this知识点的复习，每一次都是温故知新的过程。
这次对于this的学习基于《你所不知道的JavaScript》这本书，算是对于书中的知识做一个总结。

首先要明确的是一般情况下，this不是函数被定义时绑定，而是函数被调用时被绑定

那么函数中的this有四种绑定方式：

function foo() {
  console.log(this.a);
}
var a = 1;
foo() // 1

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

其实不能讲foo这个函数属于obj对象，但是foo函数被调用时的落脚点的确是指向obj对象，当函数引用有上下文对象时，隐式绑定就会把函数调用中的this绑定到这个上下文对象；

对象属性引用链中只有最顶层或者说最后一层会影响调用位置

var foo = function () {
  console.log(this.a)
}
var obj2 = {
  a: 2
  foo: foo
}
var obj1 = {
  a: 1
  obj2: obj2
}
obj1.obj2.foo() // 2

对于应用隐式绑定方式绑定this经常导致的一个情况是隐式丢失this

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
}
var bar = obj.foo;
var a = 'global';
bar() // 'global'

针对这种情况，虽然bar是obj.foo的一个引用，但是实际上它引用的是foo函数本身，此时bar（）其实是一个不带任何修饰的函数调用，应用了默认绑定；

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

function Foo(a) {
  this.a = a;
  console.log(this.a);
}
var obj = new Foo(2);
console.log(obj.a) // 2

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。