深入理解javascript中的this

深入理解JavaScript中的this的完整攻略

什么是this

所谓 this ,就是JavaScript中一个相对特殊的关键字,指向当前函数的执行环境。换句话说,this 可以看做是一个对象,这个对象指向的是函数执行时所在的环境对象,而这个环境对象是由调用方式来决定的。

this指向的典型情况

在JavaScript中,this 的指向是根据如何调用当前函数来确定的,它指向的对象有以下几种情况:

默认绑定

默认绑定是指一个独立的函数直接调用时,this 指向全局对象,即 window ,例如:

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

fn(); // 输出 window

隐式绑定

隐式绑定就是函数作为某个对象的方法被调用时,this 指向该对象,例如:

var obj = {
  name: '张三',
  fn: function() {
    console.log(this.name);
  }
};

obj.fn(); // 输出 '张三'

显示绑定

显示绑定通常使用 call()apply()bind() 方法显式的指定 this 的值,例如:

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

var obj1 = { name: '张三' };
var obj2 = { name: '李四' };

fn.apply(obj1); // 输出 '张三'
fn.call(obj2); // 输出 '李四'
fn.bind(obj1)(); // 输出 '张三'

new绑定

new 关键字调用构造函数时,返回一个新的对象,这个新的对象就是 this 指向的对象,例如:

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

var p = new Person('张三');
console.log(p.name); // 输出 '张三'

改变this指向的方法

如果想要改变函数内 this 的指向,有以下几种方法:

使用 call() 方法

使用 call() 方法可以直接调用函数,同时改变 this 的指向,例如:

var obj1 = { name: '张三' };
var obj2 = { name: '李四' };

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

fn.call(obj1); // 输出 '张三'
fn.call(obj2); // 输出 '李四'

使用 apply() 方法

apply() 方法和 call() 方法类似,区别在于参数的传递方式不同,例如:

var obj1 = { name: '张三' };
var obj2 = { name: '李四' };

function fn(arg1, arg2) {
  console.log(this.name, arg1, arg2);
}

fn.apply(obj1, [1, 2]);  // 输出 '张三', 1, 2
fn.apply(obj2, [3, 4]);  // 输出 '李四', 3, 4

使用 bind() 方法

使用 bind() 方法可以绑定函数内 this 指向的对象,并且复制函数,例如:

var obj1 = { name: '张三' };
var obj2 = { name: '李四' };

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

var fn1 = fn.bind(obj1);
var fn2 = fn.bind(obj2);

fn1(); // 输出 '张三'
fn2(); // 输出 '李四'

使用箭头函数

箭头函数的 this 绑定的是它所在的作用域,而不是调用时的作用域,例如:

var obj = { name: '张三' };

var fn = () => {
  console.log(this.name);
};

fn.call(obj); // 输出 '张三'

示例

示例1:示范this默认指向全局(浏览器中的window对象)

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

  this.eat = function() {
    console.log(this.name + ' 正在吃饭');
  }
}

var p = new Person('张三');

var eatFunc = p.eat; // 单独取出 sayName 方法

eatFunc(); // 输出 'undefined 正在吃饭' 

在执行 eatFunc() 方法时,this 的指向发生了变化,由 p 对象变成了全局对象 window ,导致在 eat() 方法中使用 this 调用 name 属性时,输出 nullundefined 。这种情况可以通过使用 bind() 方法来显式的重新绑定 this 的指向,例如:

var eatFunc = p.eat.bind(p);

eatFunc(); // 输出 '张三 正在吃饭' 

示例2:示范解决事件回调函数中this指向问题

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this); // 输出 <button id="myButton">点击我</button>
});

在回调函数中使用 this 指向的是当前元素,通过这种方法可以方便地操作当前元素,例如:

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
  this.disabled = true;
});

以上就是JavaScript中 this 的详细解释及应用,期望本文对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:深入理解javascript中的this - Python技术站

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

