js函數(shù)this理解？手寫(xiě)apply、call、bind就夠了

Cciradih 發(fā)布于2019-08-26 10:39 / 689人閱讀

摘要：一是什么函數(shù)的內(nèi)部屬性，引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象。函數(shù)做為節(jié)點(diǎn)事件調(diào)用時(shí)指向節(jié)點(diǎn)本身做為構(gòu)造函數(shù)實(shí)力化方法時(shí)指向?qū)嵗龑?duì)象箭頭函數(shù)里的普通函數(shù)，由于閉包函數(shù)是執(zhí)行的，所以指向箭頭函數(shù)的指向函數(shù)創(chuàng)建時(shí)的作用域。

一、this是什么？

函數(shù)的內(nèi)部屬性，this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象。也就是說(shuō)函數(shù)的this會(huì)指向調(diào)用函數(shù)的執(zhí)行環(huán)境。

function a(){
    return  this
}
console.log( a() === window) //true

函數(shù)的 this 關(guān)鍵字在 JavaScript 中的表現(xiàn)略有不同，此外，在嚴(yán)格模式和非嚴(yán)格模式之間也會(huì)有一些差別。

function a(){
    "use strict"
    return  this
}
console.log( a() === undefined) //true

二、this指向哪里

this做為函數(shù)的關(guān)鍵字，指向函數(shù)的調(diào)用對(duì)象。

大致的指向總結(jié)歸納為可以分為以下幾種：

1.函數(shù)做為全局環(huán)境調(diào)用時(shí)

var name = "window";
function a(){
    return  this.name
}
a() ==="window" //true

2.函數(shù)做為對(duì)象方法調(diào)用時(shí)

var obj = {
    name:"obj",
    sayName:function(){
        return this.name
    }
}
console.log( obj.sayName() === "obj") //true

//稍微改動(dòng)一下;添加下面代碼。

var sayName = obj.sayName;
console.log( sayName() === "obj") //false

//此時(shí)，sayName函數(shù)里的this指向了window。

這里需要明白一點(diǎn)，函數(shù)名僅僅是一個(gè)包含指針的變量，函數(shù)是復(fù)雜數(shù)據(jù)類(lèi)型，所以函數(shù)名就只是一個(gè)指針，指向堆中的內(nèi)存地址！所以sayName此時(shí)只是復(fù)制了指針地址，所以，上面代碼改寫(xiě)成下面就很清晰了。

var sayName = function(){
    return this.name
}
var obj = {
    name:"obj",
    sayName:sayName
}
console.log( obj.sayName() === "obj") //true
console.log( sayName() === "obj") //false

3.函數(shù)做為dom節(jié)點(diǎn)事件調(diào)用時(shí)

var container3 = document.getElementById("container3")
container3.onclick = function(){ //指向節(jié)點(diǎn)本身
    console.log(this) //container3
}

4.做為構(gòu)造函數(shù)實(shí)力化方法時(shí)

function A(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name)//指向?qū)嵗龑?duì)象
    }
}
var a = new A("aa");
a.sayName(); //aa

5.箭頭函數(shù)里的this

var name = "window"
var obj = {
    name:"obj",
    fn:function(){    
       (function (){
        console.log(this.name)
       })()
    }    

}
obj.fn() //window

普通函數(shù)，由于閉包函數(shù)是window執(zhí)行的，所以this指向window；
箭頭函數(shù)的this指向函數(shù)創(chuàng)建時(shí)的作用域。

var name = "window"
var obj = {
    name:"obj",
    fn:function(){    
       (()=>{ //改成箭頭函數(shù)
        console.log(this.name)
       })()
    }    

}
obj.fn()

改成箭頭函數(shù)，后可以看出創(chuàng)建時(shí)的作用域是obj.fn函數(shù)執(zhí)行是的作用域，也就是obj

三、this指向怎么改

js提供了一些可以改變函數(shù)執(zhí)行作用域的方法。因?yàn)槠胀ê瘮?shù)如果通過(guò)上面的寫(xiě)法來(lái)改變this執(zhí)行時(shí)上下文，寫(xiě)法就太過(guò)于麻煩。

apply、call、bind用法

