JavaScript中 this 指向问题深度解析

JavaScript 中的 this 指向问题有很多文章在解释,仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题,所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题。

与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的。换句话说, 函数的调用方式决定了 this 指向 。

JavaScript 中,普通的函数调用方式有三种:直接调用、方法调用和 new 调用。除此之外,还有一些特殊的调用方式,比如通过 bind() 将函数绑定到对象之后再进行调用、通过 call() 、 apply() 进行调用等。而 es6 引入了箭头函数之后,箭头函数调用时,其 this 指向又有所不同。下面就来分析这些情况下的 this 指向。

直接调用

直接调用,就是通过 函数名(...) 这种方式调用。这时候,函数内部的 this 指向全局对象,在浏览器中全局对象是 window ,在 NodeJs 中全局对象是 global 。

来看一个例子:

// 简单兼容浏览器和 NodeJs 的全局对象
const _global = typeof window === "undefined" ? global : window;
function test() {
  console.log(this === _global);  // true
}
test();  // 直接调用

这里需要注意的一点是,直接调用并不是指在全局作用域下进行调用,在任何作用域下,直接通过 函数名(...) 来对函数进行调用的方式,都称为直接调用。比如下面这个例子也是直接调用

(function(_global) {
  // 通过 IIFE 限定作用域
  function test() {
    console.log(this === _global); // true
  }
  test();   // 非全局作用域下的直接调用
})(typeof window === "undefined" ? global : window);

bind() 对直接调用的影响

还有一点需要注意的是 bind() 的影响。 Function.prototype.bind() 的作用是将当前函数与指定的对象绑定,并返回一个新函数,这个新函数无论以什么样的方式调用,其 this 始终指向绑定的对象。还是来看例子:

const obj = {};
function test() {
  console.log(this === obj);
}
const testObj = test.bind(obj);
test();   // false
testObj(); // true

那么 bind() 干了啥?不妨模拟一个 bind() 来了解它是如何做到对 this 产生影响的。

const obj = {};
function test() {
  console.log(this === obj);
}
// 自定义的函数,模拟 bind() 对 this 的影响
function myBind(func, target) {
  return function() {
    return func.apply(target, arguments);
  };
}
const testObj = myBind(test, obj);
test();   // false
testObj(); // true

从上面的示例可以看到,首先,通过闭包,保持了 target ,即绑定的对象;然后在调用函数的时候,对原函数使用了 apply 方法来指定函数的 this 。当然原生的 bind() 实现可能会不同,而且更高效。但这个示例说明了 bind() 的可行性。

call 和 apply 对 this 的影响

上面的示例中用到了 Function.prototype.apply() ,与之类似的还有 Function.prototype.call() 。这两方法的用法请大家自己通过链接去看文档。不过,它们的第一个参数都是指定函数运行时其中的 this 指向。

不过使用 apply 和 call 的时候仍然需要注意,如果目录函数本身是一个绑定了 this 对象的函数,那 apply 和 call 不会像预期那样执行,比如

const obj = {};
function test() {
  console.log(this === obj);
}
// 绑定到一个新对象,而不是 obj
const testObj = test.bind({});
test.apply(obj);  // true
// 期望 this 是 obj,即输出 true
// 但是因为 testObj 绑定了不是 obj 的对象,所以会输出 false
testObj.apply(obj); // false

由此可见, bind() 对函数的影响是深远的,慎用!

方法调用

方法调用是指通过对象来调用其方法函数,它是 对象.方法函数(...) 这样的调用形式。这种情况下,函数中的 this 指向调用该方法的对象。但是,同样需要注意 bind() 的影响。

const obj = {
  // 第一种方式,定义对象的时候定义其方法
  test() {
    console.log(this === obj);
  }
};
// 第二种方式,对象定义好之后为其附加一个方法(函数表达式)
obj.test2 = function() {
  console.log(this === obj);
};
// 第三种方式和第二种方式原理相同
// 是对象定义好之后为其附加一个方法(函数定义)
function t() {
  console.log(this === obj);
}
obj.test3 = t;
// 这也是为对象附加一个方法函数
// 但是这个函数绑定了一个不是 obj 的其它对象
obj.test4 = (function() {
  console.log(this === obj);
}).bind({});
obj.test();   // true
obj.test2();  // true
obj.test3();  // true
// 受 bind() 影响,test4 中的 this 指向不是 obj
obj.test4();  // false

这里需要注意的是,后三种方式都是预定定义函数,再将其附加给 obj 对象作为其方法。再次强调,函数内部的 this 指向与定义无关,受调用方式的影响。

方法中 this 指向全局对象的情况

注意这里说的是 方法 中而不是 方法调用 中。方法中的 this 指向全局对象,如果不是因为 bind() ,那就一定是因为不是用的方法调用方式,比如

const obj = {
  test() {
    console.log(this === obj);
  }
};
const t = obj.test;
t();  // false

