成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

javascript的this對(duì)象

roundstones / 636人閱讀

摘要:的使用環(huán)境分以下幾種情況普通函數(shù)調(diào)用作為構(gòu)造函數(shù)調(diào)用作為對(duì)象的方法來(lái)調(diào)用方法的調(diào)用普通函數(shù)調(diào)用單純函數(shù)調(diào)用屬于全局調(diào)用,指向指向?qū)ο螅跒g覽器著就是對(duì)象。

我們知道,this對(duì)象是在運(yùn)行時(shí)基于執(zhí)行函數(shù)的執(zhí)行環(huán)境綁定:在全局函數(shù)中,this等于window,而當(dāng)函數(shù)被當(dāng)做某個(gè)對(duì)象的方法調(diào)用時(shí),this等于那個(gè)對(duì)象。

this的使用環(huán)境分以下幾種情況:

普通函數(shù)調(diào)用

作為構(gòu)造函數(shù)調(diào)用

作為對(duì)象的方法來(lái)調(diào)用

call/apply/bind方法的調(diào)用

普通函數(shù)調(diào)用

單純函數(shù)調(diào)用屬于全局調(diào)用,this指向this指向Global對(duì)象,在瀏覽器著就是window對(duì)象。

var name = "the window";
function fn(){
    alert(this.name);
}
fn();    //the window

這個(gè)例子很好理解。在全局作用域中聲明的變量、函數(shù),都會(huì)變成window對(duì)象的屬性、方法,this指向window

var length = 10
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        fn() // ?
        arguments[0]() // ?
    }
}
obj.method(fn)      //10  1

這個(gè)例子就不太好理解了。這里fn依然是單純的函數(shù)調(diào)用,我們知道,每個(gè)函數(shù)在被調(diào)用時(shí),都會(huì)自動(dòng)取得兩個(gè)特殊變量:this和arguments。內(nèi)部函數(shù)搜索這兩個(gè)變量時(shí),只會(huì)搜索到其活動(dòng)對(duì)象為止。所以這里fn中的this指向window。
另外要注意arguments是一個(gè)對(duì)象,對(duì)象屬于除了點(diǎn)操作符還可以用中括號(hào),arguments[0]()其實(shí)是fn作為arguments對(duì)象的方法被調(diào)用,this指向arguments,因?yàn)閰?shù)只有一個(gè)fn,因此length為1

var length = 10
var obj = {
    length: 5,
    method: function() {
        function fn(){
            alert(this.length)
        }
        fn();
    }
}
obj.method()     //10

再稍微變換一下代碼,this依然指向window

作為對(duì)象的方法調(diào)用

函數(shù)被作為某個(gè)方法時(shí),this等于那個(gè)對(duì)象

var length = 10
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: fn
}
obj.method()      //5

再換一個(gè)例子

function fn(){
    alert(this.length)
}
var obj1 = {
    length: 5,
    method: fn
}
var obj2 = {
    length: 6,
    method: obj1.method
}
obj2.method()      //6
作為構(gòu)造函數(shù)調(diào)用

通過new操作符來(lái)調(diào)用函數(shù),創(chuàng)建一個(gè)新的對(duì)象,將構(gòu)造函數(shù)的作用域賦予給新對(duì)象,因此this指向這個(gè)新對(duì)象。

var name = "windowName";
function fn(name){
    this.name = name;
    this,sayName = function(){
        alert(this.name);
    }
}
fn("fnName");     //fnName
call/apply/bind方法的調(diào)用

這三個(gè)方法都是通過傳遞參數(shù)改變函數(shù)體內(nèi)的this。call和apply方法的作用相同,函數(shù)體內(nèi)的this指向的第一個(gè)參數(shù)。

var name = "window";
var o = {
    name: "object"
};

function fn(){
    alert(this.name)
}

fn.call(this);  //window
fn.call(window);  //window
fn.call(o);       //object
var obj1 = {
    n1:"n1",
    n2:"n2"
};
var obj2 = {
    n1:"nn1",
    n2:"nn2",
    fn:function(x,y){
        this.n1 = x;
        this.n2 = y;
    }
};
obj2.fn.call(obj1,"new1","new2");
console.log(obj1.n1);  //  new1
console.log(obj1.n2);  //  new2
console.log(obj2.n1);  //  nn1
console.log(obj2.n2);  //  nn2

bind方法會(huì)創(chuàng)建一個(gè)函數(shù)的實(shí)例,其this值會(huì)被綁定到傳給bind()函數(shù)的值

var obj1 = {
    n1:"n1",
    n2:"n2"
};
var obj2 = {
    n1:"nn1",
    n2:"nn2",
    fn:function(x,y){
        this.n1 = x;
        this.n2 = y;
    }
};
var obj = obj2.fn.bind(obj1);
obj("new1","new2");
console.log(obj1.n1);  //  new1
console.log(obj1.n2);  //  new2
console.log(obj2.n1);  //  nn1
console.log(obj2.n2);  //  nn2

