当前位置: 首页 > 编程笔记 >

JavaScript 中的 this 简单规则

郑俊美
2023-03-14
本文向大家介绍JavaScript 中的 this 简单规则,包括了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 简单规则,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍针对JavaScript中this指向的简单理解,包括了针对JavaScript中this指向的简单理解的使用技巧和注意事项,需要的朋友参考一下 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多

  • 本文向大家介绍ANTLR 简单规则,包括了ANTLR 简单规则的使用技巧和注意事项,需要的朋友参考一下 示例 Lexer规则定义令牌类型。它们的名称必须以大写字母开头,以区别于解析器规则。 基本语法: 语法 含义 A 匹配名称为lexer的规则或片段 A A B 比赛A之后B (A|B) 匹配A或B 'text' 匹配文字“文本” A? 匹配A零或一次 A* 匹配A零次或多次 A+ 匹配A一次或多

  • 我正在寻找一个简单的JavaScript节流阀。我知道像lodash和下划线这样的库都有它,但只有一个函数包含这些库中的任何一个都是多余的。 我还检查了jQuery是否有类似的函数-找不到。 我发现了一个工作油门,下面是代码: 这样做的问题是:在油门时间完成后,它会再次触发该功能。所以让我们假设我做了一个油门,每10秒在键盘上按下一次——如果我按下2次键盘,当10秒完成时,它仍然会按下第二个键盘。

  • 问题内容: 我有一个使用该函数并调用另一个方法的方法。在初始加载时,方法2可以正常工作。但是,超时后,我得到一个错误,它是未定义的。我在这里做错了什么? 例如: 问题答案: 问题是导致javascript使用全局范围。本质上,您是在调用类,而不是从中调用。相反,您只是在告诉您使用没有特定作用域的函数。 要解决此问题,您可以将函数调用包装在另一个引用正确变量的函数调用中。它看起来像这样: 可能是因为

  • 本文向大家介绍javascript中的this详解,包括了javascript中的this详解的使用技巧和注意事项,需要的朋友参考一下 This对象在js中就一直是个坑货,很难判断它到底指向什么,而我们由于来自C++或者python的self的经验,又常常会犯这一类的错误。接下来就详细地讲一下this对象的归属。 rule1:全局环境的this javascript的环境天生就由函数来决定,在js

  • 本文向大家介绍JavaScript中this详解,包括了JavaScript中this详解的使用技巧和注意事项,需要的朋友参考一下 都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言。它把函数式编程和面向对象编程糅合一起,再加上动态语言特性,简直强大无比(其实是不能和C++比的,^_^ )。 这里的主题是 this ,不扯远了。this 本身原本很简单,总是指向类的当