this指向的判断

16 阅读2分钟

this指向的判断

this的指向可以通过四种方式来进行判断

第一种:函数调用模式

当一个函数不是一个对象的属性时,直接作为函数来调用时,this 指向全局对象。

js
 代码解读
复制代码
function globalFunction() {
  console.log(this); // this 指向全局对象(通常是 window)
}

globalFunction();

第二种:方法调用模式

如果一个函数作为一个对象的方法来调用时,this 指向这个对象。

js
 代码解读
复制代码
var obj = {
  name: "MyObject",
  method: function() {
    console.log(this.name); // this 指向对象 obj
  }
};

obj.method();

第三种:构造器调用模式

如果一个函数用 new 调用时,函数执行前会新创建一个对象,this 指向这个新创建的对象。

js
 代码解读
复制代码
function Person(name) {
  this.name = name;
}

var person1 = new Person("Alice");
console.log(person1.name); // this 指向新创建的对象 person1

第四种:apply 、call 和 bind 调用模式

这三个方法都可以显示的指定调用函数的 this 指向。其中 apply 方法接收两个参数:

一个是 this 绑定的对象,一个是参数数组。call 方法接收的参数

第一个是 this 绑定的对象,后面的其余参数是传入函数执行的参数。也就是说,在使用 call() 方法时,传递给函数的参数必须逐个列举出来。bind 方法通过传入一个对象,返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了使用 new 时会被改变,其他情况下都不会改变。

var person = {
  name: "Bob"
};

function greet(message) {
  console.log(message + ", " + this.name);
}

greet.apply(person, ["Hi"]); // 使用 apply 显式绑定 this 指向 person
greet.call(person, "Hello"); // 使用 call 显式绑定 this 指向 person

var boundGreet = greet.bind(person); // 使用 bind 创建一个新函数并绑定 this
boundGreet("Hey"); // 使用新函数调用,this 仍然指向 person

这四种方式,使用构造器调用模式的优先级最高,然后是 apply、call和 bind 调用模式,然后是方法调用模式,然后是函数调用模式