參考資料

坑爹的js筆試題

JS中的this關(guān)鍵字詳解

關(guān)注作者吧~

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

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

相關(guān)文章

  • JavaScript深入淺出

    摘要:理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型,雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及,但是只要善于運(yùn)用,其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對(duì)方法,包括,,。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 怎樣使用 this 因?yàn)楸救藢儆趥吻岸?,因此文中只看懂?8 成左右,希望能夠給大家?guī)?lái)幫助....(據(jù)說是阿里的前端妹子寫的) this 的值到底...

    blair 評(píng)論0 收藏0
  • javascript技術(shù)難點(diǎn)(三)之this、new、apply和call詳解

    摘要:第四點(diǎn)也要著重講下,記住構(gòu)造函數(shù)被操作,要讓正常作用最好不能在構(gòu)造函數(shù)里 4) this、new、call和apply的相關(guān)問題 講解this指針的原理是個(gè)很復(fù)雜的問題,如果我們從javascript里this的實(shí)現(xiàn)機(jī)制來(lái)說明this,很多朋友可能會(huì)越來(lái)越糊涂,因此本篇打算換一個(gè)思路從應(yīng)用的角度來(lái)講解this指針,從這個(gè)角度理解this指針更加有現(xiàn)實(shí)意義。 下面我們看看在ja...

    ghnor 評(píng)論0 收藏0
  • JavaScript面向對(duì)象(object-oriented)編程

    摘要:對(duì)象在中,除了數(shù)字字符串布爾值這幾個(gè)簡(jiǎn)單類型外,其他的都是對(duì)象。那么在函數(shù)對(duì)象中,這兩個(gè)屬性的有什么區(qū)別呢表示該函數(shù)對(duì)象的原型表示使用來(lái)執(zhí)行該函數(shù)時(shí)這種函數(shù)一般成為構(gòu)造函數(shù),后面會(huì)講解,新創(chuàng)建的對(duì)象的原型。這時(shí)的函數(shù)通常稱為構(gòu)造函數(shù)。。 本文原發(fā)于我的個(gè)人博客,經(jīng)多次修改后發(fā)到sf上。本文仍在不斷修改中,最新版請(qǐng)?jiān)L問個(gè)人博客。 最近工作一直在用nodejs做開發(fā),有了nodejs,...

    JerryZou 評(píng)論0 收藏0
  • Javascript 深入淺出This

    摘要:中函數(shù)的調(diào)用有以下幾種方式作為對(duì)象方法調(diào)用,作為函數(shù)調(diào)用,作為構(gòu)造函數(shù)調(diào)用,和使用或調(diào)用。作為構(gòu)造函數(shù)調(diào)用中的構(gòu)造函數(shù)也很特殊,構(gòu)造函數(shù),其實(shí)就是通過這個(gè)函數(shù)生成一個(gè)新對(duì)象,這時(shí)候的就會(huì)指向這個(gè)新對(duì)象如果不使用調(diào)用,則和普通函數(shù)一樣。 this 是 JavaScript 比較特殊的關(guān)鍵字,本文將深入淺出的分析其在不同情況下的含義,可以這樣說,正確掌握了 JavaScript 中的 th...

    Y3G 評(píng)論0 收藏0
  • JavaScript進(jìn)階之’this

    摘要:所以相同點(diǎn)是,在全局范圍內(nèi),全局變量終究是屬于老大的。只生效一次引入了。只生效一次在箭頭函數(shù)中,與封閉詞法環(huán)境的保持一致。我通常把這些原始函數(shù)叫做構(gòu)造函數(shù)。在里面你可以嵌套函數(shù),也就是你可以在函數(shù)里面定義函數(shù)。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...

    shenhualong 評(píng)論0 收藏0
  • JavaScript 工廠函數(shù) vs 構(gòu)造函數(shù)

    摘要:當(dāng)談到語(yǔ)言與其他編程語(yǔ)言相比時(shí),你可能會(huì)聽到一些令人困惑東西,其中之一是工廠函數(shù)和構(gòu)造函數(shù)。好的,讓我們用構(gòu)造函數(shù)做同樣的實(shí)驗(yàn)。當(dāng)我們使用工廠函數(shù)創(chuàng)建對(duì)象時(shí),它的指向,而當(dāng)從構(gòu)造函數(shù)創(chuàng)建對(duì)象時(shí),它指向它的構(gòu)造函數(shù)原型對(duì)象。 showImg(https://segmentfault.com/img/bVbr58T?w=1600&h=900); 當(dāng)談到JavaScript語(yǔ)言與其他編程語(yǔ)言...

    RayKr 評(píng)論0 收藏0

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

0條評(píng)論

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