亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

FE.ES-理解ECMA Javascript的this

Meils / 2477人閱讀

摘要:捕獲所有參數(shù)綁定當(dāng)一個(gè)函數(shù)用作構(gòu)造函數(shù)時(shí)使用關(guān)鍵字,它的被綁定到正在構(gòu)造的新對(duì)象。使用來調(diào)用函數(shù),或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí),會(huì)自動(dòng)執(zhí)行下面的操作你不知道的創(chuàng)建或者說構(gòu)造一個(gè)全新的對(duì)象。在箭頭函數(shù)中,與封閉詞法上下文的保持一致。

this 實(shí)際上是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定,它指向什么完全取決于函數(shù)的調(diào)用位置(也就是函數(shù)的調(diào)用方法)。

四條規(guī)則:(你不知道的JS) 1. 默認(rèn)綁定
function foo() {
    console.log( this.a );
}
var a = 2;
foo(); // 2

無論是否在嚴(yán)格模式下,在全局執(zhí)行上下文中(在任何函數(shù)體外部)this 都指代全局對(duì)象。(MDN)
在嚴(yán)格模式下,this將保持他進(jìn)入執(zhí)行上下文時(shí)的值,如果 this 沒有被執(zhí)行上下文(execution context)定義,那它將保持為 undefined。(MDN)

function foo() {
    "use strict";
    console.log( this.a );
}
var a = 2;
foo(); // TypeError: this is undefined
2. 隱式綁定/丟失

當(dāng)函數(shù)作為對(duì)象里的方法被調(diào)用時(shí),它們的 this 是調(diào)用該函數(shù)的對(duì)象,且綁定只受最靠近的成員引用的影響。(MDN)

//隱式綁定
function foo() {
    console.log( this.a );
}
var obj2 = {
    a: 42,
    foo: foo
};
var obj1 = {
    a: 2,
    obj2: obj2
};
obj1.obj2.foo(); // 42
//隱式丟失
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 是全局對(duì)象的屬性
doFoo( obj.foo ); // "oops, global"
3. 顯示綁定

如果要想把 this 的值從一個(gè)上下文傳到另一個(gè),就要用 call 或者apply 方法。(MDN)
調(diào)用f.bind(someObject)會(huì)創(chuàng)建一個(gè)與f具有相同函數(shù)體和作用域的函數(shù),但是在這個(gè)新函數(shù)中,this將永久地被綁定到了bind的第一個(gè)參數(shù),無論這個(gè)函數(shù)是如何被調(diào)用的。

var obj = {
    count: 0,
    cool: function coolFn() {
    if (this.count < 1) {
        setTimeout( function timer(){
            this.count++; // this 是安全的
                            // 因?yàn)?bind(..)
            console.log( "more awesome" );
            }.bind( this ), 100 ); // look, bind()!
        }
    }
};
obj.cool(); // 更酷了。
硬綁定

創(chuàng)建一個(gè)包裹函數(shù),傳入所有的參數(shù)并返回接收到的所有值。
硬綁定會(huì)大大降低函數(shù)的靈活性,使用硬綁定之后就無法使用隱式綁定或者顯式綁定來修改 this 。

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

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

Function.prototype.softBind = function(obj) {
    var fn = this;
    var curried = [].slice.call( arguments, 1 );// 捕獲所有 curried 參數(shù)
    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;
};
4. new 綁定

當(dāng)一個(gè)函數(shù)用作構(gòu)造函數(shù)時(shí)(使用new關(guān)鍵字),它的this被綁定到正在構(gòu)造的新對(duì)象。(MDN)
使用 new 來調(diào)用函數(shù),或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí),會(huì)自動(dòng)執(zhí)行下面的操作(你不知道的JS)

創(chuàng)建(或者說構(gòu)造)一個(gè)全新的對(duì)象。

這個(gè)新對(duì)象會(huì)被執(zhí)行 [[ 原型 ]] 連接。

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

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

