javascript中this的四种用法

当我们使用JavaScript进行编程时,经常会使用到this关键字。this的含义在不同的情况下有不同的用法。下面将详细讲解Javascript中this的四种用法。

1. 默认绑定

默认绑定是指当我们调用一个函数时,如果该函数中使用了this,而且该函数没有使用任何上下文绑定的方法,那么this的值就是全局对象(在浏览器中就是window对象)。

以下是一个示例代码:

function sayHi() {
  console.log(this.name);
}

var name = "globalName";
var obj1 = {
  name: "object1Name",
  sayHi: sayHi
}

var obj2 = {
  name: "object2Name"
}

sayHi(); // "globalName"
obj1.sayHi(); // "object1Name"
obj1.sayHi.call(obj2); // "object2Name"

在上面的sayHi函数中,没有使用任何上下文绑定的方法,因此在执行函数时,this的值就是默认绑定的值,即全局对象(window)。在调用obj1.sayHi()时,this的值就是obj1,因为函数被一个对象所调用,对象就是上下文,函数的执行上下文被绑定到了该对象上。在调用obj1.sayHi.call(obj2)时,虽然调用了obj1中的sayHi方法,但是使用了call方法将上下文绑定到了obj2上,因此this的值就是obj2

2. 隐式绑定

隐式绑定是指当一个函数被一个对象所调用时,函数中的this关键字将被绑定到该对象。下面是一个示例代码:

var person = {
  name: "Tom",
  sayHi: function() {
    console.log("Hi, my name is " + this.name);
  }
}
person.sayHi(); // "Hi, my name is Tom"

在上面的代码中,调用person.sayHi()时,this的值被绑定到了person对象,因为sayHi函数是由person对象来调用的。

3. 显示绑定

显示绑定是指我们使用callapply或者bind方法来明确指定this关键字的值。下面是一个示例代码:

function sayHi() {
  console.log("Hi, my name is " + this.name);
}

var person1 = {
  name: "Tom",
}

var person2 = {
  name: "Jerry",
}

sayHi.call(person1); // "Hi, my name is Tom"
sayHi.apply(person2); // "Hi, my name is Jerry"
sayHi.bind(person1)(); // "Hi, my name is Tom"

在上面的代码中,我们使用了callapplybind方法将sayHi函数的上下文绑定到person1person2对象上。使用callapply方法,可以直接传递参数给函数,而使用bind方法则需要在后面加()来进行调用。

4. new绑定

当我们使用new关键字来创建一个对象的实例时,this关键字会被绑定到新创建的对象实例上。以下是一个示例代码:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log("Hi, my name is " + this.name + ", I'm " + this.age + " years old.");
  }
}

var person1 = new Person("Tom", 18);
var person2 = new Person("Jerry", 20);

person1.sayHi(); // "Hi, my name is Tom, I'm 18 years old."
person2.sayHi(); // "Hi, my name is Jerry, I'm 20 years old."

在代码中,我们使用new关键字来创建了两个Person对象的实例,this关键字被绑定到了这两个新创建的对象实例上。因此,在调用sayHi方法时,this的值就是这两个对象实例。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript中this的四种用法 - Python技术站

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • js开发中的页面、屏幕、浏览器的位置原理(高度宽度)说明讲解(附图)

    在JavaScript开发中,要理解页面、屏幕和浏览器的位置原理是非常重要的,这是因为在布局和交互方面都与这些位置相关联。下面将从高度和宽度两个方面详细讲解。 页面高度和宽度 在JavaScript中,可以通过下面的代码来获取页面的高度和宽度: var pageHeight = document.documentElement.scrollHeight; v…

    JavaScript 2023年6月11日
    00
  • 详解JavaScript数组过滤相同元素的5种方法

    详解JavaScript数组过滤相同元素的5种方法 在实际应用中,我们经常会使用数组来存储一些数据。有时候我们需要从这些数据中快速过滤出相同元素,这时候就需要用到数组去重的方法。本文将详细介绍5种常见的JavaScript数组去重方法。 1.使用Set ES6中新增了Set对象,可以帮我们去掉数组中的重复项。我们将数组转换为Set对象,再把Set对象转换回数…

    JavaScript 2023年5月27日
    00
  • BOM系列第一篇之定时器setTimeout和setInterval

    BOM系列第一篇之定时器setTimeout和setInterval 一、概述 在前端开发中,我们经常需要在页面中加入一些动态效果,比如定时轮播图、倒计时等等,而这些效果往往需要用到JavaScript定时器。在JavaScript中,我们可以使用setTimeout()和setInterval()两个函数来实现定时器。 setTimeout()函数可以在一…

    JavaScript 2023年5月28日
    00
  • 与iframe进行跨域交互的解决方案(推荐)

    与iframe进行跨域交互是前端开发中常见的场景,但是由于同源策略的限制,直接使用JavaScript操作跨域iframe是不被允许的。那么,如何解决这一问题呢? 以下是利用postMessage进行与iframe跨域交互的解决方案(推荐): 步骤一:在iframe的源码中添加监听器 <html> <head> <script&…

    JavaScript 2023年6月11日
    00
  • node.js Web应用框架Express入门指南

    Node.js Web应用框架Express入门指南 Express是基于Node.js开发的Web应用框架,它提供了一组API来帮助开发者快速地创建Web应用程序。本指南将介绍如何入门使用Express,包括安装、配置、路由、模板引擎等方面的内容。 安装Express 首先需要安装Node.js和npm。安装完成后,可打开终端窗口,输入以下命令安装Expr…

    JavaScript 2023年5月27日
    00
  • js+jquery常用知识点汇总

    js+jquery常用知识点汇总 简介 JavaScript 是一门脚本语言,主要用于网页前端开发,可使网页相关操作交互更具有动态性,而 jQuery 可以视为是对 JavaScript 的高级封装和简化,让我们能更快速地操作网页元素。在本文中,我们将讲解 JavaScript 和 jQuery 中常用的知识点并给出示例。 常用知识点 以下是 js+jque…

    JavaScript 2023年5月18日
    00
  • js实现点击图片在屏幕中间弹出放大效果

    要实现点击图片在屏幕中间弹出放大效果,可以采用以下步骤: 1. 给图片设置点击事件监听 首先需要在html文件中给图片标签设置点击事件监听,代码如下: <img src="path/to/image.jpg" onclick="showImage(this)"> 在上述代码中,showImage(this)…

    JavaScript 2023年6月10日
    00
  • js实现跳一跳小游戏

    JS实现跳一跳小游戏,主要分为以下几个步骤: HTML结构:在HTML中需要准备一个游戏容器div和一个小人的img标签。 <div id="game-container"> <img src="little-man.png" id="little-man"> <div…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部