【進(jìn)階3-1期】JavaScript深入之史上最全--5種this綁定全面解析

xavier 發(fā)布于2019-08-23 13:47 / 2935人閱讀

摘要：在嚴(yán)格模式下調(diào)用函數(shù)則不影響默認(rèn)綁定。回調(diào)函數(shù)丟失綁定是非常常見的。因?yàn)橹苯又付ǖ慕壎▽ο?，稱之為顯示綁定。調(diào)用時(shí)強(qiáng)制把的綁定到上顯示綁定無法解決丟失綁定問題。

（關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）

本周正式開始前端進(jìn)階的第三期，本周的主題是this全面解析，今天是第9天。

本計(jì)劃一共28期，每期重點(diǎn)攻克一個(gè)面試重難點(diǎn)，如果你還不了解本進(jìn)階計(jì)劃，點(diǎn)擊查看前端進(jìn)階的破冰之旅

如果覺得本系列不錯(cuò)，歡迎轉(zhuǎn)發(fā)，您的支持就是我堅(jiān)持的最大動(dòng)力。

本期推薦文章

你不知道的JavaScript上卷—筆記，由于微信不能訪問外鏈，點(diǎn)擊閱讀原文就可以啦。

推薦理由

這篇文章是我的讀書筆記，非常詳細(xì)的記錄了this綁定的5種規(guī)則，有代碼，有解釋，看完絕對攻克this盲區(qū)，加油。

閱讀筆記

this的綁定規(guī)則總共有下面5種。

1、默認(rèn)綁定（嚴(yán)格/非嚴(yán)格模式）

2、隱式綁定

3、顯式綁定

4、new綁定

5、箭頭函數(shù)綁定

現(xiàn)在開始一個(gè)一個(gè)介紹，內(nèi)容來自《你不知道的JS》筆記整理。

1 調(diào)用位置

調(diào)用位置就是函數(shù)在代碼中被調(diào)用的位置（而不是聲明的位置）。

查找方法：

分析調(diào)用棧：調(diào)用位置就是當(dāng)前正在執(zhí)行的函數(shù)的前一個(gè)調(diào)用中

function baz() {
    // 當(dāng)前調(diào)用棧是：baz
    // 因此，當(dāng)前調(diào)用位置是全局作用域
    
    console.log( "baz" );
    bar(); // <-- bar的調(diào)用位置
}

function bar() {
    // 當(dāng)前調(diào)用棧是：baz --> bar
    // 因此，當(dāng)前調(diào)用位置在baz中
    
    console.log( "bar" );
    foo(); // <-- foo的調(diào)用位置
}

function foo() {
    // 當(dāng)前調(diào)用棧是：baz --> bar --> foo
    // 因此，當(dāng)前調(diào)用位置在bar中
    
    console.log( "foo" );
}

baz(); // <-- baz的調(diào)用位置

使用開發(fā)者工具得到調(diào)用棧：

設(shè)置斷點(diǎn)或者插入debugger;語句，運(yùn)行時(shí)調(diào)試器會(huì)在那個(gè)位置暫停，同時(shí)展示當(dāng)前位置的函數(shù)調(diào)用列表，這就是調(diào)用棧。找到棧中的第二個(gè)元素，這就是真正的調(diào)用位置。

2 綁定規(guī)則

2.1 默認(rèn)綁定

獨(dú)立函數(shù)調(diào)用，可以把默認(rèn)綁定看作是無法應(yīng)用其他規(guī)則時(shí)的默認(rèn)規(guī)則，this指向全局對象。

嚴(yán)格模式下，不能將全局對象用于默認(rèn)綁定，this會(huì)綁定到undefined。只有函數(shù)運(yùn)行在非嚴(yán)格模式下，默認(rèn)綁定才能綁定到全局對象。在嚴(yán)格模式下調(diào)用函數(shù)則不影響默認(rèn)綁定。

function foo() { // 運(yùn)行在嚴(yán)格模式下，this會(huì)綁定到undefined
    "use strict";
    
    console.log( this.a );
}

var a = 2;