function foo(a) {
    this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2
四條規(guī)則優(yōu)先級(jí)

new 綁定 > 顯式綁定 > 隱式綁定 > 默認(rèn)綁定

函數(shù)是否在 new 中調(diào)用( new 綁定)?如果是的話 this 綁定的是新創(chuàng)建的對(duì)象。

 var bar = new foo()

函數(shù)是否通過 call 、 apply (顯式綁定)或者硬綁定調(diào)用?如果是的話, this 綁定的是指定的對(duì)象。
另外:如果綁定 null 或者 undefined ,實(shí)際應(yīng)用的是默認(rèn)綁定規(guī)則。

 var bar = foo.call(obj2)

函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用(隱式綁定)?如果是的話, this 綁定的是那個(gè)上下文對(duì)象。

 var bar = obj1.foo()

如果都不是的話,使用默認(rèn)綁定。如果在嚴(yán)格模式下,就綁定到 undefined ,否則綁定到全局對(duì)象。

 var bar = foo()

其中:間接引用函數(shù)會(huì)應(yīng)用默認(rèn)綁定規(guī)則

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

例外 1. 箭頭函數(shù)

箭頭函數(shù)不使用 this 的四種標(biāo)準(zhǔn)規(guī)則,而是根據(jù)外層(函數(shù)或者全局)作用域來決定 this 。
在箭頭函數(shù)中,this與封閉詞法上下文的this保持一致。(MDN)
箭頭函數(shù)會(huì)繼承外層函數(shù)調(diào)用的 this 綁定(無論 this 綁定到什么)。這其實(shí)和self = this 機(jī)制一樣。
箭頭函數(shù)的綁定無法被修改。

2. nodejs
setTimeout(function() { 
    console.log(this) 
    //瀏覽器中:window 
    //nodejs中:Timeout實(shí)例
}, 0) 
其他解釋

https://www.zhihu.com/questio...
func(p1, p2) 等價(jià)于
func.call(undefined, p1, p2)

obj.child.method(p1, p2) 等價(jià)于
obj.child.method.call(obj.child, p1, p2)

如果你傳的 context 就 null 或者 undefined,那么 window 對(duì)象就是默認(rèn)的 context(嚴(yán)格模式下默認(rèn) context 是 undefined)

例子
    var number = 50;
    var obj = {
        number: 60,
        getNum: function () {
        var number = 70;
        return this.number;
    }
    }; 

    alert(obj.getNum());
    alert(obj.getNum.call());
    alert(obj.getNum.call({number:20}));

參考資料:
深入理解JavaScript系列(13):This? Yes,this!
MDN-this
《你不知道的JS上卷》閱讀小記之setTimeout的this指向問題Script
JavaScript 的 this 原理-阮一峰
如何理解 JavaScript 中的 this 關(guān)鍵字?-方應(yīng)杭-知乎
JS this 相關(guān)問題

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/99348.html

相關(guān)文章

  • FE.ES-理解ECMA Javascriptthis

    摘要:捕獲所有參數(shù)綁定當(dāng)一個(gè)函數(shù)用作構(gòu)造函數(shù)時(shí)使用關(guān)鍵字,它的被綁定到正在構(gòu)造的新對(duì)象。使用來調(diào)用函數(shù),或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí),會(huì)自動(dòng)執(zhí)行下面的操作你不知道的創(chuàng)建或者說構(gòu)造一個(gè)全新的對(duì)象。在箭頭函數(shù)中,與封閉詞法上下文的保持一致。 this 實(shí)際上是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定,它指向什么完全取決于函數(shù)的調(diào)用位置(也就是函數(shù)的調(diào)用方法)。 四條規(guī)則:(你不知道的JS) 1. 默認(rèn)綁定 func...

    elliott_hu 評(píng)論0 收藏0
  • FE.ES-理解ECMA Javascript原型

    摘要:但是,它是用構(gòu)造器調(diào)用來這樣做的。本質(zhì)是因?yàn)樽尯瘮?shù)調(diào)用變成了構(gòu)造器調(diào)用假設(shè)有一個(gè)需要繼承的一個(gè)類型添加一個(gè)屬性如何檢查類繼承自省錯(cuò)誤方法只能查詢的祖先。 名詞解析 字面量對(duì)象字面量 var a = {};數(shù)組字面量 var arr = [1,2,3];正則表達(dá)式字面量 var reg = /[a-z]/g; 屬性描述符 configurable:fasle是一個(gè)單向操作,同時(shí)阻止使...

    ssshooter 評(píng)論0 收藏0
  • FE.ES-理解ECMA Javascript原型

    摘要:但是,它是用構(gòu)造器調(diào)用來這樣做的。本質(zhì)是因?yàn)樽尯瘮?shù)調(diào)用變成了構(gòu)造器調(diào)用假設(shè)有一個(gè)需要繼承的一個(gè)類型添加一個(gè)屬性如何檢查類繼承自省錯(cuò)誤方法只能查詢的祖先。 名詞解析 字面量對(duì)象字面量 var a = {};數(shù)組字面量 var arr = [1,2,3];正則表達(dá)式字面量 var reg = /[a-z]/g; 屬性描述符 configurable:fasle是一個(gè)單向操作,同時(shí)阻止使...

    Charles 評(píng)論0 收藏0
  • FE.ES-理解ECMA Javascript原型

    摘要:但是,它是用構(gòu)造器調(diào)用來這樣做的。本質(zhì)是因?yàn)樽尯瘮?shù)調(diào)用變成了構(gòu)造器調(diào)用假設(shè)有一個(gè)需要繼承的一個(gè)類型添加一個(gè)屬性如何檢查類繼承自省錯(cuò)誤方法只能查詢的祖先。 名詞解析 字面量對(duì)象字面量 var a = {};數(shù)組字面量 var arr = [1,2,3];正則表達(dá)式字面量 var reg = /[a-z]/g; 屬性描述符 configurable:fasle是一個(gè)單向操作,同時(shí)阻止使...

    劉東 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<