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

資訊專欄INFORMATION COLUMN

徹底掌握this,apply,call

liangzai_cool / 2742人閱讀

摘要：說(shuō)起里面比較頭疼的知識(shí)點(diǎn)的指向與的理解這三者肯定算的上前幾好的開(kāi)發(fā)者這是必須邁過(guò)的檻今天就總結(jié)下這三者緊密相連的關(guān)系首先推薦理解的用法格式，，，的傳參個(gè)數(shù)不限第一個(gè)數(shù)表示調(diào)用函數(shù)函數(shù)體內(nèi)的指向從第二個(gè)參數(shù)開(kāi)始依次按序傳入函數(shù)表示函數(shù)指向表示

說(shuō)起js里面比較頭疼的知識(shí)點(diǎn),this的指向,call與apply的理解這三者肯定算的上前幾,好的js開(kāi)發(fā)者這是必須邁過(guò)的檻.今天就總結(jié)下這三者緊密相連的關(guān)系.

首先推薦理解call的用法

Function.prototype.call

格式:fx.call( thisArg [，arg1，arg2，… ] );

call的傳參個(gè)數(shù)不限,第一個(gè)數(shù)表示調(diào)用函數(shù)(fx)函數(shù)體內(nèi)this的指向.從第二個(gè)參數(shù)開(kāi)始依次按序傳入函數(shù).

var age = 40;
var xiaoMing = {
    age:30
};
var xiaoLi = {
    age: 20
};
var getAge = function(){
    console.log(this.age);
};
 getAge.call( xiaoMing );  //30 表示函數(shù)this指向xiaoMing
getAge.call(xiaoLi);  //20  表示函數(shù)this指向xiaoLi
getAge.call(undefined);//40  getAge.call(undefined)==getAge.call(null)
getAge.call(null);//40
getAge(); //40

如果我們傳入fx.call()的第一個(gè)參數(shù)數(shù)為null,那么表示函數(shù)fx體內(nèi)this指向宿主對(duì)象,在瀏覽器是Window對(duì)象,這也解釋了getAge.call(undefined);//40。

**在此基礎(chǔ)我們可以理解為 getAge()相當(dāng)于getAge.call(null/undefined),擴(kuò)展到所有函數(shù),
fx()==fx.call(null) == fx.call(undefined)
**

值得注意的是嚴(yán)格模式下有點(diǎn)區(qū)別: this指向null

var getAge = function(){
    "use strict"
    console.log(this.age);
};

getAge(null);//報(bào)錯(cuò) age未定義
再來(lái)理解this的使用

this的常用場(chǎng)景:

this位于一個(gè)對(duì)象的方法內(nèi),此時(shí)this指向該對(duì)象

var name = "window";

var Student = {
    name : "kobe",
    getName: function () {
        console.log(this == Student); //true
        console.log(this.name);  //kobe
    }
}

Student.getName();

this位于一個(gè)普通的函數(shù)內(nèi),表示this指向全局對(duì)象,(瀏覽器是window)

var name = "window";

var getName = function () {
    var name = "kobe";  //迷惑性而已
    return this.name;
}

console.log(  getName() ); //window

this使用在構(gòu)造函數(shù)(構(gòu)造器)里面,表示this指向的是那個(gè)返回的對(duì)象.

var name = "window";
//構(gòu)造器
var Student = function () {
    this.name = "student";
}

var s1 = new Student();
console.log(s1.name);  //student

注意: 如果構(gòu)造器返回的也是一個(gè)Object的對(duì)象(其他類型this指向不變遵循之前那個(gè)規(guī)律),這時(shí)候this指的是返回的這個(gè)Objec.

var name = "window";
//構(gòu)造器
var Student = function () {
    this.name = "student";
    return {
        name: "boyStudent"
    }
}

var s1 = new Student();
console.log(s1.name);  //boyStudent

this指向失效問(wèn)題

var name = "window";

var Student = {
    name : "kobe",
    getName: function () {        
        console.log(this.name);  
    }
}

Student.getName(); // kobe
var s1 = Student.getName;
s1(); //window

原因: 此時(shí)s1是一個(gè)函數(shù)

function () {        
        console.log(this.name);  
    }

對(duì)一個(gè)基本的函數(shù),前面提過(guò)this在基本函數(shù)中指的是window.

在開(kāi)發(fā)中我們經(jīng)常使用的this緩存法 ,緩存當(dāng)前作用域下this到另外一個(gè)環(huán)境域下使用

