菜鸟教程个人学习心得03_JavaScript的this用法

最新推荐文章于 2022-05-17 20:22:42 发布

旧梦半岛

最新推荐文章于 2022-05-17 20:22:42 发布

阅读量148

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_48459574/article/details/108705410

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript的this用法

方法中使用this：
示例代码：在对象的方法中使用this，如下面代码中在student这个对象的showMessage方法中使用this，则this指向这个方法的对象，即student。

<!-- 方法中使用this -->
    <p>方法中使用this，this指向的是该方法所属于的对象</p>
    <p id="p1"></p>
    <script>
        // 创建对象
        var student = {
            name : "张三",
            sex : "男",
            age : "17",
            // 创建对象方法showMessage
            showMessage : function(){
                // 这里的this是直接只想student这个对象的，因此this.name是指向"张三",显示的也是张三。
                return "姓名：" + this.name + ",<br>性别：" + this.sex + ",<br>年龄：" + this.age; 
            }
        }
        // 调用对象方法，将信息显示在id为p1的段落标签内
        document.getElementById("p1").innerHTML = student.showMessage();
    </script>

运行截图：
在这里插入图片描述

单独使用this：
示例代码：单独使用this，下面例子将this单独使用，将其赋值给x，则this指向的是全局变量，即为window，显示的结果就是[object Window]

 <!-- 单独使用this -->
    <p>单独使用this，则this指向的是全局对象，浏览器的全局对象为window，即为[object Window]</p>
    <p id="p2"></p>
    <script>
        // 单独使用this，将其赋给x，则指向的是全局变量，window就是该全局对象为[object Window]
        var x = this; 
        document.getElementById("p2").innerHTML = x ; 
    </script>

运行截图：
在这里插入图片描述
严格模式下，this单独使用也是指向全局对象

函数中使用this：
示例代码：在函数中使用this，函数的所属者自动绑定this，相当于在对象中使用this，参考第一种情况，this在对象student的函数中使用，this指向的是student这个对象，因为函数的所属者是student，在这里，由于函数的所属者是window，所以this绑定的也是window，显示的结果是[object Window]

    <!-- 在函数中使用this -->
    <p>在函数中使用this，this自动绑定函数的所属者</p>
    <p id="p3"></p>
    <script>
        function thisFunction() {
            return this;
        }
        document.getElementById("p3").innerHTML = thisFunction();
    </script>

运行截图：
在这里插入图片描述

严格模式中，函数使用this：
示例代码：严格模式下，由于严格模式不允许默认绑定，所以this不能指向全局对象window，即在严格模式下，函数使用this，是没有自动绑定的，因此是undefined。

    <!-- 严格模式下，函数使用this -->
    <p>严格模式下，函数使用this，this指向的是undefined</p>
    <p id="p4"></p>
    <script>
        "use strict"
        function strictThisMyfunction(){
            return document.getElementById("p4").innerHTML = this;
        }
        strictThisMyfunction();
    </script>

运行截图：
在这里插入图片描述

事件中使用this：
示例代码：在时间中使用this，this指向的是接收事件的html元素，这里，this指向的是p元素和button元素，然后通过元素.style。display和color分别改编html元素的样式。

    <!-- 事件中使用 -->
    <p>在事件中使用this，this指向的是接收事件的html元素</p>
    <!-- 定义一个按钮，点击后按钮消失 -->
    <button onclick="this.style.display='none'">点击按钮后按钮消失</button>
    <!-- 定义一个文本，鼠标滑过后，字体变大，颜色变红 -->
    <p onmousemove="this.style.color='red'" onmouseout="this.style.color='black'">鼠标滑过后，颜色变红</p>

运行截图：
在这里插入图片描述
点击后，按钮消失，鼠标滑动过字体时，字体变红：

对象方法中绑定this：
示例代码：在对象方法中使用this，this指向的是方法的所有者，这里实在showSpeed方法中使用到this，showSpeed方法的所有者是car，因此this指的是car：

<!-- 在对象的方法中使用this -->
    <p id="p5"></p>
    <script>
        // 定义一个对象
        var car = {
            carName: "宝马",
            color: "白色",
            speed: "180km/h",
            showSpeed: function () {
                return "速度为:" + this.speed;
            }
        }
        document.getElementById("p5").innerHTML = car.showSpeed();
    </script>

