this 指向到底由谁来定

AI 概述
到底谁是调用者接下来重点讨论谁是调用者四种情况的调用第一种 & 第二种:第三种:第四种:优先级箭头函数补充思考题结束语 关于 this 指向问题,网上的资料很多,面试问的也很多,似懂非懂的人也很多。 然而 有人觉得女生的心思很难猜,也就有人觉得 this 的指向问题比女生的心思更难猜。 女生...
目录
文章目录隐藏
  1. 到底谁是调用者
  2. 接下来重点讨论谁是调用者
  3. 四种情况的调用
  4. 优先级
  5. 箭头函数补充
  6. 思考题
  7. 结束语

关于 this 指向问题,网上的资料很多,面试问的也很多,似懂非懂的人也很多。

然而

有人觉得女生的心思很难猜,也就有人觉得 this 的指向问题比女生的心思更难猜。

  • 女生的心思其实很简单 —— 希望不猥琐的你用心去关注她(和帅没有很大关系,当然帅加分)。
  • this 的指向问题也不难 —— 谁调用就指向谁

到底谁是调用者

结论先行:this 的指向是谁调用就指向谁;即调用之前,this 还不知其指向。

讨论谁是调用者之前先说 this 的作用

this 是函数内部两个特殊对象之一,拥有这个对象可以改变显式传递的弊端,即可将函数定义的更加简洁和易于复用。

接下来重点讨论谁是调用者

var name = '码云笔记';
function consoleName() 
{
    console.log(this.name);
}
var test = {
  name: 'mybj123.com',
  method: function() 
{
    consoleName();
  }
};
test.method();

上面这个笔试题相信你已经有了答案,现在可以带着你刚才的思考切入下面的解释。

四种情况的调用

想知道 this 指向就需要找到调用者。有人认为调用者并不好确定,其实大体只有四种情况,我一一介绍。

1.直接调用的默认绑定, this 指向一定是全局对象(浏览器的话是 window)。在严格模式下其值会是 undefined。

2.对象调用的隐式绑定, this 指向就是这个调用的对象。

3.call()/apply() 方式的显式绑定, this 指向传入的对象。

4.new 方式的绑定规则, this 指向这个构造出的新对象。

第一种 & 第二种:

let name = '码云笔记';
function consoleName() {
    console.log(this.name);
}
let test = 
{
  name: 'mybj123.com',
  method: function() 
{
    console.log(this.name);   // mybj123.com
    consoleName();            // 码云笔记
  }
};
test.method();

开头题目的答案就在这里。

虽然 test.method() 的调用方式使 method 内部使用的 this 会指向 test,但实际调用的是 – 直接调用 consoleName();所以 this 的指向还是全局对象 window。

通过这个例子,你对第一种和第二种的绑定方式应该就懂了。

第三种:

let name = '码云笔记';
let test = {
  name: 'mybj123.com',
  method: function() 
{
    console.log(this.name);
  }
};
test.method.apply(window);  // '码云笔记'

隐式绑定和显式绑定一起使用的时候,显式绑定的优先级更高

第四种:

function consoleName(name)
 {
    this.name = name;
}
let useNname = new consoleName('码云笔记');
console.log(useNname.name)      // 码云笔记

通过这个例子想必你对 new 方式中 this 的指向问题也明白了,即构造函数(consoleName)中的 this 会绑定到实例(useNname)上。

优先级

关于优先级我画了一张图直观的来说明这个问题:
this 指向到底由谁来定

箭头函数补充

箭头函数比较特殊,不受上面四条规则的约束。箭头函数的 this 根据外层函数确定。

而且箭头函数的 this 一旦被绑定,就无法改变。

思考题

以下代码输出什么,原因是什么?欢迎评论区留言。

function consoleName() {
    return (name) => {
        console.log(this.name);
    }
}
let testOne = {
  name: '码云笔记',
};
let testTwo = {
  name: 'mybj123.com',
};
let text = consoleName.call( testOne );
text.call( testTwo );

结束语

以上就是关于 this 指向谁的全部内容,希望对大家有所帮助,部分内容参考《JavaScript 高级程序设计》及《你不知道的 JavaScript》上。

以上关于this 指向到底由谁来定的文章就介绍到这了,更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章,希望大家以后多多支持码云笔记。

「点点赞赏,手留余香」

8

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 admin@mybj123.com 进行投诉反馈,一经查实,立即处理!
重要:如软件存在付费、会员、充值等,均属软件开发者或所属公司行为,与本站无关,网友需自行判断
码云笔记 » this 指向到底由谁来定

发表回复