JavaScript中this指向原理详解

作者:闭包旅人

时间:2026-10-24

浏览:496

本文深入解析JavaScript中this关键字的指向规则。涵盖默认执行指向Window、严格模式下指向undefined、隐式调用指向调用对象及隐式丢失问题、显式绑定(bind/call/apply)修复this,以及构造函数new操作下的实例指向。通过代码示例清晰展示不同场景下的this行为。

文章目录

this的基本概念与执行时机

许多开发者常对this的本质感到困惑,尤其是其值为何在不同情境下频繁变化。

首先,我们需要对this的概念进行概括。

this是一个对象,通常存在于函数内部,用于表示当前函数的执行上下文。

值得注意的是,只有当函数执行后,this才会绑定到具体对象;在函数未执行前,this并无实际内容。

接下来,我们将探讨在不同场景下this的具体指向。

默认执行与严格模式下的this

1. 函数默认执行:此时this指向Window对象。


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

在开启严格模式后,this的指向行为会有所不同。

在严格模式下:this指向undefined。


 function fn(){
  "use strict"
  console.log(this)    //undefined
 };
 fn();

隐式执行与隐式丢失

2. 函数的隐式执行:此时this指向函数的直接调用对象。


function fn(){
    console.log(this);    
   };
   var a = 10;
   var obj = {
    a:20,
    b:fn
   };
   obj.b();        //this指向obj
  var obj2 = {
    a:30,
    b:obj.b
   };
   obj2.b();       //this指向obj2
  var obj3 = {
    a:40,
   b:obj2        
  };
  obj3.b.b();      //obj3.b.b等价于obj2.b this指向obj2

然而,当函数作为参数传递给另一个函数的变量时,会发生隐式丢失,导致this重新指向Window。


function fn(){
   console.log(this)  //Window
  };
  var obj = {
   a:20,
   b:fn
  };
 setTimeout(obj.b, 1000);
  function setTimeout(cb,t){
   cb();        //obj.b作为参数传给cb,而cb前没对象,相当于默认方式执行fn() 
  };

显式绑定与this修复

3. 函数的显式执行:此时this指向被指定的对象。

我们可以通过函数的bind、call、apply方法来指定this的目标对象,这些方法也可用于修复前述的隐式丢失问题。


var obj = {
  name: "obj",
  show: function () {
   console.log(this.name)
  }
 }
 obj.show();      //obj

 var obj2 = {
  name: "obj2"
 };
 obj.show.bind(obj2)();   //obj2

 var name = "蜡笔笑嘻嘻";   
 obj.show.bind(window)();  //Window

构造函数中的this指向

4. 构造函数执行(通过new关键字执行)。

在构造函数中,this会指向新创建的实例对象。


 function Person() {
  this.name = 'zhar';
 }
 var p = new Person();
 console.log(p.name);  //zhar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章