详解JavaScript的this指向和绑定

详解JavaScript的this指向和绑定

什么是this

在JavaScript中,this关键字是一个对象,它根据函数的调用方式不同而发生变化。在定义函数的时候我们通常称之为上下文,然后在执行函数的时候确定它的上下文。

this指向

this指向在JavaScript中是非常灵活的。一般情况下它指向的是调用函数的对象,但是在一些情况下它的行为会非常变态。下面我们来详细讲解JavaScript中this的指向。

全局作用域中的this

在全局作用域中使用this是非常简单的,它会指向全局对象——window(浏览器中)或者global(Node.js中)。

console.log(this); // window (浏览器环境)

函数作用域中的this

在函数作用域中使用this的指向有很多情况,分别对应不同的函数调用方式。

直接调用函数

当直接调用函数时,this会指向全局对象。

function foo() {
    console.log(this);
}

foo(); // window (浏览器环境)

作为对象的方法调用

当作为对象的方法调用时,this指向的是调用这个方法的对象。

let obj = {
    name: 'MonkeyKing',
    showName: function() {
        console.log(this.name);
    }
}

obj.showName(); // MonkeyKing

作为构造函数调用

当使用构造函数创建对象时,this将指向新创建的对象。

function Person(name) {
    this.name = name;
}

let p1 = new Person('Allen');
console.log(p1.name); // 'Allen'

通过call和apply调用

通过call和apply调用时,this指向的是传入的第一个参数。

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

let obj1 = { name: 'Allen' };
let obj2 = { name: 'Bob' };

foo.call(obj1); // Allen
foo.apply(obj2); // Bob

箭头函数中的this

箭头函数中的this和包含箭头函数的上一层作用域中的 this 指向是一样的。

function Person(name) {
    this.name = name;

    return () => console.log(this.name);
}

let p1 = new Person('Allen');
let p2 = new Person('Bob');

let getName1 = p1();
let getName2 = p2();

getName1(); // Allen
getName2(); // Bob

this的绑定

如果要在函数定义时就指定this的指向,可以使用bind、call和apply方法。其中bind返回一个新的函数,call和apply直接调用函数。

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

let obj1 = { name: 'Allen' };
let obj2 = { name: 'Bob' };

let bindFoo = foo.bind(obj1);
bindFoo(); // Allen

foo.call(obj2); // Bob

foo.apply(obj1); // Allen

总结

本文详细讲解了JavaScript中this的指向和绑定。this指向在JavaScript中非常灵活,可以说是很难掌握的部分。如果想要深入学习JavaScript,必须要彻底掌握this的指向和绑定。

示例1:

// 定义一个计算器对象
let calculator = {
    num1: 0,
    num2: 0,
    setNum(num1, num2) {
        this.num1 = num1;
        this.num2 = num2;
    },
    add() {
        return this.num1 + this.num2;
    },
    subtract() {
        return this.num1 - this.num2;
    }
}

// 设置计算器的两个数
calculator.setNum(2, 3);

// 进行加减运算
console.log(calculator.add()); // 5
console.log(calculator.subtract()); // -1

示例2:

let person1 = {
    name: 'Allen',
    age: 20,
    greet: function() {
        console.log('Hello ' + this.name);
    }
}

let person2 = {
    name: 'Bob',
    age: 30
}

// 在person2上调用person1的greet方法
person1.greet.call(person2); // 'Hello Bob'

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解JavaScript的this指向和绑定 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScrpt中如何使用 cookie 设置查看与删除功能

    下面详细讲解如何使用JavaScript中的cookie设置查看与删除功能: 1. 什么是 cookie? cookie是一种储存在用户客户端的小型文本文件,用于存储用户数据,实现网站的状态管理。cookie一般用于记录用户的登录状态、购物车信息等。 2. 如何设置 cookie? 在JavaScript中,可以通过document.cookie来设置coo…

    JavaScript 2023年6月11日
    00
  • JavaScript不刷新实现浏览器的前进后退功能

    实现浏览器的前进后退功能,通常需要使用浏览器提供的history对象来实现。而JavaScript不刷新实现浏览器的前进后退功能,可以通过以下步骤来完成: 1. 修改URL的哈希值 改变URL哈希值(URL中#后面内容)时,浏览器不会刷新页面,因此可以通过修改哈希值来实现前进后退。具体实现步骤如下: 在URL中添加hashchange事件监听,当页面哈希值发…

    JavaScript 2023年6月11日
    00
  • JS利用 clip-path 实现动态区域裁剪功能

    我会为您提供详细的“JS利用 clip-path 实现动态区域裁剪功能”的攻略,以下是具体步骤: 步骤1:了解 clip-path 属性 clip-path 属性可以用来裁剪任何元素的视觉外观(裁剪作用是基于矢量路径)。通过定义一个有规律或不规律的形状,在视觉上裁剪页面元素。可以定义多种形状:矩形、椭圆、多边形和其他基本形状。也可以通过引用 SVG 的 路径…

    JavaScript 2023年6月11日
    00
  • 简介JavaScript中用于处理正切的Math.tan()方法

    Math.tan()是JavaScript中Math对象提供的方法之一,用于计算数字的正切值。其语法如下: Math.tan(x) 其中,x为待计算的角度,需要以弧度制传递。 具体步骤如下: 将角度转换为弧度 Math.tan()方法要求传入的参数是以弧度制表示的角度,而JavaScript中只支持以角度制来表示角度。所以我们需要先将角度转换成弧度。 con…

    JavaScript 2023年6月10日
    00
  • JavaScript使用类似break机制中断forEach循环的方法

    在JavaScript中,一般使用forEach()方法对数组进行遍历操作。但是,如果在遍历过程中需要中断循环,类似于break操作,可以采用如下几种方式: 方式一:使用some()方法 some()方法会在数组中至少找到一个满足条件的元素时直接返回true,并中断遍历,否则返回false。因此,可以利用some()方法来达到中断forEach()循环的效果…

    JavaScript 2023年5月28日
    00
  • JS中dom0级事件和dom2级事件的区别介绍

    JS中事件分为DOM0级事件和DOM2级事件。 DOM0 级事件:是将一个函数赋值给一个事件处理程序属性,如下所示: document.getElementById("button").onclick = function(){ alert("Hello World!"); } DOM2级事件:定义了两个方法 用于指定…

    JavaScript 2023年6月10日
    00
  • JS运动特效之链式运动分析

    JS运动特效之链式运动分析 什么是链式运动? 链式运动(chained animation)是指在一个元素上连续运用多个运动函数,从而实现多个运动效果的衔接。 在实际开发中,链式运动被广泛应用于页面的元素动态效果设计,为网页提供更加生动有趣的交互。 实现一个链式运动 下面我们通过一个例子来介绍如何实现一个链式运动。 HTML <div id=&quot…

    JavaScript 2023年6月11日
    00
  • 解决AJAX中跨域访问出现’没有权限’的错误

    跨域访问的概念 跨域访问是指客户端(前端网页)在访问服务器端(后端网页)时,两者的域名不一致,从而产生了跨域问题。 在现代化网站应用中,由于很多服务器和网站的域名不一致,因此经常会出现无法通过Ajax发送或接收数据的问题,错误信息通常为“没有权限”,这是浏览器的默认安全策略所造成的。 解决AJAX中跨域访问出现“没有权限”错误的攻略 常见的跨域访问解决方案包…

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