JS this 分析

warnerwu 發(fā)布于2019-08-23 14:12 / 2716人閱讀

摘要：指向分細我們在中研究的都是函數(shù)中的中的代表的是當前行為執(zhí)行的主體中的代表的是當前行為執(zhí)行的環(huán)境區(qū)域例如在飯店吃餃子執(zhí)行主體就是上下文就是飯店吃餃子就是行為吃餃子吃餃子輸出指吃餃子輸出指的還是是誰和函數(shù)在哪定義的和在哪執(zhí)行的沒有任

1. this指向分細 1.1 this

this(我們在js中研究的都是函數(shù)中的this)

JS中的this代表的是當前行為執(zhí)行的主體

JS中的context代表的是當前行為執(zhí)行的環(huán)境(區(qū)域)

//例如:A 在 飯店 吃 餃子
//執(zhí)行主體就是A 上下文就是飯店 吃餃子就是行為
function 吃餃子() {
    console.log(this);
}
A.吃餃子()//輸出this ---> 指A
(function() {
    A.吃餃子()//輸出this --->指的還是A
})
//this是誰 和函數(shù)在哪定義的和在哪執(zhí)行的沒有任何關(guān)系,就是指執(zhí)行主體

1.2 如何區(qū)分this(目前只分析三種后續(xù)會更新)

1、函數(shù)執(zhí)行,首先看函數(shù)前面是否有".",有的話前面是誰,this就是誰,沒有的話this指window

function fn() { console.log(this) };
var obj = { fn: fn };
fn()//this--->指window
var obj = { fn: fn };
obj.fn()//this指obj
function sum() {
    fn()//this---->指window
}
sum();
var oo = {
    sum: function() {
        fn()//this --->指window
    }
}
oo.sum();

2、自執(zhí)行函數(shù)中的this永遠是指window

3、給元素的的某一個事件綁定方法,當事件觸發(fā)的時候,執(zhí)行對應(yīng)的方法,this是指當前的元素

function fn() {
    console.log(this);
}
document.getElementById("#div1").onclick = fn;
//fn中的this --->指 "#div1"
document.getElementById("#div1").onclick = function() {
    //this --->指 "#div1";
    fn()//this --->指window
}

1.3 經(jīng)典面試題分析

var num = 20;
var obj = { //對象只是堆內(nèi)存,不是作用域,想訪問變量num,必須是obj.num的形式
    num: 30,
    fn: (function(num) {
        this.num *= 3;
        num += 15;
        var num = 45;
        return function() {
            this.num *=4;
            num +=20;
            console.log(num)
        }
    })(num)
    //此處傳參 是全局變量的num的值20 賦值給了自執(zhí)行函數(shù)的形參 而不是obj的30 如果傳入obj下的30 需要寫成obj.num
}
var fn = obj.fn;
fn();//輸出65
obj.fn();//85
console.log(window.num);//240
console.log(obj.num);//120

此題涉及主要知識點如下

a、函數(shù)內(nèi)部返回的引用類型的值(函數(shù)/對象)被外部變量占用,此函數(shù)執(zhí)行形成的作用域不銷毀
b、給obj對象賦值的過程中自執(zhí)行函數(shù)執(zhí)行并return 一個函數(shù)
c、自執(zhí)行函數(shù)的this指向window
d、obj.fn fn中的this 指向obj
e、自執(zhí)行函數(shù)在全局作用下并不進行預解釋,但是函數(shù)內(nèi)部執(zhí)行會形成私有作用域,函數(shù)內(nèi)部會進行預解釋
f、如果要分析此題,畫圖是最容易的且最直觀的
g、在函數(shù)執(zhí)行的過程中一定要區(qū)分this.num 和私有變量num 這個是解答此題的關(guān)鍵
h、當前作用域中沒有num變量也沒有參數(shù)傳入要往上級作用域查找num(如何找也是一個知識點)

附示意圖

動力: 這是我的學習筆記,您能從中得到收獲和進步,是我分享的動力,幫助別人,自己也會更快樂

期望: 不喜勿噴,謝謝合作！如果涉及版權(quán)請及時聯(lián)系我,馬上刪除!