热点面试题：聊聊对 this 的理解？

作者：控心つcrazy

2023-02-28
中国香港
本文字数：1706 字
阅读完需：约 6 分钟

前言

欢迎关注『前端进阶圈』公众号，一起探索学习前端技术......
前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待讨论点可随意评论，与各位同学一起学习~

聊聊对 this 对象的理解？

定义

在执行上下文中的一个属性，它指向最后一次调用这个属性或方法的对象。通常有四种情况来判断。

四种情况如下

1. 函数调用模式：当一个函数不是一个对象的属性时，直接作为函数来调用时，严格模式下指向 undefined, 非严格模式下，this 指向全局对象。

// 严格模式"use strict";var name = "window";var doSth = function () {    console.log(typeof this === "undefined");    console.log(this.name);};doSth(); // true，// 报错，因为this是undefined
// 非严格模式let name2 = "window2";let doSth2 = function () {    console.log(this === window);    console.log(this.name2);};doSth2(); // true, undefined

复制代码

2. 方法调用模式：如果一个函数作为一个对象的方法来调用时，this 指向当前这个对象

var name = "window";var doSth = function () {    console.log(this.name);};var student = {    name: "lc",    doSth: doSth,    other: {        name: "other",        doSth: doSth,    },};student.doSth(); // 'lc'student.other.doSth(); // 'other'// 用call类比则为：student.doSth.call(student);// 用call类比则为：student.other.doSth.call(student.other);

复制代码

3. 构造器调用模式：如果一个函数通过 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。

var Obj = function (p) {    this.p = p;};
var o = new Obj("Hello World!");o.p; // "Hello World!"

复制代码

4. apply, call, bind 模式：显式更改 this 指向，严格模式下，指向绑定的第一个参数，非严格模式下，null 和 undefined 指向全局对象（浏览器中是 window），其余指向被 new Object() 包裹的对象。

aplly: apply(this 绑定的对象，参数数组) func.apply(thisValue, [arg1, arg2, ...])

function f(x, y) {    console.log(x + y);}
f.call(null, 1, 1); // 2f.apply(null, [1, 1]); // 2

复制代码

call: call(this 绑定的对象，一个个参数) func.call(thisValue, arg1, arg2, ...)

var doSth = function (name) {    console.log(this);    console.log(name);};doSth.call(2, "lc"); // Number{2}, 'lc'var doSth2 = function (name) {    "use strict";    console.log(this);    console.log(name);};doSth2.call(2, "lc"); // 2, 'lc'

复制代码

bind: bind(this 绑定的对象) func.bind(thisValue)

var counter = {    count: 0,    inc: function () {        this.count++;    },};
var obj = {    count: 100,};var func = counter.inc.bind(obj);func();obj.count; // 101
// eg2：var add = function (x, y) {    return x * this.m + y * this.n;};
var obj = {    m: 2,    n: 2,};
var newAdd = add.bind(obj, 5);newAdd(5); // 20

复制代码

箭头函数规则

不会使用以上原则，而是根据当前作用域来决定 this, 也就是说箭头函数会继承外层函数，调用的 this 绑定，没有外层函数，则是指向全局（浏览器中是 window）。

this 优先级

构造器模式 > apply, call, bind > 方法调用模式 > 函数调用模式

文章特殊字符描述：

问题标注 Q:(question)
答案标注 R:(result)
注意事项标准：A:(attention matters)
详情描述标注：D:(detail info)
总结标注：S:(summary)
分析标注：Ana:(analysis)
提示标注：T:(tips)

往期回顾：

最后：

欢迎关注『前端进阶圈』公众号，一起探索学习前端技术......
公众号回复加群或扫码, 即可加入前端交流学习群，长期交流学习......
公众号回复加好友，即可添加为好友

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/781ab692fc9b31000f865686c】。文章转载请联系作者。

控心つcrazy

关注

还未添加个人签名 2021-10-17 加入

还未添加个人简介

发布

暂无评论

创作场景

热点面试题：聊聊对 this 的理解？

前言

聊聊对 this 对象的理解？

定义

四种情况如下

箭头函数规则

this 优先级

文章特殊字符描述：

往期回顾：

最后：

控心つcrazy

评论