t 就是 obj 的 test 方法,但是 t() 调用时,其中的 this 指向了全局。

之所以要特别提出这种情况,主要是因为常常将一个对象方法作为回调传递给某个函数之后,却发现运行结果与预期不符——因为忽略了调用方式对 this 的影响。比如下面的例子是在页面中对某些事情进行封装之后特别容易遇到的问题:

class Handlers {
  // 这里 $button 假设是一个指向某个按钮的 jQuery 对象
  constructor(data, $button) {
    this.data = data;
    $button.on("click", this.onButtonClick);
  }
  onButtonClick(e) {
    console.log(this.data);
  }
}
const handlers = new Handlers("string data", $("#someButton"));
// 对 #someButton 进行点击操作之后
// 输出 undefined
// 但预期是输出 string data
很显然 this.onButtonClick 作为一个参数传入 on() 之后,事件触发时,是对这个函数进行的直接调用,而不是方法调用,所以其中的 this 会指向全局对象。要解决这个问题有很多种方法
// 这是在 es5 中的解决办法之一
var _this = this;
$button.on("click", function() {
  _this.onButtonClick();
});
// 也可以通过 bind() 来解决
$button.on("click", this.onButtonClick.bind(this));
// es6 中可以通过箭头函数来处理,在 jQuery 中慎用
$button.on("click", e => this.onButtonClick(e));

不过请注意,将箭头函数用作 jQuery 的回调时造成要小心函数内对 this 的使用。jQuery 大多数回调函数(非箭头函数)中的 this 都是表示调用目标,所以可以写 $(this).text() 这样的语句,但 jQuery 无法改变箭头函数的 this 指向,同样的语句语义完全不同。

new 调用

在 es6 之前,每一个函数都可以当作是构造函数,通过 new 调用来产生新的对象(函数内无特定返回值的情况下)。而 es6 改变了这种状态,虽然 class 定义的类用 typeof 运算符得到的仍然是 "function" ,但它不能像普通函数一样直接调用;同时, class 中定义的方法函数,也不能当作构造函数用 new 来调用。

而在 es5 中,用 new 调用一个构造函数,会创建一个新对象,而其中的 this 就指向这个新对象。这没有什么悬念,因为 new 本身就是设计来创建新对象的。

var data = "Hi";  // 全局变量
function AClass(data) {
  this.data = data;
}
var a = new AClass("Hello World");
console.log(a.data);  // Hello World
console.log(data);   // Hi
var b = new AClass("Hello World");
console.log(a === b);  // false

箭头函数中的 this

先来看看 MDN 上对箭头函数的说明

An arrow function expression has a shorter syntax than a function expression and does not bind its own this , arguments , super , or new.target . Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

这里已经清楚了说明了,箭头函数没有自己的 this 绑定。箭头函数中使用的 this ,其实是直接包含它的那个函数或函数表达式中的 this 。比如

const obj = {
  test() {
    const arrow = () => {
      // 这里的 this 是 test() 中的 this,
      // 由 test() 的调用方式决定
      console.log(this === obj);
    };
    arrow();
  },
  getArrow() {
    return () => {
      // 这里的 this 是 getArrow() 中的 this,
      // 由 getArrow() 的调用方式决定
      console.log(this === obj);
    };
  }
};
obj.test();   // true
const arrow = obj.getArrow();
arrow();    // true

示例中的两个 this 都是由箭头函数的直接外层函数(方法)决定的,而方法函数中的 this 是由其调用方式决定的。上例的调用方式都是方法调用,所以 this 都指向方法调用的对象,即 obj 。

箭头函数让大家在使用闭包的时候不需要太纠结 this ,不需要通过像 _this 这样的局部变量来临时引用 this 给闭包函数使用。来看一段 Babel 对箭头函数的转译可能能加深理解:

// ES6
const obj = {
  getArrow() {
    return () => {
      console.log(this === obj);
    };
  }
}
// ES5,由 Babel 转译
var obj = {
  getArrow: function getArrow() {
    var _this = this;
    return function () {
      console.log(_this === obj);
    };
  }
};

另外需要注意的是,箭头函数不能用 new 调用,不能 bind() 到某个对象(虽然 bind() 方法调用没问题,但是不会产生预期效果)。不管在什么情况下使用箭头函数,它本身是没有绑定 this 的,它用的是直接外层函数(即包含它的最近的一层函数或函数表达式)绑定的 this 。