// 調(diào)用
foo(); // TypeError: Cannot read property "a" of undefined

// --------------------------------------

function foo() { // 運(yùn)行
    console.log( this.a );
}

var a = 2;

(function() { // 嚴(yán)格模式下調(diào)用函數(shù)則不影響默認(rèn)綁定
    "use strict";
    
    foo(); // 2
})();

2.2 隱式綁定

當(dāng)函數(shù)引用有上下文對象時(shí)，隱式綁定規(guī)則會(huì)把函數(shù)中的this綁定到這個(gè)上下文對象。對象屬性引用鏈中只有上一層或者說最后一層在調(diào)用中起作用。

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2,
    foo: foo
};

obj.foo(); // 2

隱式丟失

被隱式綁定的函數(shù)特定情況下會(huì)丟失綁定對象，應(yīng)用默認(rèn)綁定，把this綁定到全局對象或者undefined上。

// 雖然bar是obj.foo的一個(gè)引用，但是實(shí)際上，它引用的是foo函數(shù)本身。
// bar()是一個(gè)不帶任何修飾的函數(shù)調(diào)用，應(yīng)用默認(rèn)綁定。
function foo() {
    console.log( this.a );
}

var obj = {
    a: 2,
    foo: foo
};

var bar = obj.foo; // 函數(shù)別名

var a = "oops, global"; // a是全局對象的屬性

bar(); // "oops, global"

參數(shù)傳遞就是一種隱式賦值，傳入函數(shù)時(shí)也會(huì)被隱式賦值。回調(diào)函數(shù)丟失this綁定是非常常見的。

function foo() {
    console.log( this.a );
}

function doFoo(fn) {
    // fn其實(shí)引用的是foo
    
    fn(); // <-- 調(diào)用位置！
}

var obj = {
    a: 2,
    foo: foo
};

var a = "oops, global"; // a是全局對象的屬性

doFoo( obj.foo ); // "oops, global"

// ----------------------------------------

// JS環(huán)境中內(nèi)置的setTimeout()函數(shù)實(shí)現(xiàn)和下面的偽代碼類似：
function setTimeout(fn, delay) {
    // 等待delay毫秒
    fn(); // <-- 調(diào)用位置！
}

2.3 顯式綁定

通過call(..) 或者 apply(..)方法。第一個(gè)參數(shù)是一個(gè)對象，在調(diào)用函數(shù)時(shí)將這個(gè)對象綁定到this。因?yàn)橹苯又付╰his的綁定對象，稱之為顯示綁定。

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2
};

foo.call( obj ); // 2  調(diào)用foo時(shí)強(qiáng)制把foo的this綁定到obj上

顯示綁定無法解決丟失綁定問題。

解決方案：

1、硬綁定

創(chuàng)建函數(shù)bar()，并在它的內(nèi)部手動(dòng)調(diào)用foo.call(obj)，強(qiáng)制把foo的this綁定到了obj。這種方式讓我想起了借用構(gòu)造函數(shù)繼承，沒看過的可以點(diǎn)擊查看 JavaScript常用八種繼承方案

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2
};

var bar = function() {
    foo.call( obj );
};

bar(); // 2
setTimeout( bar, 100 ); // 2

// 硬綁定的bar不可能再修改它的this
bar.call( window ); // 2

典型應(yīng)用場景是創(chuàng)建一個(gè)包裹函數(shù)，負(fù)責(zé)接收參數(shù)并返回值。

function foo(something) {
    console.log( this.a, something );
    return this.a + something;
}

var obj = {
    a: 2
};

var bar = function() {
    return foo.apply( obj, arguments );
};

var b = bar( 3 ); // 2 3
console.log( b ); // 5

創(chuàng)建一個(gè)可以重復(fù)使用的輔助函數(shù)。

function foo(something) {
    console.log( this.a, something );
    return this.a + something;
}

// 簡單的輔助綁定函數(shù)
function bind(fn, obj) {
    return function() {
        return fn.apply( obj, arguments );
    }
}

var obj = {
    a: 2
};

var bar = bind( foo, obj );

var b = bar( 3 ); // 2 3
console.log( b ); // 5

