乐趣区

关于javascript:热点面试题聊聊对-this-的理解

jiezi

前言

欢送关注『前端进阶圈』公众号，一起摸索学习前端技术 ……

前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待探讨点可随便评论，与各位同学一起学习~

聊聊对 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); // 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 > 办法调用模式 > 函数调用模式

文章特殊字符形容：

  1. 问题标注 Q:(question)
  2. 答案标注 R:(result)
  3. 注意事项规范：A:(attention matters)
  4. 详情形容标注：D:(detail info)
  5. 总结标注：S:(summary)
  6. 剖析标注：Ana:(analysis)
  7. 提醒标注：T:(tips)

往期回顾：

  • 热点面试题：浏览器和 Node 的宏工作和微工作？
  • 这是你了解的 CSS 选择器权重吗？
  • 热点面试题：JS 中 call, apply, bind 概念、用法、区别及实现？
  • 热点面试题：罕用位运算办法？
  • Vue 数据监听 Object.definedProperty() 办法的实现
  • 热点面试题：Virtual DOM 相干问题？
  • 热点面试题：Array 中有哪些非破坏性办法？

  • 热点面试题：协商缓存和强缓存的了解及区别？

    最初：

  • 欢送关注『前端进阶圈』公众号，一起摸索学习前端技术 ……
  • 公众号回复 加群 或 扫码, 即可退出前端交流学习群，长期交流学习 ……
  • 公众号回复 加好友，即可添加为好友
退出移动版