JavaScript 中的 this 简单规则

几条规则确定函数里的 this 是什么。

想确定 this 是什么其实非常简单。总体的规则是,通过检查它的调用位置,在函数被调用的的时候确定 this。它遵循下面这些规则,接下来以优先级顺序说明。

规则

1、如果在调用函数时使用 new 关键字,那么函数里的 this 就是一个全新的对象。

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2、如果使用 apply、call 或者 bind 调用函数,那么函数里的 this 就是作为参数传进去的对象。

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3、如果函数作为一个方法调用,就是说如果使用点符号调用函数,那么 this 就是拥有这个函数作为属性的对象。换句话说,当一个点在函数调用的左侧时,this 就是这个点左侧的那个对象。

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4、如果函数作为一个纯粹的函数调用,也就是说,它在没有上述任何条件的情况下被调用,那么 this 就是全局对象。在浏览器里,就是 window 对象。

function fn() {
  console.log(this);
}
// 如果在浏览器里调用:
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

注意这个规则其实和第三个规则是一样的,区别在于没有声明为方法的函数会自动成为全局对象 window 的属性。因此,这其实是一个隐式的方法调用。当我们调用 fn(),其实就会被浏览器理解为 window.fn(),所以 this 就是 window。

console.log(fn === window.fn); // -> true

5、如果上述规则有多个适用,那么优先级更高的就会设置 this 值。

6、如果是 ES2015 里的箭头函数,那么它将忽略上述所有规则,并在创建的时候接收包含它的作用域作为 this 的值。想确定 this 具体是什么的话,只需从创建箭头函数那里往上一行,看看那儿的 this 是什么,箭头函数里的 this 值和它一样。

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

看回第三个规则,当我们调用 obj.createArrowFn() 的时候,createArrowFn 里的 this 是 obj,因为这是方法调用。因此,obj 会在 arrowFn 里绑定到 this 上。如果我们在全局作用域创建一个箭头函数,那么 this 值就会是 window。

应用规则

让我们来看一个代码示例,并应用这些规则。尝试一下看能否弄清楚不同的函数调用下,this 是什么。

确定应用了哪条规则

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() 属于第三条规则,方法调用。另一方面,print() 属于第四条规则,纯粹的函数调用。对于 print() 来说,我们在调用的时候没有使用 new、bind/call/apply 或者点符号,所以它对应了规则四,this 就是全局对象 window。

当适用多个规则的时候

当适用多个规则的时候,使用列表里更高优先级的规则。

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

如果规则二和规则三同时适用,那么规则二占优。

obj1.print.call(obj2); // -> { value: 17 }

如果规则一和规则三同时适用,那么规则一占优。

new obj1.print(); // -> {}

有些库有时候会故意将 this 值绑定到某些函数里。而通常会在函数里将最有用的值绑定到 this 上使用。举个例子,jQuery 把 this 绑定到 DOM 元素上,在回调中触发一个事件。如果某个库出现一个不太符合上述规则的 this 值,那么请仔细阅读这个库的文档,它很有可能使用 bind 绑定了。

总结

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

(0)