ES5內(nèi)置了Function.prototype.bind，bind會(huì)返回一個(gè)硬綁定的新函數(shù)，用法如下。

function foo(something) {
    console.log( this.a, something );
    return this.a + something;
}

var obj = {
    a: 2
};

var bar = foo.bind( obj );

var b = bar( 3 ); // 2 3
console.log( b ); // 5

2、API調(diào)用的“上下文”

JS許多內(nèi)置函數(shù)提供了一個(gè)可選參數(shù)，被稱之為“上下文”（context），其作用和bind(..)一樣，確?；卣{(diào)函數(shù)使用指定的this。這些函數(shù)實(shí)際上通過call(..)和apply(..)實(shí)現(xiàn)了顯式綁定。

function foo(el) {
    console.log( el, this.id );
}

var obj = {
    id: "awesome"
}

var myArray = [1, 2, 3]
// 調(diào)用foo(..)時(shí)把this綁定到obj
myArray.forEach( foo, obj );
// 1 awesome 2 awesome 3 awesome

2.4 new綁定

在JS中，構(gòu)造函數(shù)只是使用new操作符時(shí)被調(diào)用的普通函數(shù)，他們不屬于某個(gè)類，也不會(huì)實(shí)例化一個(gè)類。

包括內(nèi)置對象函數(shù)（比如Number(..)）在內(nèi)的所有函數(shù)都可以用new來調(diào)用，這種函數(shù)調(diào)用被稱為構(gòu)造函數(shù)調(diào)用。

實(shí)際上并不存在所謂的“構(gòu)造函數(shù)”，只有對于函數(shù)的“構(gòu)造調(diào)用”。

使用new來調(diào)用函數(shù)，或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。

1、創(chuàng)建（或者說構(gòu)造）一個(gè)新對象。

2、這個(gè)新對象會(huì)被執(zhí)行[[Prototype]]連接。

3、這個(gè)新對象會(huì)綁定到函數(shù)調(diào)用的this。

4、如果函數(shù)沒有返回其他對象，那么new表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對象。

使用new來調(diào)用foo(..)時(shí)，會(huì)構(gòu)造一個(gè)新對象并把它（bar）綁定到foo(..)調(diào)用中的this。

function foo(a) {
    this.a = a;
}

var bar = new foo(2); // bar和foo(..)調(diào)用中的this進(jìn)行綁定
console.log( bar.a ); // 2

手寫一個(gè)new實(shí)現(xiàn)

function create() {
    // 創(chuàng)建一個(gè)空的對象
    let obj = new Object()
    // 獲得構(gòu)造函數(shù)
    let Con = [].shift.call(arguments)
    // 鏈接到原型
    obj.__proto__ = Con.prototype
    // 綁定 this，執(zhí)行構(gòu)造函數(shù)
    let result = Con.apply(obj, arguments)
    // 確保 new 出來的是個(gè)對象
    return typeof result === "object" ? result : obj
}

使用這個(gè)手寫的new

function Person() {...}

// 使用內(nèi)置函數(shù)new
var person = new Person(...)
                        
// 使用手寫的new，即create
var person = create(Person, ...)

代碼原理解析：

1、用new Object() 的方式新建了一個(gè)對象obj

2、取出第一個(gè)參數(shù)，就是我們要傳入的構(gòu)造函數(shù)。此外因?yàn)?shift 會(huì)修改原數(shù)組，所以 arguments 會(huì)被去除第一個(gè)參數(shù)

3、將 obj 的原型指向構(gòu)造函數(shù)，這樣 obj 就可以訪問到構(gòu)造函數(shù)原型中的屬性

4、使用 apply，改變構(gòu)造函數(shù) this 的指向到新建的對象，這樣 obj 就可以訪問到構(gòu)造函數(shù)中的屬性

5、返回 obj

3 優(yōu)先級

st=>start: Start
e=>end: End
cond1=>condition: new綁定
op1=>operation: this綁定新創(chuàng)建的對象，
                var bar = new foo()
                
cond2=>condition: 顯示綁定
op2=>operation: this綁定指定的對象，
                var bar = foo.call(obj2)
                