apply:
fn.apply(thisObj,數(shù)組參數(shù)）
定義：應(yīng)用某一個(gè)對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象
說(shuō)明：如果參數(shù)不是數(shù)組類(lèi)型的，則會(huì)報(bào)一個(gè)TypeError錯(cuò)誤。

call:
fn.call(thisObj, arg1, arg2, argN)
apply與call的唯一區(qū)別就是接收參數(shù)的格式不同。

bind:
fn.bind(thisObj, arg1, arg2, argN)
bind()方法創(chuàng)建一個(gè)新的函數(shù)，在bind()被調(diào)用時(shí)，這個(gè)新函數(shù)的this被bind的第一個(gè)參數(shù)指定，其余的參數(shù)將作為新函數(shù)的參數(shù)供調(diào)用時(shí)使用。

apply、call、bind實(shí)現(xiàn)

apply的實(shí)現(xiàn)：

Function.prototype.myApply= function(context){
    context.fn = this;//1.將函數(shù)掛載到傳入的對(duì)象
    var arg = [...arguments].splice(1)[0];//2.取參數(shù)
    if(!Array.isArray(arg)) {
        throw new Error("apply的第二個(gè)參數(shù)必須是數(shù)組") //3.限制參數(shù)類(lèi)型為數(shù)組
    }    
    context.fn(arg) //4.執(zhí)行對(duì)象的方法
    delete context.fn; //5.移除對(duì)象的方法
}

var obj = {
    name:"obj"
}
function sayName(arr){
    console.log(this.name,arr)
}
sayName.myApply(obj,[1,2,3]) //obj [1, 2, 3]

call實(shí)現(xiàn)：與apply的唯一區(qū)別就是參數(shù)格式不同

Function.prototype.myCall= function(context){
    context.fn = this;//1.將函數(shù)掛載到傳入的對(duì)象
    var arg = [...arguments].splice(1);//2.取參數(shù)
    context.fn(...arg) //3.執(zhí)行對(duì)象的方法
    delete context.fn; //4.移除對(duì)象的方法
}
var obj = {
    name:"obj1"
}
function sayName(){
    console.log(this.name,...arguments)
}
sayName.myCall(obj,1,2,3,5) //obj1 1,2,3,5

bind在mdn上的實(shí)現(xiàn)：

Function.prototype.myBind = function(oThis){
    if(typeof this !== "function"){
        throw new TypeError("被綁定的對(duì)象需要是函數(shù)")
    }
    var self = this
    var args = [].slice.call(arguments, 1)
    fBound = function(){ //this instanceof fBound === true時(shí),說(shuō)明返回的fBound被當(dāng)做new的構(gòu)造函數(shù)調(diào)用
        return self.apply(this instanceof fBound ? this : oThis, args.concat([].slice.call(arguments)))
    }
    var func = function(){}
    //維護(hù)原型關(guān)系
    if(this.prototype){
        func.prototype = this.prototype
    }
    //使fBound.prototype是func的實(shí)例，返回的fBound若作為new的構(gòu)造函數(shù)，新對(duì)象的__proto__就是func的實(shí)例
    fBound.prototype = new func()
    return fBound
}

GPU云服務(wù)器云服務(wù)器 JS中bind、call和apply的作 js中的call和apply apply與call的區(qū)別這個(gè)函數(shù)怎么理解

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

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

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

登陸后可評(píng)論

0條評(píng)論

Cciradih

男|高級(jí)講師

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

TA的文章

IBM推出新款量子芯片，預(yù)計(jì)兩年內(nèi)擊敗傳統(tǒng)計(jì)算機(jī)

閱讀 2630·2021-11-17 09:33
Linphone和MicroSIP軟電話中暴露嚴(yán)重安全漏洞可致黑客遠(yuǎn)程攻擊

閱讀 4015·2021-10-19 11:46
【物聯(lián)網(wǎng)】12.物聯(lián)網(wǎng)服務(wù)器發(fā)送方式（HTTP，WebSocket ，MQTT ）

閱讀 945·2021-10-14 09:42
如何訪問(wèn)云主機(jī)數(shù)據(jù)庫(kù)-云主機(jī)跟云數(shù)據(jù)庫(kù)的區(qū)別？

閱讀 2291·2021-09-22 15:41
云主機(jī)怎么安裝軟件-如何選擇云主機(jī)部署管理軟件？

閱讀 4288·2021-09-22 15:20
4個(gè)實(shí)時(shí)查看臺(tái)風(fēng)路徑的網(wǎng)站平臺(tái)（知曉臺(tái)風(fēng)最新消息必備工具）

閱讀 4683·2021-09-07 10:22
??身為在軟件測(cè)試摸爬滾打多年工程師的感悟，寫(xiě)給正在迷茫的你??

閱讀 2346·2021-09-04 16:40
React事件

閱讀 842·2019-08-30 15:52

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

資訊專欄INFORMATION COLUMN

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

js函數(shù)this理解？手寫(xiě)apply、call、bind就夠了

相關(guān)文章

「中高級(jí)前端面試」JavaScript手寫(xiě)代碼無(wú)敵秘籍

前端基礎(chǔ)匯總

前端基礎(chǔ)匯總

javascript 基礎(chǔ)之 call, apply, bind

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

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

0條評(píng)論

Cciradih

男|高級(jí)講師

TA的文章

IBM推出新款量子芯片，預(yù)計(jì)兩年內(nèi)擊敗傳統(tǒng)計(jì)算機(jī)

Linphone和MicroSIP軟電話中暴露嚴(yán)重安全漏洞可致黑客遠(yuǎn)程攻擊

【物聯(lián)網(wǎng)】12.物聯(lián)網(wǎng)服務(wù)器發(fā)送方式（HTTP，WebSocket ，MQTT ）

如何訪問(wèn)云主機(jī)數(shù)據(jù)庫(kù)-云主機(jī)跟云數(shù)據(jù)庫(kù)的區(qū)別？

云主機(jī)怎么安裝軟件-如何選擇云主機(jī)部署管理軟件？

4個(gè)實(shí)時(shí)查看臺(tái)風(fēng)路徑的網(wǎng)站平臺(tái)（知曉臺(tái)風(fēng)最新消息必備工具）

??身為在軟件測(cè)試摸爬滾打多年工程師的感悟，寫(xiě)給正在迷茫的你??

React事件

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

js函數(shù)this理解？手寫(xiě)apply、call、bind就夠了

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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

js函數(shù)this理解？手寫(xiě)apply、call、bind就夠了