相关推荐

  • JavaScript中this的四个绑定规则总结

    前言 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅.所以这篇文章开始将介绍javascript中this的四个绑定规则,下面来一起看看吧. 绑定规则 1. 默认绑定 独立函数调用时,this 指向全局对象,如果使用严格模式,那么全局对象无法使用默认绑定, this绑定至 undefined. function foo() { console.log(this.a); } var a = 2; foo(); // 2 严格模式时: function fo

  • JavaScript this调用规则说明

    JavaScript函数调用规则一 (1)全局函数调用: 复制代码 代码如下: function makeArray( arg1, arg2 ){ return [this , arg1 , arg2 ]; } 这是一个最常用的定义函数方式.相信学习JavaScript的人对它的调用并不陌生. 调用代码如下: makeArray('one', 'two'); // => [ window, 'one', 'two' ] 这种方式可以说是全局的函数调用. 为什么说是全局的函数? 因为它是全局对象w

  • JavaScript 中的 this 简单规则

    几条规则确定函数里的 this 是什么. 想确定 this 是什么其实非常简单.总体的规则是,通过检查它的调用位置,在函数被调用的的时候确定 this.它遵循下面这些规则,接下来以优先级顺序说明. 规则 1.如果在调用函数时使用 new 关键字,那么函数里的 this 就是一个全新的对象. function ConstructorExample() { console.log(this); this.value = 10; console.log(this); } new Constructor

  • JavaScript中正则表达式判断匹配规则及常用方法

    字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在. 正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它"匹配"了. \d可以匹配一个数字                 '00\d'可以匹配'007' ,'\d\d\d'可以匹配'010' \w可以匹配一个字母或数字      '\w\w'可以匹配'js' \s可以匹配一个空格(也包括Tab等空白符) \DWS都是表示匹配与

  • 基于JavaScript中标识符的命名规则介绍

    JavaScript中的标识符的命名有以下规则: 由字母.数字.$._组成 以字母.$._开头 不可以使用保留字!!! 要有意义!!!!!!! 标识符的命名规范: 1.驼峰命名法 除标识符的第一个单词外,其余单词的首字母大写,例如:trueName 2.蛇型命名法 单词之间用_隔开,例如:true_name (注:大多数情况下,以1~2个下划线开始的标识符,代表特殊变量或内部变量,我们在自己定义的时候,尽量避免使用以下划线开头的变量) (粗浅的见解,望批评指正) 以上这篇基于JavaScript

  • JavaScript中 this 的绑定指向规则

    目录 问题来源 this 绑定规则 1.默认绑定 2.隐式绑定 3.显示绑定 4.new 绑定 5.内置方法 6.规则优先级 7.规则之外 8.实践 问题来源 在 js 中,有一个疑惑的点 this, 它的指向问题,存在各种各样的,来看一下,它是如何绑定指向的吧 函数在调用时,JavaScript 会默认给 this 绑定一个值 this 的绑定和定义的位置(编写的位置)没有关系 this 的绑定和调用方式以及调用的位置有关系 this 是在运行时,动态绑定的 this 绑定规则 1.默认绑定

  • 详解JavaScript中Hash Map映射结构的实现

    Hash Map通常在JavaScript中作为一个简单的来存储键值对的地方.然而,Object并不是一个真正的哈希映射,如果使用不当可能会带来潜在的问题.而且JavaScript可能不提供本地哈希映射(至少不是跨浏览器兼容的),有一个更好的声明对象属性的方法. Hash Map的简单实现: var hashMap = { Set : function(key,value){this[key] = value}, Get : function(key){return this[key]}, Co

  • 详解在JavaScript中如何判断变量类型

    JavaScript是一个动态类型语言,在运行时获取变量类型是常用操作,由于JavaScript设计的问题,看似简单的问题,在JavaScript中可能并不简单,比如在社区中流传的下图,仔细看一下这些坑,即便是JavaScript老司机也经常翻车. 上图中typeof NaN会返回number,这可能和你想的不一样,在JavaScript准确的获取变量类型,并不简单,正因为如此,这个问题经常被用来考察面试者,由于程序=数据+算法,而基本数据是数据的基础,所以面试中考察类型也是合理的. 如果面试中

  • JavaScript中运算符规则和隐式类型转换示例详解

    前言 本文主要给大家介绍了关于JavaScript运算符规则和隐式类型转换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 隐式类型转换 在 JavaScript 中,当我们进行比较操作或者加减乘除四则运算操作时,常常会触发 JavaScript 的隐式类型转换机制:而这部分也往往是令人迷惑的地方.譬如浏览器中的 console.log 操作常常会将任何值都转化为字符串然后展示,而数学运算则会首先将值转化为数值类型(除了 Date 类型对象)然后进行操作. 我们首先来

  • 在javascript中使用com组件的简单实现方法

    首先创建一个COM组件,插入一个双接口Itest,在此接口上实现以下三个方法: STDMETHODIMP Ctest::test(void) //无输入输出参数  {  // TODO: 在此添加实现代码  MessageBox(NULL,L"test",L"test",MB_OK);  return S_OK;  }  STDMETHODIMP Ctest::test1(BSTR a1) //有一个字符串输入参数  {  // TODO: 在此添加实现代码  Me

  • 简单分析javascript中的函数

    在脚本语言JavaScript中,函数的定义是由事件驱动或者当它被调用时可重复使用的代码块.在JavaScript的标准ECMAscript中,把函数表述为可以随时随地运行的语句.我个人是不认同ECMA的说法的,因为函数只有在发生调用的时候才会执行,否则就是一段毫无生气的代码. 我们来具体认识认识函数. (一)首先是函数的定义: 在ECMAscript函数的定义是 关键字function 函数名( 参数){主体:return(返回值)};这四部分组成的,但是在脚本语言中函数的定义却分为三种方式定

  • JavaScript中的return语句简单介绍

    return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,下面就结合实例简单介绍一下return语句的作用. 一.用来返回控制和函数结果: 通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数. 语法格式: return 表达式 代码实例如下: function add(){ var a=1; var b=2; return a+b; } func

随机推荐