cond3=>condition: 隱式綁定
op3=>operation: this綁定上下文對象，
                var bar = obj1.foo()
                
op4=>operation: 默認(rèn)綁定
op5=>operation: 函數(shù)體嚴(yán)格模式下綁定到undefined，
                否則綁定到全局對象，
                var bar = foo()

st->cond1
cond1(yes)->op1->e
cond1(no)->cond2
cond2(yes)->op2->e
cond2(no)->cond3
cond3(yes)->op3->e
cond3(no)->op4->op5->e

在new中使用硬綁定函數(shù)的目的是預(yù)先設(shè)置函數(shù)的一些參數(shù)，這樣在使用new進(jìn)行初始化時(shí)就可以只傳入其余的參數(shù)（柯里化）。

function foo(p1, p2) {
    this.val = p1 + p2;
}

// 之所以使用null是因?yàn)樵诒纠形覀儾⒉魂P(guān)心硬綁定的this是什么
// 反正使用new時(shí)this會(huì)被修改
var bar = foo.bind( null, "p1" );

var baz = new bar( "p2" );

baz.val; // p1p2

4 綁定例外

4.1 被忽略的this

把null或者undefined作為this的綁定對象傳入call、apply或者bind，這些值在調(diào)用時(shí)會(huì)被忽略，實(shí)際應(yīng)用的是默認(rèn)規(guī)則。

下面兩種情況下會(huì)傳入null

使用apply(..)來“展開”一個(gè)數(shù)組，并當(dāng)作參數(shù)傳入一個(gè)函數(shù)

bind(..)可以對參數(shù)進(jìn)行柯里化（預(yù)先設(shè)置一些參數(shù)）

function foo(a, b) {
    console.log( "a:" + a + "，b:" + b );
}

// 把數(shù)組”展開“成參數(shù)
foo.apply( null, [2, 3] ); // a:2，b:3

// 使用bind(..)進(jìn)行柯里化
var bar = foo.bind( null, 2 );
bar( 3 ); // a:2，b:3

總是傳入null來忽略this綁定可能產(chǎn)生一些副作用。如果某個(gè)函數(shù)確實(shí)使用了this，那默認(rèn)綁定規(guī)則會(huì)把this綁定到全局對象中。

更安全的this

安全的做法就是傳入一個(gè)特殊的對象（空對象），把this綁定到這個(gè)對象不會(huì)對你的程序產(chǎn)生任何副作用。

JS中創(chuàng)建一個(gè)空對象最簡單的方法是Object.create(null)，這個(gè)和{}很像，但是并不會(huì)創(chuàng)建Object.prototype這個(gè)委托，所以比{}更空。

function foo(a, b) {
    console.log( "a:" + a + "，b:" + b );
}

// 我們的空對象
var ? = Object.create( null );

// 把數(shù)組”展開“成參數(shù)
foo.apply( ?, [2, 3] ); // a:2，b:3

// 使用bind(..)進(jìn)行柯里化
var bar = foo.bind( ?, 2 );
bar( 3 ); // a:2，b:3

4.2 間接引用

間接引用下，調(diào)用這個(gè)函數(shù)會(huì)應(yīng)用默認(rèn)綁定規(guī)則。間接引用最容易在賦值時(shí)發(fā)生。

// p.foo = o.foo的返回值是目標(biāo)函數(shù)的引用，所以調(diào)用位置是foo()而不是p.foo()或者o.foo()
function foo() {
    console.log( this.a );
}

var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4};

o.foo(); // 3
(p.foo = o.foo)(); // 2

4.3 軟綁定

硬綁定可以把this強(qiáng)制綁定到指定的對象（new除外），防止函數(shù)調(diào)用應(yīng)用默認(rèn)綁定規(guī)則。但是會(huì)降低函數(shù)的靈活性，使用硬綁定之后就無法使用隱式綁定或者顯式綁定來修改this。

如果給默認(rèn)綁定指定一個(gè)全局對象和undefined以外的值，那就可以實(shí)現(xiàn)和硬綁定相同的效果，同時(shí)保留隱式綁定或者顯示綁定修改this的能力。

