1.全局环境输出this
script标签里面直接访问this是window
<!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>
<body>
<script>
console.log(this); //Window
</script>
</body>
</html>
隐式绑定
2.对象的方法输出this
这是工作中最常见的，this在对象的方法中被调用，实际上this是指向这个方法的对象。
<!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>
<body>
<script>
let dog = {
name:"狗",
sey(){
console.log(this.name); //狗
}
}
dog.sey()
//引申一下this 的由来。 上面的代码等同于下面的代码，为了不多次重复写这个对象的名字，所以用this替代了。所以就有上面的this 的写法了
</script>
<script>
let dog = {
name:"狗",
sey(){
console.log(dog.name); //狗
}
}
dog.sey()
</script>
</body>
</html>
3.全局函数输出this
默认绑定
截屏2022-05-11 上午12.43.55.png
<!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>
<body>
<script>
function abc() {
console.log(this);
}
abc()
//等同于 把abc函数直接挂载到了window上了 ,根据上面的第2点，this在对象的方法中被调用，实际上this是指向这个方法的对象。所以this指向的是window
function abc() {
console.log(this); // window
}
window.abc()
</script>
</body>
</html>
4.DOM事件输出this
指向dom对象
<!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>
<body>
<button>按钮</button>
<script>
let btn = document.querySelector("button")
btn.onclick = function (){
console.log(this); //<button>按钮</button>
}
</script>
</body>
</html>
构造函数绑定
5.构造函数中的this
截屏2022-05-11 上午1.00.48.png
<!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>
<body>
<script>
function Fn(){
this.name = "haha";// new 会创建对象，将构造函数中的this指向创建出来的对象，所以this指向fn
//构造函数是用来创建对象的
}
let fn = new Fn();
console.log(fn);
</script>
</body>
</html>
6.new关键字做了什么 (不详细，没包含原型的指向)
1.在函数内部创建了一个空对象
2.通过this指向把函数的方法和属性给新创建的对象
3.返回这个创建的对象
7.箭头函数中的this
<!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>
<body>
<script>
var age = '88'; //注意如果是var定义的变量，window上就会自动添加这个变量，如果是let定义这个变量，window并不会自动添加这个变量
let cat = {
age :"99",
seyname(){
setTimeout( function() {
console.log(this.age); //88
}, 1000);
}
}
cat.seyname()
</script>
<script>
let cat = {
name1 :"hihi",
seyname(){
setTimeout(() => {
console.log(this.name1); //hihi
}, 1000);
}
}
cat.seyname()
</script>
</body>
</html>
硬绑定（想绑定谁就绑定谁）
call 和apply和bind的绑定this
注意（apply的参数是数组）（bind不自动执行）
<!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>
<body>
<script>
let girlName = {
name : "小红",
seyName(){
alert(this.name)
}
}
let girlName1 = {
name : 'xiaobai'
}
let girlName2 = {
name : 'xiaolan'
}
//可以通过call，apply和bind 给对象的方法到this指定绑定到某个对象上
girlName.seyName.call(girlName1)
girlName.seyName.call(girlName2)
</script>
</body>
</html>
