this指向
- 全局上下文：
在全局作用域中，即在任何函数外部，this 指向全局对象（浏览器环境中为 window 对象，Node.js 环境中为 global 对象）。
- 函数内部：
在函数内部，this 的指向可能有所不同，取决于函数的调用方式：
作为函数调用：当函数作为普通函数调用时，this 指向全局对象（严格模式下为 undefined）。
作为对象方法调用：当函数作为对象的方法调用时，this 指向调用该方法的对象。
使用 call、apply 或 bind 方法显式绑定 this：可以使用这些方法来显式指定函数执行时的 this 指向。
- 构造函数：
当函数被用作构造函数来创建新对象时，this 指向新创建的实例对象。
- 事件处理函数：
在事件处理函数中，this 指向触发事件的元素。
- 箭头函数：
箭头函数不会绑定自己的 this 值，而是继承外部作用域的 this 值。
1. this代表所在function被哪一个对象调用了，那么这个this就代表这个对象。 2. 如果没有明确的调用对象，则代表window function fn(){ alert(this); } fn(); window //没有明确对象，所以代表 document.onclick = fn; document var obj = {fn: fn} obj.fn(); obj 'use strict'; a = 3; alert(a); function fn(){ 'use strict'; alert(this); undefined } fn();
强行改变 this 指向
修改上下文中的this指向方法 (函数的方法，改变的是函数内部的this指向)
- call(对象,参数1,参数2,……) ：返回对象后,这个函数立即运行
- apply(对象,数组或arguments) ： 返回对象后,这个函数立即运行
- bind(对象,参数1,参数2,……) ： 返回函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" name="" id="txt"> <div id="box"></div> <script> var div = document.querySelector('#box'); var inp = document.querySelector('#txt'); document.onclick = function(){ alert(this); //document setTimeout(function(){ alert(this); //window,想让this指向document }.bind(this), 3000); //document } function fn(){ alert(this); } fn.call(div); // div fn.apply(document); //document fn.bind(inp)(); // input </script> </body> </html>