// 默認(rèn)綁定規(guī)則，優(yōu)先級排最后
// 如果this綁定到全局對象或者undefined，那就把指定的默認(rèn)對象obj綁定到this,否則不會(huì)修改this
if(!Function.prototype.softBind) {
    Function.prototype.softBind = function(obj) {
        var fn = this;
        // 捕獲所有curried參數(shù)
        var curried = [].slice.call( arguments, 1 ); 
        var bound = function() {
            return fn.apply(
                (!this || this === (window || global)) ? 
                    obj : this,
                curried.concat.apply( curried, arguments )
            );
        };
        bound.prototype = Object.create( fn.prototype );
        return bound;
    };
}

使用：軟綁定版本的foo()可以手動(dòng)將this綁定到obj2或者obj3上，但如果應(yīng)用默認(rèn)綁定，則會(huì)將this綁定到obj。

function foo() {
    console.log("name:" + this.name);
}

var obj = { name: "obj" },
    obj2 = { name: "obj2" },
    obj3 = { name: "obj3" };

// 默認(rèn)綁定，應(yīng)用軟綁定，軟綁定把this綁定到默認(rèn)對象obj
var fooOBJ = foo.softBind( obj );
fooOBJ(); // name: obj 

// 隱式綁定規(guī)則
obj2.foo = foo.softBind( obj );
obj2.foo(); // name: obj2 <---- 看?。?！

// 顯式綁定規(guī)則
fooOBJ.call( obj3 ); // name: obj3 <---- 看！??！

// 綁定丟失，應(yīng)用軟綁定
setTimeout( obj2.foo, 10 ); // name: obj

5 this詞法

ES6新增一種特殊函數(shù)類型：箭頭函數(shù)，箭頭函數(shù)無法使用上述四條規(guī)則，而是根據(jù)外層（函數(shù)或者全局）作用域（詞法作用域）來決定this。

foo()內(nèi)部創(chuàng)建的箭頭函數(shù)會(huì)捕獲調(diào)用時(shí)foo()的this。由于foo()的this綁定到obj1，bar(引用箭頭函數(shù))的this也會(huì)綁定到obj1，箭頭函數(shù)的綁定無法被修改(new也不行)。

function foo() {
    // 返回一個(gè)箭頭函數(shù)
    return (a) => {
        // this繼承自foo()
        console.log( this.a );
    };
}

var obj1 = {
    a: 2
};

var obj2 = {
    a: 3
}

var bar = foo.call( obj1 );
bar.call( obj2 ); // 2，不是3！

ES6之前和箭頭函數(shù)類似的模式，采用的是詞法作用域取代了傳統(tǒng)的this機(jī)制。

function foo() {
    var self = this; // lexical capture of this
    setTimeout( function() {
        console.log( self.a ); // self只是繼承了foo()函數(shù)的this綁定
    }, 100 );
}

var obj = {
    a: 2
};

foo.call(obj); // 2

代碼風(fēng)格統(tǒng)一問題：如果既有this風(fēng)格的代碼，還會(huì)使用 seft = this 或者箭頭函數(shù)來否定this機(jī)制。

只使用詞法作用域并完全拋棄錯(cuò)誤this風(fēng)格的代碼；

完全采用this風(fēng)格，在必要時(shí)使用bind(..)，盡量避免使用 self = this 和箭頭函數(shù)。

上期思考題解

代碼1：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

checkscope();

代碼2：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

var foo = checkscope(); 
foo();

上面的兩個(gè)代碼中，checkscope()執(zhí)行完成后，閉包f所引用的自由變量scope會(huì)被垃圾回收嗎？為什么？

解答：

checkscope()執(zhí)行完成后，代碼1中自由變量特定時(shí)間之后回收，代碼2中自由變量不回收。

