<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box,
.box1 {
width: 100px;
height: 100px;
background: #09f;
position: relative;
left: 0;
transition: 1s;
}
</style>
<body>
<div class="box"></div>
<div class="box1"></div>
<script>
let box = document.querySelector('.box');
box.onclick = move;
let box1 = document.querySelector('.box1');
box1.onclick = move;
function move() {
this.style.left = '100px';
console.log(this)
//
}
// move();
// 函数自调用指向的是window
// 这只是非严格模式下
// 严格模式下是undefined;
// 严格模式下window.move() 指向window
var abc = 10;
// 函数或者变量都是存在在window下的
// 变量放在obj里面管理起来,减少内存消耗
var obj = {
a: 10,
b: function () {
console.log(this);
},
c:{
fn:function(){
console.log(this);
}
}
}
obj.b(); //指向obj 这个时候函数只指向上一层object
window.obj.b(); //指向obj 这个时候函数只指向上一层object
obj.c.fn();
var abc = obj.c.fn;
abc();
// window.abc(); 调用环境为全局
// 函数内部的this,只有在被调用的时候才知道其指向
// 上面这种调用是把c下的fn取出来放在window上面
// 所以这里是window
</script>
</body>
</html>
这里涉及到了事件内部和全局window