事件调用环境
谁触发事件,函数里面的this指向的就是谁
<style>
.box1,.box2{
width: 100px;
height: 100px;
background: red;
position: relative;
left: 0;
transition: 1s;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script>
let box1=document.querySelector(".box1")
let box2=document.querySelector(".box2")
box1.onclick=move;
box2.onclick=move;
function move(){
console.log(this) //谁触发事件,函数里面的this指向的就是谁
this.style.left="100px"
}
</script>
</body>
全局环境
浏览器环境指向window
node环境里指向module.exports
函数内部
this最终指向的是调用它的对象
//普通函数直接调用与windows调用
function move(){
console.log(this)
}
move() //Window
window.move() //window
//对象中的函数直接调用与windows调用
var obj={
a:3,
b:function(){
console.log(this)
}
}
obj.b() //{a: 3, b: ƒ}
window.obj.b() //{a: 3, b: ƒ}
函数被多个对象包含,如果函数被最外层对象调用,this指向的也只是它上一级的对象
//多层对象中的函数的this指向
var obj={
a:3,
b:{
fn:function(){
console.log(this)
}
}
}
obj.b.fn() //{fn: ƒ}
window.obj.b.fn() //{fn: ƒ}
//对象中的函数被赋值给另一个变量
var obj={
a:3,
b:{
fn:function(){
console.log(this)
}
}
}
let ab=obj.b.fn
ab() //window
let abc=obj.b
abc.fn() //{fn: ƒ}
构造函数
构造函数中的this指向的是实例对象
function fn(){
this.num=10
console.log(this)
}
var obj=new fn() //fn {num: 10}
console.log(obj) //fn {num: 10}
/*
*new关键字的作用
*1,调用函数
*2,自动创建一个对象
*3,把创建出来的对象和this绑定
*4,如果构造函数没有返回值,隐式返回this对象;如果返回对象this指向返回的对象
*/
function fn(){
this.num=10
}
fn.num=20
fn.prototype.num=30
fn.prototype.method=function(){
console.log(this)
console.log(this.num)
}
var prototype=fn.prototype;
var method=prototype.method;
new fn().method(); //fn {num: 10} 10
prototype.method(); //{num: 30, method: ƒ, constructor: ƒ} 30
method();// windows undefined
箭头函数
箭头函数本身没有this和arguments的,在箭头函数中引用this实际上调用的是上一层作用域的this;
这里强调一下是上一层作用域,对象是不能形成独立的作用域的。
let box1=document.querySelector(".box1")
let box2=document.querySelector(".box2")
box1.onclick=move;
box2.onclick=move;
function move(){
setTimeout(()=>{
this.style.left="200px"
},1000)
}
var obj={
fn:()=>{
console.log(this)
}
}
obj.fn() //window
修改this指向
<body>
<div class="box1"></div>
<div class="box2"></div>
<script>
var box1=document.querySelector(".box1")
var obj = {
fn: function() {
console.log(this)
}
}
obj.fn() //window
obj.fn.call(box1) //<div class="box1"></div>
obj.fn.apply(box1) //<div class="box1"></div>
obj.fn.bind(box1)() //<div class="box1"></div>
</script>
</body>