运行截图：
在这里插入图片描述

显示函数中绑定this：
首先，先看两个例子：
例子1：全局定义age变量，并且赋值为17，在对象中有定义了一个age变量，赋值为this.age，因为在对象中使用，this指向的是对象person的所属者，也就是window，而在全局对象中已经定义了age的值，所以可以获取得到age，并且age的值为17；

    <p>在对象中使用this，this指向的是该对象的全局变量，即window，因此访问得到可以获得age的值17</p>
    <p id="p6"></p>
    <!-- 显式函数绑定 -->
    <script>
        var name = "李四";
        var age = 17;
        var person = {
            name: "王五",
            age: this.age,
        }
        // 由于这是在对象中使用this，this指向的是对象的所有者，即全局变量，全局定义了一个age，因此调用得到age=17；
        document.getElementById("p6").innerHTML = person.age;
    </script>

运行截图：
在这里插入图片描述
例子2：在全局定义了变量age，并且赋值为17，在对象的函数方法中使用this.age，this指向的是函数的所属者，即对象person，但因为person中并没有定义age的值，因此获取不到age的值。

    <p>在对象的方法中使用this，指向的是方法的所有者，即person，因为person没有顶一age，因此无法获取age的值</p>
    <p id="p7"></p>
    <!-- 显式函数绑定 -->
    <script>
        var name = "李四";
        var age = 17;
        var person = {
            name: "王五",
            showAge: function () {
                return this.age
            }
        }
        // 调用对象person的方法
        document.getElementById("p7").innerHTML = person.showAge();
    </script>
    <hr>

实验截图：
在这里插入图片描述

对象的三个重要方法：

call()、apply()、bind() 都是用来重定义 this 这个对象的！

call()、apply()和bind()方法：
示例代码：

    <p id="p1"></p>
    <script>
        var name = "张三";
        var age = 17;
        var person1 = {
            name: "李四",
            age: this.age,
            showMessage: function () {
                return document.getElementById("p1").innerHTML = "姓名：" + this.name + "<br>年龄：" + this.age
            }
        }
        var person2 = {
            name : "王五",
            age : "18"
        }
        person1.showMessage();
        //person1.showMessage.call(person2)
    </script>

运行截图：
在这里插入图片描述
使用call()重定义this对象：

    <p id="p1"></p>
    <script>
        var name = "张三";
        var age = 17;
        var person1 = {
            name: "李四",
            age: this.age,
            showMessage: function () {
                return document.getElementById("p1").innerHTML = "姓名：" + this.name + "<br>年龄：" + this.age
            }
        }
        var person2 = {
            name : "王五",
            age : "18"
        }
        //person1.showMessage();
        person1.showMessage.call(person2)
    </script>

运行截图：
在这里插入图片描述
apply()的用法与call用法相同，不多加赘述；
bind()用法：

    <p id="p1"></p>
    <script>
        var name = "张三";
        var age = 17;
        var person1 = {
            name: "李四",
            age: this.age,
            showMessage: function () {
                return document.getElementById("p1").innerHTML = "姓名：" + this.name + "<br>年龄：" + this.age
            }
        }
        var person2 = {
            name : "王五",
            age : "18"
        }
        //person1.showMessage();
        // person1.showMessage.call(person2)
        person1.showMessage.bind(person2)();
    </script>

运行截图：
在这里插入图片描述
区别在于bind使用时要在后面加括号，可以理解为函数调用bind()。

call()、apply()和bind()的传参方法：
示例代码：

    <p id="p1"></p>
    <script>
        var name = "张三";
        var age = 17;
        var person1 = {
            name: "李四",
            age: this.age,
            showMessage: function (sex) {
                return console.log("姓名：" + this.name + "   年龄：" + this.age + "   性别：" + sex);
            }
        }
        var person2 = {
            name : "王五",
            age : "18"
        }
        // person1.showMessage();
        // person1.showMessage.call(person2)
        // person1.showMessage.bind(person2)()
        person1.showMessage.call(person2,'男')
        person1.showMessage.apply(person2,['女'])
        person1.showMessage.bind(person2,['男'])()
        person1.showMessage.bind(person2,'女')()
    </script>