1. 全局作用域下的this:指的是window,全局指的是不在任何{}里面的this。
<script>
console.log(this) //全局的this,输出为window
</script>
2. 事件处理函数的this:该事件由谁触发,就指向谁,这里onclick事件是由div对象触发,所有this指向div(前提是在非箭头函数清空下)。
<script>
div.onclick=function(){
console.log(this) //不是全局的this,这是事件处理函数中的this,该事件由谁触发,就指向谁,这里onclick事件是由div对象触发,所有this指向div(前提是在非箭头函数清空下)
}
</script>
注意:<div onclick="console.log(this)"></div>这种写法,输出的this指的是<div onclick="console.log(this)"></div>这个标签。
而<div onclick="(function(){console.log(this)})()"></div>这种写法,输出的this指的是window。
3. 函数执行的this(非箭头函数):包括在非node环境下运行的this,和node环境运行的this(node环境下的运行的this又包括在nodejs代码文件中的this和node运行环境终端命令行中的this)。
<script>
//1.在非node且非严格模式下,函数的this指向window
function fn(){
console.log(this) //在非node且非严格模式下,函数的this指向window
}
fn() //输出为window
//2.在非node且严格模式下,函数的this指向undefined
function fn(){
"use strict"
console.log(this) //在非node且严格模式下,函数的this指向undefined
}
fn() //输出为undefined
window.fn() //输出为window
//3.在非node且非严格模式下,函数的call调用,修改了this指向
function fn(m,n){
console.log(this.a,m,n)
}
fn.call((a:1),2,3) //fn.call(参数1,参数2,参数3),会调用fn函数,并call将fn函数里面的this修改指向为参数1,参数2,参数3是fn函数的实参。
//4.在非node且非严格模式下,函数的bind调用,修改了this指向
function fn(m,n){
console.log(this.a)
}
var fn1=fn.bind({a:2 }) //这步不执行fn函数,而是返回fn1是和fn一模一样的函数,并修改this的指向为bind的第一个参数,注意bind只能修改一次,即var fn2=fn1.bind({a:3})这种写法是无法修改this指向{a:3},因为fn1是已经修改过的this执行,但是可以var fn2=fn.bind({a:3})修改this指向{a:3}
console.log(fn1)
</script>
{
//2. 配置了node环境,在node.js代码文件中的this
console.log(this===modele.exports) //返回true,即在node.js代码中运行node node.js文件,这里的this执行的是node.js文件默认导出的对象{}
}
{
//3. 配置了node环境,在node.js文件的终端命令行中的this
node //在终端先输入node,在输入console.log(this)
console.log(this) //这里的this指向的是global。
}
4. 函数执行的this(箭头函数):包括函数内外this执行一致。注意,bind和call无法修改箭头函数的this指向。
var fn=(){
console.log(this)
}
fn.call({a:1}) //call无法修改箭头函数的this指向,所有,这里仍然this指向window
5. 构造函数实例化的this:this指向实例化对象。
function Fn(){
this.a=1; //这个this指向实例化对象,如f
//return 1; //return 返回的非n对象(如 return 1),那么实例化结果,即console.log(f)输出为{a:1}
//return {} //return 返回的非null对象(如 return {}),那么实例化结果就是返回出的对象,即console.log(f)输出为{}
}
var f=new Fn()
console.log(f)
var obj={
m:1,
n:2,
get sun(){
return this.n+this.m
},
set sun(val){ //obj对象里面的get和set里面的里面的this指向obj对象
this.n=val/2;
this.m=val*2;
}
}