前端知识点---this的用法 , this动态绑定(Javascript)

this动态绑定 , this的用法

在JavaScript中，this 是一个非常重要但是呢 也让人难搞明白的关键字。
**它的值不是在编写代码时静态确定的，而是在代码运行时动态绑定的。**这非常重要

下面讲一下它 .

01. 全局作用域下的 this

在全局作用域中（即不在任何函数中），this 通常指向全局对象：

在浏览器中，this 指向 Window 对象。
在Node.js环境中，this 指向 global 对象。

console.log(this); // 浏览器中输出 Window

例子二

02. 函数中的 this

this 在函数中的行为取决于调用的方式。

2.1 普通函数调用

当函数以普通方式调用时，this 默认指向全局对象（在严格模式下是 undefined）。

function foo() {
  console.log(this);
}
foo(); // 浏览器中，this 指向 window

在严格模式下：

"use strict";
function foo() {
  console.log(this);
}
foo(); // undefined

2.2 构造函数调用

当一个函数用作构造函数（通过 new 关键字调用 new关键字创建一个新的对象实例，并将该对象与构造函数绑定）时，this 指向新创建的实例对象 , 用于将属性和方法绑定到该对象。

function Person(name) {
  this.name = name;
}

const person = new Person('Bob');
console.log(person.name); // 输出 'Bob'

function Person(name, age) {
  this.name = name; // this 绑定到新创建的对象
  this.age = age;
}

const person1 = new Person('Alice', 25);
console.log(person1); // Person { name: 'Alice', age: 25 }

function Car(brand, model) {
  this.brand = brand; // 将 brand 绑定到新对象
  this.model = model; // 将 model 绑定到新对象

  this.getDetails = function() {
    return `${this.brand} ${this.model}`;
  };
}

const car1 = new Car('Toyota', 'Corolla');
console.log(car1.getDetails()); // Toyota Corolla

2.3 箭头函数中的 this

箭头函数不会创建自己的 this，它会继承来自其定义位置的外层上下文的 this。

const obj = {
  name: 'Alice',
  arrowFunc: () => {
    console.log(this.name);
  }
};
obj.arrowFunc(); // undefined, 因为箭头函数中的 this 绑定的是全局对象
而普通函数会绑定到调用它的对象：


const obj = {
  name: 'Alice',
  normalFunc: function() {
    console.log(this.name);
  }
};
obj.normalFunc(); // 输出 'Alice'
使用箭头函数时，this 会继承自外层作用域：

03对象方法调用

当函数作为对象的方法调用时，this 指向调用该方法的对象。

const obj = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName(); // 输出 'Alice'

当 this 在对象的方法中使用时，this 指向调用该方法的对象。

const obj = {
  name: 'Alice',
  getName() {
    return this.name;
  }
};

console.log(obj.getName()); // 输出 "Alice"

更复杂的例子：

const obj1 = {
  name: "Bob",
  greet: function() {
    console.log(this.name);
  }
};

const obj2 = {
  name: "Charlie"
};

obj2.greet = obj1.greet;

obj2.greet(); // "Charlie"

方法调用时，this 指向调用该方法的对象。

04. 事件处理中的 this

在事件处理函数中，this 通常指向触发事件的 DOM 元素。

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // 输出被点击的按钮元素
});

05. 动态绑定的方式

JavaScript 提供了三种显式绑定方法来改变 this 的值：(然而这仅仅是显式绑定)

详细了解:

this四大绑定方式

5.1 call 方法

call 允许你显式指定 this 的值，并立即调用函数。

function greet() {
  console.log(this.name);
}

const person = { name: 'Alice' };
greet.call(person); // 输出 'Alice'

5.2 apply 方法

apply 与 call 类似，只是它接收参数的方式不同：apply 接收一个参数数组。

greet.apply(person); // 输出 'Alice'

5.3 bind 方法

bind 方法与 call 和 apply 不同，它返回一个新的函数，该函数的 this 值绑定到指定的对象。

const boundGreet = greet.bind(person);
boundGreet(); // 输出 'Alice'

06类中的 this

在类的实例方法中，this 指向实例对象：

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

const dog = new Animal('Dog');
dog.speak(); // Dog makes a sound.

07. 总结