首页 > 编程语言 >JavaScript(二十二)——JavaScript this 关键字

JavaScript(二十二)——JavaScript this 关键字

时间:2024-08-05 22:26:49浏览次数:15  
标签:二十二 绑定 函数 firstName person 对象 JavaScript 示例 关键字

目录

方法中的 this

单独使用 this

函数中使用 this(默认)

函数中使用 this(严格模式)

事件中的 this

对象方法中绑定

显式函数绑定


面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

在方法中,this 表示该方法所属的对象。

如果单独使用,this 表示全局对象。

在函数中,this 表示全局对象。

在函数中,在严格模式下,this 是未定义的(undefined)。

在事件中,this 表示接收事件的元素。

类似 call() 和 apply() 方法可以将 this 引用到任何对象。

方法中的 this

在对象方法中, this 指向调用它所在方法的对象。

示例:

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 指向了 person 对象。

因为 person 对象是 fullName 方法的所有者。

单独使用 this

单独使用 this,则它指向全局(Global)对象。

严格模式下,如果单独使用,this 也是指向全局(Global)对象

示例:

<!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>

    <p id="demo"></p>

</body>
<script>
    "use strict";
    var x = this;
    document.getElementById("demo").innerHTML = x;
</script>


</html>

运行结果:

函数中使用 this(默认)

在函数中,函数的所属者默认绑定到 this 上。

在浏览器中,window 就是该全局对象为 [object 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>

    <p id="demo"></p>

</body>
<script>
    document.getElementById("demo").innerHTML = myFunction();
    function myFunction() {
        return this;
    }
</script>


</html>

运行结果:

函数中使用 this(严格模式)

严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined

示例:

<!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>

    <p id="demo"></p>

</body>
<script>
    "use strict";
    document.getElementById("demo").innerHTML = myFunction();
    function myFunction() {
        return this;
    }
</script>


</html>

运行结果:

事件中的 this

在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素

实例:

<!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 onclick="this.style.display='none'">点我后我就消失了</button>

</body>
</html>

运行结果:

对象方法中绑定

示例:

var person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

this 是 person 对象,person 对象是函数的所有者

示例:

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this.firstName 表示 this (person) 对象的 firstName 属性

显式函数绑定

在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。

bind也是,不过bind用于返回一个新函数,该函数调用时会将原函数的this值绑定为bind的第一个参数值。bind通常用于创建一个新的,永久绑定了特定this值的函数,比如事件处理函数

示例:

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法

标签:二十二,绑定,函数,firstName,person,对象,JavaScript,示例,关键字
From: https://blog.csdn.net/m0_62701594/article/details/140937825

相关文章

  • abstract关键字以及与public,final,static的关系 day09
    多态程序中,第一大前提要有继承关系。但是呢,比如上午写的动物案例,我们将狗,猫,猪这些具体的动物分别编写了一个类进行对应这都是没问题的。但是呢,动物本身应该是一个抽象的概念,我们在现实生活中其实是找到不到Animal的实例的。具体的事物,我们就可以使用java代码......
  • JavaScript 中的闭包和事件委托
    包(Closures)闭包是JavaScript中一个非常强大的特性,它允许函数访问其外部作用域中的变量,即使在该函数被调用时,外部作用域已经执行完毕。闭包可以帮助我们实现数据的私有化、封装和模块化,使代码更简洁、易读和可维护。闭包的定义简单来说,闭包是指有权访问另一个函数作......
  • Java并发—synchronized关键字的应用
    目录1、synchronized适用场景2、synchronized的原理3、synchronized的锁升级4、synchronized的注意事项5、总结synchronized是Java中用于实现线程同步的关键字。它可以在方法级别或代码块级别使用,以确保同一时刻只有一个线程可以访问被同步的代码段。synchronized通......
  • params, ref ,out, in关键字以及构造函数
    1.params(paramerters )是可变参数,参数个数不固定 2.可变参数不能在必填写参数前边,且可变参数只能有一个(把参数传递给一个数组,参数个数也可以不固定,但不包含0)publicstaticintSum(paramsint[]nums){intsum1=0;//for循环在循环中可以更改目标,而for......
  • 我可以将 Python 与 javascript 结合起来用于网站或应用程序吗
    我不知道如果j添加Python和javascript可以吗我尝试过。但决定在继续之前询问一下是否可以继续但是如果我只使用javascript还是只使用python会更好吗?我只需要建议或答案将Python与Javascript结合用于网站或应用程序不仅完全可行,而且也是一种非常常见的做法!二者......
  • Python 网络抓取与请求和美丽的汤被需要 javascript 阻止
    我正在尝试从网站上抓取文本。我使用简单的代码:requests.get(url_here)。我的代码直到最近才有效。现在,当我使用请求时,我收到一条消息,而不是获取网站的文本:“该网站需要启用JavaScript!您使用的浏览器不支持JavaScript,或者已关闭JavaScript。“我已验证我的浏览器确实......
  • 8.初始JavaScript
    初始JavaScript1.什么是JavaScriptjavascript能做什么: 1.网页的动态效果 2.前后端交互--数据提交(弹窗/输入框/监听实践) 3.进阶--前端高级框架(Vue,jsReact.jsNode.js) 2.JavaScript的组成js的书写方式和css类似,也有内部写法和外部写法 内部写法和html中,写一对script标......
  • 【Python系列】深入理解 Python 中的 `nonlocal` 关键字
    ......
  • final关键字day08
    /*父类中的除了非私有的,非静态方法,构造方法,难道其他的方法都可以让子类重写吗?如果某一个方法不想子类重写,只能让子类使用java提供了以关键字:final最终的,不可变可以修饰类,成员变量,成员方法*//*final:最终的,不可变的可以修饰类,成员变量,成员方法......
  • ECharts与数据可视化:如何高效使用JavaScript实现复杂图表
    ECharts与数据可视化:如何高效使用JavaScript实现复杂图表大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!在现代网页开发中,数据可视化已成为展示复杂数据的关键手段。ECharts是一个强大的JavaScript图表库,可以帮助开发者轻松实现各种复杂的图表。本文......