this的指向问题事件点击this 的指向问题在构造函数里面的this的指向问题使用构造函数来继承

本文链接：https://blog.csdn.net/red_HTML/article/details/126597315

这篇博客探讨了JavaScript中函数调用的不同方式，包括call(), apply()和bind()如何影响this的指向。通过示例展示了在普通函数、对象方法、构造函数和事件处理中的this行为。同时，文章还涉及了构造函数的继承和原型链上的this指向。

摘要由CSDN通过智能技术生成

call():传入两个参数，第一个参数时this的指向，第二个参数时是指传入的参数列表

apply() 传入两个参数第一个参数时this指向，第二个参数是传入参数（以数组的形式）

bind()传入两个参数

        function fun(a, b) {
            console.log(this)//Window
            console.log(a, b)//undefined undefined
        }
        var person = {
            uname: '王五'
        }
        fun.call(person, 1, 2)
        fun(1, 2)
        console.log("-------------")
        fun.apply(person, [1, 2])
        fun(2, 3)
        console.log("-------------")
        fun.bind(person, 1, 2)

this指向 Window

        function test() {
            console.log(this)
        }
        test()

        // // 在定时器里面
        // setInterval(function () {
        //     console.log(this)
        // }, 2000)

事件点击this 的指向问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="div0">button</button>
    <script>
        // 事件绑定
        document.getElementsByClassName("div0")[0].onclick = function () {
            console.log("si" + this)
        }
    </script>
</body>

</html>

在构造函数里面的this的指向问题

// 在构造函数里面
        function person() {
            console.log("yi" + this)
            this.sayHello = function () {
                console.log("er" + this)
            }
        }
        person() //yi[object Window]
        var p0 = new person() //yi[object Object]
        p0.sayHello() // er[object Object]

        // 3.在原型对象中的this的指向对象
        person.prototype.Eat = function () {
            console.log("san" + this)
        }
        p0.Eat()

使用构造函数来继承

// 构造函数的继承
        function Student(id, name) {
            this.id = id
            this.name = name
            // this.age = age
        }
        var stu1 = new Student(001, "张三", 12)
        // alert(stu1.id)
        function theacher(id, name, age) {
            // this.id = id
            this.age = age
            Student.apply(this, [id, name])
        }
        var thea = new theacher("002", "张四", 23)
        console.log(thea.id)
        console.log(thea.name)
        console.log(thea.age)