首先要說明的是，現(xiàn)在主流瀏覽器的垃圾回收算法是標(biāo)記清除，標(biāo)記清除并非是標(biāo)記執(zhí)行棧的進(jìn)出，而是從根開始遍歷，也是一個(gè)找引用關(guān)系的過程，但是因?yàn)閺母_始，相互引用的情況不會(huì)被計(jì)入。所以當(dāng)垃圾回收開始時(shí)，從Root（全局對象）開始尋找這個(gè)對象的引用是否可達(dá)，如果引用鏈斷裂，那么這個(gè)對象就會(huì)回收。

閉包中的作用域鏈中 parentContext.vo 是對象，被放在堆中，棧中的變量會(huì)隨著執(zhí)行環(huán)境進(jìn)出而銷毀，堆中需要垃圾回收，閉包內(nèi)的自由變量會(huì)被分配到堆上，所以當(dāng)外部方法執(zhí)行完畢后，對其的引用并沒有丟。

每次進(jìn)入函數(shù)執(zhí)行時(shí)，會(huì)重新創(chuàng)建可執(zhí)行環(huán)境和活動(dòng)對象，但函數(shù)的[[Scope]]是函數(shù)定義時(shí)就已經(jīng)定義好的（詞法作用域規(guī)則），不可更改。

對于代碼1：

checkscope()執(zhí)行時(shí),將checkscope對象指針壓入棧中，其執(zhí)行環(huán)境變量如下

checkscopeContext:{
    AO:{
        arguments:
        scope:
        f:
    },
    this,
    [[Scope]]:[AO, globalContext.VO]
}

執(zhí)行完畢后出棧，該對象沒有綁定給誰，從Root開始查找無法可達(dá)，此活動(dòng)對象一段時(shí)間后會(huì)被回收

對于代碼2：

checkscope()執(zhí)行后，返回的是f對象，其執(zhí)行環(huán)境變量如下

fContext:{
    AO:{
        arguments:
    },
    this,
    [[Scope]]:[AO, checkscopeContext.AO, globalContext.VO]
}

此對象賦值給var foo = checkscope();，將foo 壓入棧中，foo 指向堆中的f活動(dòng)對象,對于Root來說可達(dá)，不會(huì)被回收。

如果一定要自由變量scope回收，那么該怎么辦？？？

很簡單，foo = null;，把引用斷開就可以了。

本期思考題

依次給出console.log輸出的數(shù)值。

var num = 1;
var myObject = {
    num: 2,
    add: function() {
        this.num = 3;
        (function() {
            console.log(this.num);
            this.num = 4;
        })();
        console.log(this.num);
    },
    sub: function() {
        console.log(this.num)
    }
}
myObject.add();
console.log(myObject.num);
console.log(num);
var sub = myObject.sub;
sub();

參考

你不知道的JavaScript上卷—筆記

Javascript 閉包，引用的變量是否被回收？

往期文章查看

【進(jìn)階1-1期】理解JavaScript 中的執(zhí)行上下文和執(zhí)行棧

【進(jìn)階1-2期】JavaScript深入之執(zhí)行上下文棧和變量對象

【進(jìn)階1-3期】JavaScript深入之內(nèi)存空間詳細(xì)圖解

【進(jìn)階1-4期】JavaScript深入之帶你走進(jìn)內(nèi)存機(jī)制

【進(jìn)階1-5期】JavaScript深入之4類常見內(nèi)存泄漏及如何避免

【進(jìn)階2-1期】深入淺出圖解作用域鏈和閉包

【進(jìn)階2-2期】JavaScript深入之從作用域鏈理解閉包

每周計(jì)劃安排

每周面試重難點(diǎn)計(jì)劃如下，如有修改會(huì)通知大家。每周一期，為期半年，準(zhǔn)備明年跳槽的小伙伴們可以把本公眾號[置頂]()了。

【進(jìn)階1期】調(diào)用堆棧

【進(jìn)階2期】作用域閉包

【進(jìn)階3期】 this全面解析

【進(jìn)階4期】深淺拷貝原理

【進(jìn)階5期】原型Prototype

【進(jìn)階6期】高階函數(shù)

【進(jìn)階7期】事件機(jī)制

【進(jìn)階8期】 Event Loop原理

【進(jìn)階9期】 Promise原理