以上所述是小编给大家介绍的JavaScript中 this 指向问题深度解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 函数四种调用模式以及其中的this指向

    第一种:函数直接执行模式 function add(a,b){ console.log(this); return a+b; } add(10,20)//this===window 第二种:对象方法的调用模式 var obj={ name:'aaa', age:20, said:function(){ console.log(this); } } obj.said();//this===obj,此处this指代被调用者 第三种:构造器的调用模式 function School(){ this.s

  • JavaScript中的this引用(推荐)

    this this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. 一.定义 1.this是函数内部的一个特殊对象(或this引用)--它引用的是函数据以执行的环境对象. 2.this引用是一种在JavaScript的代码中随时都可以使用的只读变量. this引用 引用(指向)的是一个对象,它有着会根据代码上下文语境自动改变其引用对象的特性.它的引用规则如下: • 在最外层代码中,this引用 引用的是全

  • 浅谈函数调用的不同方式,以及this的指向

    一.函数的调用方式 1.作为函数,一种直接易懂的方式(即函数调用模式). 2.作为方法,方法是连接在对象上的,被这个对象调用,这种形式就是面向对象编程. 3.作为构造器,在构造的过程中一个新的对象被创建出来. 4.经由函数的apply或者call方法. 二.函数参数 1.传入参数 (1)传入变量多于函数定义变量. (2)函数定义变量多余传入变量,多出来的变量是undefined 2.函数在被调用的时候,隐形的传入两个参数argument和this(即argument和this被悄悄传入函数,作用

  • javascript函数的四种调用模式

    1.介绍 先介绍一下函数的调用模式有哪四种: 函数调用模式, 方法调用模式, 构造函数调用模式, 上下文调用模式: 在这里对于函数的调用模式,主要介绍每种调用模式的this的指向和返回值. 2.代码分析 ①.函数调用模式 下面的调用模式就是大家最熟悉的函数调用模式,而函数调用模式的this指向和返回值是什么呢? function fn1 () { console.log(this); }; fn1(); // 在调用函数fn1时,输出的this的结果是Window 在上述代码中,fn1也就是函数

  • 老生常谈 js中this的指向

    在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1.函数调用模式 当一个函数不是一个对象的属性时,当作函数俩调用,这时函数内的this指向全局对象(大对数情况下是window) window.value=1; function getValue(){ console.log(this.value); } getValue();//输出1,此时的thi

  • JavaScript中 this 指向问题深度解析

    JavaScript 中的 this 指向问题有很多文章在解释,仍然有很多人问.上周我们的开发团队连续两个人遇到相关问题,所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题. 与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的.换句话说, 函数的调用方式决定了 this 指向 . JavaScript 中,普通的函数调用方式有三种:直接调用.方法调用和 new 调用.除此之外,还有一些特殊的调用方式

  • 在javascript中创建对象的各种模式解析

    最近在看<javascript高级程序设计>(第二版) javascript中对象的创建 •工厂模式 •构造函数模式 •原型模式 •结合构造函数和原型模式 •原型动态模式 面向对象的语言大都有一个类的概念,通过类可以创建多个具有相同方法和属性的对象.虽然从技术上讲,javascript是一门面向对象的语言,但是javascript没有类的概念,一切都是对象.任意一个对象都是某种引用类型的实例,都是通过已有的引用类型创建:引用类型可以是原生的,也可以是自定义的.原生的引用类型有:Object.A

  • JavaScript中this函数使用实例解析

    这篇文章主要介绍了JavaScript中this函数使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 普通函数 普通函数中的this,普通函数中的this表示调用此函数时的对象,如下例: var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 //调用say函数的是对象obj,所以this指代对象o

  • javascript中JSON.parse()与eval()解析json的区别

    本文实例讲述了javascript中JSON.parse()与eval()解析json的区别.分享给大家供大家参考,具体如下: JSON(JavaScript Object Notation)是一种轻量级的数据格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是Javascript原生格式,这意味着在javascript中处理JSON数据 基本格式: varjsonData='{"data1":"Hello,","data2"

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • javascript中this指向详解

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(例

  • 针对JavaScript中this指向的简单理解

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题. 为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不

  • JavaScript this关键字指向常用情况解析

    在之前写代码的经历中,常常试过写着写着this就莫名其妙的不知道指向到哪里去了.今天看了曾探的javascript设计模式,里面特别谈到了this在不同情况下指代的对象,非常有意思. this指代的情况 this有以下4种情况: 1.对象.函数的形式调用:object.function(); 2.普通函数的形式调用:function(); 3.构造器调用; 4.Function.prototype.call或Function.prototype.apply调用; 1.对象.函数的形式调用 对象.

  • JavaScript中的null和undefined解析

    在JavaScript开发中,被人问到:null与undefined到底有啥区别? 一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理.于是,细想之后,写下本文,请各位大侠拍砖. 总所周知:null == undefined 但是:null !== undefined 那么这两者到底有啥区别呢? 请听俺娓娓道来... null 这是一个对象,但是为空.因为是对象,所以 typeof null 返回 'object' . null 是 JavaScript 保留关键

  • JavaScript中的原型prototype完全解析

    要理解JS中的prototype, 首先必须弄清楚以下几个概念    1. JS中所有的东西都是对象 2. JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype // ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf&q

随机推荐