最后理解apply的用法 Function.prototype.apply

格式: fx.apply(thisArg [，argArray] ); // 參數(shù)數(shù)組，argArray

apply與call的作用是一樣的,只是傳參方式不同,

apply接受兩個(gè)參數(shù),第一個(gè)也是fx函數(shù)體內(nèi)this的指向,用法與call第一個(gè)參數(shù)一致.第二個(gè)參數(shù)是數(shù)組或者類數(shù)組,apply就是把這個(gè)數(shù)組元素傳入函數(shù)fx.


var add = function (a ,b ,c) {
    console.log(a +b +c);
}

add.apply(null , [1,2,3]); // 6

再吃透這個(gè)題目就ok

var a=10;
var foo={
  a:20,
  bar:function(){
      var a=30;
      return this.a;
    }
}
foo.bar()
//20
(foo.bar)()
//20
(foo.bar=foo.bar)()
//10
(foo.bar,foo.bar)()
//10

哪里說(shuō)錯(cuò)或者有更好的理解希望大家指出來(lái).共同進(jìn)步.

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

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

相關(guān)文章

  • JavaScript之例題中徹底理解this

    摘要：最后重點(diǎn)理解結(jié)論箭頭函數(shù)的，總是指向定義時(shí)所在的對(duì)象，而不是運(yùn)行時(shí)所在的對(duì)象。輸出，箭頭函數(shù)不會(huì)綁定所以傳入指向無(wú)效。原因是，要徹底理解應(yīng)該是建立在已經(jīng)大致理解了中的執(zhí)行上下文，作用域作用域鏈，閉包，變量對(duì)象，函數(shù)執(zhí)行過(guò)程的基礎(chǔ)上。 本文共 2025 字，看完只需 8 分鐘 概述 前面的文章講解了 JavaScript 中的執(zhí)行上下文，作用域，變量對(duì)象，this 的相關(guān)原理，但是我...

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

  • JS高級(jí)講解面向?qū)ο?，原型，繼承，閉包，正則表達(dá)式，讓你徹底愛(ài)上前端（進(jìn)階二）

    摘要：通過(guò)構(gòu)造函數(shù)得到的實(shí)例對(duì)象內(nèi)部會(huì)包含一個(gè)指向構(gòu)造函數(shù)的對(duì)象的指針。 JavaScript 高級(jí) 學(xué)習(xí)目標(biāo): 理解面向?qū)ο箝_(kāi)發(fā)思想 掌握 JavaScript 面向?qū)ο箝_(kāi)發(fā)相關(guān)模式 掌握在 JavaScript 中使用正則表達(dá)式 面向?qū)ο蠼榻B 程序中面向?qū)ο蟮幕倔w現(xiàn) 在 JavaScript 中，所有數(shù)據(jù)類型都可以視為對(duì)象，當(dāng)然也可以自定義對(duì)象。自定義的對(duì)象數(shù)據(jù)類型就是面向?qū)ο笾?..

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

  • JS高級(jí)講解面向?qū)ο?，原型，繼承，閉包，正則表達(dá)式，讓你徹底愛(ài)上前端（進(jìn)階二）

    摘要：通過(guò)構(gòu)造函數(shù)得到的實(shí)例對(duì)象內(nèi)部會(huì)包含一個(gè)指向構(gòu)造函數(shù)的對(duì)象的指針。 JavaScript 高級(jí) 學(xué)習(xí)目標(biāo): 理解面向?qū)ο箝_(kāi)發(fā)思想 掌握 JavaScript 面向?qū)ο箝_(kāi)發(fā)相關(guān)模式 掌握在 JavaScript 中使用正則表達(dá)式 面向?qū)ο蠼榻B 程序中面向?qū)ο蟮幕倔w現(xiàn) 在 JavaScript 中，所有數(shù)據(jù)類型都可以視為對(duì)象，當(dāng)然也可以自定義對(duì)象。自定義的對(duì)象數(shù)據(jù)類型就是面向?qū)ο笾?..

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

  • js 面試官想了解你有多理解call,apply,bind?

    摘要：返回值這段在下方應(yīng)用中有詳細(xì)的示例解析。回調(diào)函數(shù)丟失的解決方案綁定回調(diào)函數(shù)的指向這是典型的應(yīng)用場(chǎng)景綁定指向，用做回調(diào)函數(shù)。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函數(shù)原型鏈中的 apply，call 和 bind 方法是 JavaScript 中相當(dāng)重要的概念，與 this...

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

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

0條評(píng)論

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