【進(jìn)階10期】Async/Await原理

【進(jìn)階11期】防抖/節(jié)流原理

【進(jìn)階12期】模塊化詳解

【進(jìn)階13期】ES6重難點(diǎn)

【進(jìn)階14期】計(jì)算機(jī)網(wǎng)絡(luò)概述

【進(jìn)階15期】瀏覽器渲染原理

【進(jìn)階16期】webpack配置

【進(jìn)階17期】webpack原理

【進(jìn)階18期】前端監(jiān)控

【進(jìn)階19期】跨域和安全

【進(jìn)階20期】性能優(yōu)化

【進(jìn)階21期】VirtualDom原理

【進(jìn)階22期】Diff算法

【進(jìn)階23期】MVVM雙向綁定

【進(jìn)階24期】Vuex原理

【進(jìn)階25期】Redux原理

【進(jìn)階26期】路由原理

【進(jìn)階27期】VueRouter源碼解析

【進(jìn)階28期】ReactRouter源碼解析

交流

本人Github鏈接如下，歡迎各位Star

http://github.com/yygmind/blog

我是木易楊，網(wǎng)易高級前端工程師，跟著我每周重點(diǎn)攻克一個(gè)前端面試重難點(diǎn)。接下來讓我?guī)阕哌M(jìn)高級前端的世界，在進(jìn)階的路上，共勉！

如果你想加群討論每期面試知識(shí)點(diǎn)，公眾號回復(fù)[加群]即可

云服務(wù)器 GPU云服務(wù)器 javascript的this javaScript中的this javascript進(jìn)階 javascript中this詳解

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99548.html

發(fā)表評論

登陸后可評論

0條評論

xavier

男|高級講師

我要關(guān)注我要私信

TA的文章

立根鑄魂，麒麟信安攜手歐拉共推操作系統(tǒng)產(chǎn)業(yè)新發(fā)展

閱讀 2066·2021-11-11 16:54
【劍指offer系列刷題】第一篇——尋找單身狗

閱讀 1046·2021-10-12 10:12
《CSS世界》閱讀筆記（一）

閱讀 386·2019-08-30 15:43
css flex 之 flex-grow | flex-direction

閱讀 652·2019-08-29 13:15
深入理解ES6之《Symbol》

閱讀 1080·2019-08-29 13:12
同源策略與跨域

閱讀 1531·2019-08-26 12:09
JavaScript正則表達(dá)式

閱讀 1662·2019-08-26 10:24
Threejs之 .obj 模型投影

閱讀 2263·2019-08-26 10:15

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

【進(jìn)階3-1期】JavaScript深入之史上最全--5種this綁定全面解析

2.1 默認(rèn)綁定

2.2 隱式綁定

2.3 顯式綁定

2.4 new綁定

4.1 被忽略的this

4.2 間接引用

4.3 軟綁定

相關(guān)文章

【進(jìn)階3-2期】JavaScript深入之重新認(rèn)識(shí)箭頭函數(shù)的this

**【進(jìn)階1-1期】理解JavaScript 中的執(zhí)行上下文和執(zhí)行棧**

正在暑假中的《課多周刊》(第1期)

正在暑假中的《課多周刊》(第1期)

**【進(jìn)階3-5期】深度解析 new 原理及模擬實(shí)現(xiàn)**

發(fā)表評論

0條評論

xavier

男|高級講師

TA的文章

立根鑄魂，麒麟信安攜手歐拉共推操作系統(tǒng)產(chǎn)業(yè)新發(fā)展

【劍指offer系列刷題】第一篇——尋找單身狗

《CSS世界》閱讀筆記（一）

css flex 之 flex-grow | flex-direction

深入理解ES6之《Symbol》

同源策略與跨域

JavaScript正則表達(dá)式

Threejs之 .obj 模型投影

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

【進(jìn)階3-1期】JavaScript深入之史上最全--5種this綁定全面解析

2.1 默認(rèn)綁定

2.2 隱式綁定

2.3 顯式綁定

2.4 new綁定

4.1 被忽略的this

4.2 間接引用

4.3 軟綁定

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！