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>