你可能不知道的JavaScript之this指向详解

2023-12-08前端开发
14

您好!感谢您关注“你可能不知道的JavaScript之this指向详解”这篇文章。下面我将为您介绍该攻略的详细内容:

1. 文章介绍

本文主要介绍 JavaScript 中 this 指向的相关知识,包括 this 的定义、this 的应用场景以及常见使用方法等。帮助读者深入理解 this,避免由于理解不透彻而导致的错误应用。

2. this 的定义

this 指向在 JavaScript 中十分重要,它可以代表当前执行代码的对象或上下文。在函数执行时,this 指的就是该函数所属的对象;而在全局作用域中,this 指向的则是全局对象 window。

3. this 的应用场景

3.1. 对象方法中的 this

在 JavaScript 中,对象和方法是紧密联系在一起的,因此 this 在对象方法中的使用是很常见的。例如:

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

在这个例子中,this.firstName 指的是 person 对象中的 firstName,this.lastName 同理。这里的 this 指的是当前所属的 person 对象。

3.2. 构造函数中的 this

构造函数是一种特殊的函数,它被用来创建新的对象。在构造函数中,this 关键字代表新创建的对象,例如:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var myCar = new Car("Ford", "Mustang", 1969);

在这个例子中,this 指的是新创建的对象 myCar。

4. this 的常见使用方法

4.1. call() 方法

call() 方法可以调用一个函数,并指定函数中的 this 值。例如:

var person1 = {firstName: "John", lastName: "Doe"};
var person2 = {firstName: "Mary", lastName: "Doe"};
function fullName() {
  return this.firstName + " " + this.lastName;
}
var bindPerson1 = fullName.call(person1);
var bindPerson2 = fullName.call(person2);

在这个例子中,调用 fullName() 函数时,指定了 this 值,使得 bindPerson1 和 bindPerson2 的结果分别为 "John Doe" 和 "Mary Doe"。

4.2. apply() 方法

apply() 方法与 call() 方法类似,也是调用一个函数并指定函数中的 this 值。与 call() 方法不同的是,apply() 方法的第二个参数是一个数组,例如:

var person1 = {firstName: "John", lastName: "Doe"};
var person2 = {firstName: "Mary", lastName: "Doe"};
function fullName() {
  return this.firstName + " " + this.lastName;
}
var bindPerson1 = fullName.apply(person1);
var bindPerson2 = fullName.apply(person2);

在这个例子中,指定了 this 值,使得 bindPerson1 和 bindPerson2 的结果分别为 "John Doe" 和 "Mary Doe"。

5. 示例说明

下面我们来看两个示例来说明 this 指向的详细解释。

5.1. 示例一

var name = "window name";
function Person(name) {
  this.name = name;
  this.printName = function () {
    console.log(this.name);
  };
}

var person1 = new Person("person1");
var person2 = new Person("person2");

person1.printName();  // "person1"
person2.printName();  // "person2"

在这个例子中,我们定义了一个全局变量 name 以及一个构造函数 Person。其中构造函数 Person 有一个属性 name 和一个方法 printName()。在实例化构造函数时,通过 this 关键字,分别为 person1 和 person2 对象添加了不同的 name 值。在调用 printName() 方法时,打印出了各自对应的 name 值。

5.2. 示例二

var name = "window name";
var person1 = {
  name: "person1",
  printName: function () {
    console.log(this.name);
  }
};

var person2 = {
  name: "person2",
  printName: function () {
    var print = person1.printName;
    print();
  }
};

person2.printName();  // "window name"

在这个例子中,我们定义了两个对象 person1 和 person2,分别有相同的 printName() 方法,但是他们所对应的 this 指向却是不同的。在 person2 的 printName() 方法中,采用了 print 变量存储 person1.printName(),这样就改变了 printName() 方法中的 this 指向。当调用 person2.printName() 方法时,最终打印出了全局变量 name 的值。

6. 结束语

本文仅是对 this 的基本介绍和应用场景的说明,但这并不是深入了解 this 所需要掌握的全部内容。我希望本文能为读者提供一些基本的指导和帮助,在实际应用时避免由于对 this 理解不透彻而导致的错误应用。

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

网站部署https后百度地图不显示问题
https的网站如果引用百度地图,会出现加载不了的问题,这是因为涉及到跨域问题,网站是https的,但是引用百度地图的是http的,这个要怎么操作呢? 比如我引用的地址:http://api.map.baidu.com/api?v=2.0ak=AK显示 后来看了一下,少了一个s=1字段,加一下s=1...
2025-07-28 前端开发
139

微信小程序实现点击复制功能和手机拨打电话功能
做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码: van-field value="{{form.contactPhone}}"...
2025-07-02 前端开发
78

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161