热点面试题:聊聊对 this 的理解?

简介: 热点面试题:聊聊对 this 的理解?

聊聊对 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 指向,严格模式下,指向绑定的第一个参数,非严格模式下,nullundefined 指向全局对象(浏览器中是 window),其余指向被 new Object() 包裹的对象。

  • aplly: apply(this 绑定的对象,参数数组) func.apply(thisValue, [arg1, arg2, ...])
function f(x, y) {
    console.log(x + y);
}
f.call(null, 1, 1); // 2
f.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)

目录
相关文章
uniapp发送formdata表单请求(全网最简单方法)
因为uniapp不支持直接传输formdata,只提供了uploadFile方法上传文件,但是利用该方法就可以传输formdata了。
2909 1
|
资源调度 Kubernetes 应用服务中间件
Kubernetes Scheduler Framework 扩展: 2. Binpack
# 前言 ## 为什么需要Binpack功能? Kubernetes默认开启的资源调度策略是`LeastRequestedPriority`,消耗的资源最少的节点得分最高,优先被调度。这样的资源选择情况有可能导致较多的资源碎片,如下图所示,两个节点各剩余1GPU的资源,导致申请2GPU的作业无法调度,导致整体资源使用率下降。 如果使用的资源调度策略是Binpack,优先将节点
2077 0
|
6月前
|
存储 资源调度
在 Pinia 中如何实现状态持久化?
在 Pinia 中如何实现状态持久化?
1004 57
|
传感器 搜索推荐 安全
【Uniapp 专栏】从案例看 Uniapp 在物联网应用中的运用
【5月更文挑战第12天】Uniapp在物联网中展现出强大生命力,应用于智能家居系统,允许用户通过移动应用控制灯光、窗帘、家电等。通过网络通信与服务器连接,实现设备状态实时同步和用户指令准确传递。提供个性化场景设置,保证流畅体验并注重安全,支持数据加密和用户认证。结合传感器技术,实现环境监测。随着物联网发展,Uniapp有望在更多领域发挥关键作用,塑造更智能的未来。
706 3
|
机器学习/深度学习 存储 自然语言处理
|
10月前
|
前端开发 JavaScript API
React Native实战:构建跨平台移动应用
React Native实战:构建跨平台移动应用
157 0
|
12月前
|
人工智能 算法 大数据
2024年9月,程序员的焦虑!
程序员的焦虑源于行业内的激烈竞争与技术快速迭代。一方面,某些编程语言虽广泛使用,但市场已趋饱和;另一方面,大语言模型(LLM)的普及大幅提升了开发效率,使经验与创新能力变得更为关键。面对未来,可考虑三大方向:一是人工智能,不仅是算法研究,还包括大数据处理与应用;二是嵌入式,与AI结合有广阔前景;三是云计算,支撑大规模模型运行所需的强大计算与存储能力。这些方向将为程序员提供新的机遇。
275 3
|
存储 编译器 C语言
抓包工具 Fiddler 抓取 exe 包
抓包工具 Fiddler 抓取 exe 包
1265 0