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>

前端js中的this