熱點面試題：聊聊對 this 的理解？詳情 - 前端,javascript,this,面試問題,javascript專題系列沉浸式趣談動態日志

前言

歡迎關注『前端進階圈』公眾號，一起探索學習前端技術......

前端小菜雞一枚，分享的文章純屬個人見解，若有不正確或可待討論點可隨意評論，與各位同學一起學習~

聊聊對 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