Js 的 this (上下文)

Scroll Down

Js 的 this(上下文)

this 是什么?

控台输入以下代码

console.log(this);
console.log(this === window);

这里的this是window对象。

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

obj.foo();

这里的thisobj

function test() {
  console.log(this);
}

test();

test() 中打印this,js会先寻找方法this是否被定义,如未定义就会引用全局,所以打印出的thisWindow对象, 尝试以下代码:

  • 例一:
function testTwo() {
  var this = 123;
  console.log(this);
}

testTwo();

报错

Uncaught SyntaxError: Unexpected token 'this'

  • 例二:
function testThree() {
  this = 123;
  console.log(this);
}

testThree();

报错

Uncaught SyntaxError: Invalid left-hand side in assignment

总结
面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

  • 在方法中,this 表示该方法所属的对象。
  • 如果单独使用,this 表示全局对象。
  • 在函数中,this 表示全局对象。
  • 在函数中,在严格模式下,this 是未定义的(undefined)。
  • 在事件中,this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

ps: 以上总结来自于菜鸟教程,我自己是总结不出的😂。

如何改变this

从上面的代码中可以看出this是无法直接赋值的,回到刚开始的代码:

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

obj.foo();

以上的代码,打印出的thisobj对象, 那如何使用全局的‘this’呢?

三种方法:

  • call
var obj = {
  foo: function (one, two, three) {
    console.log(this);
    console.log(this === window);
  }
}

obj.foo.call(window, 1, 2, 3);
  • apply
var obj = {
  foo: function (one, two, three) {
    console.log(this);
    console.log(this === window);
  }
}

obj.foo.apply(window, [1, 2, 3]);
  • bind
var obj = {
  foo: function (one, two, three) {
    console.log(this, one, two, three);
    console.log(this === window);
  }
}

var myBoundFoo = obj.foo.bind(window);
myBoundFoo(1, 2, 3);

总结

  • call、apply 用法相似,都是直接传参调用。call的参数挨个传入,apply的参除了window,其他参数都放入数组,以数组的方式传入。
  • bind与call、apply不同,它不会调用foo方法,而是自己返回一个方法,通过调用此方法往里传参。

this的使用

参考菜鸟教程

支付宝 微信