Java Script-this、this指向

1.什么是this

在 JavaScript 中，this 是一个关键字，它指向当前执行代码的对象。this 的值取决于当前代码在哪里执行，可以是全局作用域、函数作用域、对象的方法中。

在全局作用域中，this 指向全局对象 window。

在函数作用域中，this 的值取决于函数是如何调用的。如果函数是作为普通函数调用的，this 指向全局对象 window；如果函数是作为对象的方法调用的，this 指向该对象；如果函数使用 call、apply 或 bind 方法调用，可以指定 this 的值。

在对象的方法中，this 指向该对象。

需要注意的是，this 的值是动态的，它随着代码的执行而变化。因此，在编写 JavaScript 代码时，需要注意 this 的使用方式，以确保代码的正确性和可读性。

2.this的多种用法

1.1 作为函数的参数

在函数中，this 可以作为参数传递进去，用于在函数内部引用外部的对象

function myFunction(obj) {
  console.log(obj);
}

var obj = {name: 'John'};
myFunction(obj);

1.2 作为函数的返回值

在函数中，this 可以作为返回值返回，返回当前对象

function myFunction() {
  return this;
}

var obj = {name: 'John'};
var result = myFunction.call(obj);
console.log(result);

1.3 作为对象的属性

在对象中，this 可以作为属性名使用，用于定义对象的属性

var myObj = {
  name: 'John',
  age: 30,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name + ', and I am ' + this.age + ' years old.');
  }
};

myObj.sayHello();

1.4 作为对象的方法

在对象中，this 可以作为方法名使用，用于定义对象的方法

var myObj = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name + '.');
  }
};

myObj.sayHello();

1.5 作为全局对象

在全局作用域中，this指向全局对象windows

console.log(this); // 输出全局对象 window

1.6 作为构造函数的this

在使用 new 关键字创建对象时，this 指向新创建的对象

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

var john = new Person('John');
console.log(john.name); // 输出 John

1.7 作为事件处理函数的this

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

var myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
  console.log(this); // 输出触发事件的元素
});

3.call()，apply()，bind() 方法

1.1 call()

在 JavaScript 中，call() 方法是 Function 对象的一个方法，用于调用一个函数，并将指定的对象作为函数中 this 关键字的值。

<button class="btn">点击</button>

         call方法
        var btn = document.querySelector('.btn');
        function show(arr1,arr2,arr3){
            console.log(arr1,arr2,arr3);
        }
        btn.onclick = function(){
            show.call(this,1,2,3);
        }

1.2 apply()

在 JavaScript 中，apply() 方法是 Function 对象的一个方法，用于调用一个函数，并将一个类数组对象作为函数中 this 关键字的值，同时传递一个参数列表。

<button class="btn">点击</button>

        var btn = document.querySelector('.btn');
        function show(arr1,arr2,arr3,arr4){
            console.log(arr1,arr2,arr3,arr4);
            // console.log(this);
        }
        btn.onclick = function(){
            show.apply(this,[1,2,3,4]);//this指向btn
        }

1.3 bind()

bind()方法是JavaScript中的一个函数方法，它返回一个新函数，该函数具有与原始函数相同的函数体和作用域，但是值被绑定到了指定的对象上，同nd（） 调用时预设一些参数

<button class="btn">点击</button>

        var btn = document.querySelector('.btn');
        function show(arr1,arr2,arr3){
            console.log(arr1,arr2,arr3);
        }
        btn.onclick = function(){
            show.bind(this,1,2,3)();//()表示立即执行
        }

1.4 call、apply、bind方法区别

call（）、apply（） 和 bind（） 都是 JavaScript 中用于改变函数执行上下文的方法。

它们的区别如下：

1. 参数的传递方式：

call（） 和 apply（） 方法都是通过将参数作为数组传递给函数来改变函数的执行上下文，而 bind（） 方法则是通过返回一个新函数来改变函数的执行上下文。

1. 参数的个数：

call（） 和 apply（） 方法的参数个数是固定的，必须传入与函数定义时的参数个数相同的参数，而 bind（） 方法可以传入任意个数的参数。

1. 参数的顺序：

call() 和 apply() 方法的参数顺序必须与函数定义时的参数顺序相同，而 bind() 方法的参数顺序可以随意。

1. 返回值：

call() 和 apply() 方法的返回值是函数执行的结果，而 bind() 方法的返回值是一个新函数。

综上所述，call() 和 apply() 方法更适合在函数执行时改变上下文，而 bind() 方法则更适合在函数定义时就绑定上下文。