相关文章

  • 详解JavaScript Promise和Async/Await

    详解JavaScript Promise和Async/Await Promise的基础知识 Promise的概念 Promise是ES6中新增的一种异步编程解决方案,它以更优雅、更易维护的方式解决了回调地狱的问题。Promise相当于一个容器,异步操作返回的结果会被Promise包装起来并保证异步操作的状态。 Promise的三种状态 在Promise中异步…

    JavaScript 2023年5月28日
    00
  • Js基础学习资料

    Js基础学习资料完整攻略 目录 学习网站推荐 学习书籍推荐 个人建议 学习网站推荐 以下是一些适合 Js 初学者的网站,这些网站通常包括了从 Js 基础语法到高阶应用的全面内容。 MDN Web Docs w3schools JavaScript.info 学习书籍推荐 以下是一些 Js 学习者可以选择的经典书籍。 《JavaScript 高级程序设计》([…

    JavaScript 2023年5月18日
    00
  • Javascript获取数组中的最大值和最小值的方法汇总

    下面我来详细讲解一下“Javascript获取数组中的最大值和最小值的方法汇总”。 1. Math对象函数法 我们可以使用Math对象提供的max和min函数,来获取数组中的最大值和最小值: var arr = [1, 2, 3, 4, 5]; var max = Math.max.apply(null, arr); var min = Math.min.a…

    JavaScript 2023年5月27日
    00
  • vue如何动态修改$router参数

    在Vue中,可以使用$router对象来管理前端路由。它提供了一些API来获取和修改当前路由状态。下面,我们就来详细讲解Vue如何动态修改$router参数的完整攻略。 修改$router参数的基本概念 在Vue中,可以通过修改$route对象的参数来实现路由跳转。$route对象代表着当前路由状态,其中包括路由的路径、参数、查询、哈希和元信息。而$rout…

    JavaScript 2023年6月11日
    00
  • js实现类似于add(1)(2)(3)调用方式的方法

    要实现类似于 add(1)(2)(3) 这样的调用方式,我们可以使用 JavaScript 的闭包机制实现。以下是具体的实现步骤: 首先定义一个函数 add,它返回另一个函数; 返回的这个函数中,我们定义一个变量 sum,来保存函数所有调用参数的总和。并返回一个新的函数,用于下一次的调用; 新的函数中,使用闭包的方式,把前面的参数和当前的参数相加,然后返回一…

    JavaScript 2023年5月27日
    00
  • Javascript数组Array方法解读

    接下来我将为您详细讲解 “Javascript数组Array方法解读” 的完整攻略。 1. 概述 在 Javascript 中,数组(Array)是一个非常常用的数据结构,可以用来存储一系列的值。同时,数组提供了丰富的方法,可以对数组进行各种操作,例如添加、删除、筛选、排序等。 在本文中,我将为您详细解读 Javascript 数组的常用方法,帮助您更好地掌…

    JavaScript 2023年5月27日
    00
  • DOM节点深度克隆函数cloneNode()用法实例

    DOM节点深度克隆函数cloneNode()是一个非常常用的方法,可用于将当前节点的所有子孙节点以及属性克隆到新节点中。本文将详细介绍cloneNode()的用法,包括如何使用该方法创建克隆节点、如何克隆节点的所有子元素以及如何实现深拷贝等。 克隆节点 首先我们来看如何使用cloneNode()方法创建克隆节点。cloneNode()方法可以接收一个参数,表…

    JavaScript 2023年6月10日
    00
  • JS中Object对象的原型概念基础

    JS中的Object对象是所有对象的基础,它的原型概念是JS中面向对象编程的重要基础概念之一。下面就来详细讲解一下Object对象的原型概念基础,包括什么是原型、原型链、如何利用原型链实现继承等。 什么是原型 在JavaScript中,每个对象都有一个指向它的原型对象。除了基础属性和方法外,原型对象本身也有可能有自己的属性和方法。借助原型,可以实现对象之间的…

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