JS this 分析

1. this指向分細

1.1 this

• this(咱們在js中研究的都是函數中的this)
• JS中的this表明的是當前行爲執行的主體
• JS中的context表明的是當前行爲執行的環境(區域)

//例如:A 在 飯店 吃 餃子
//執行主體就是A 上下文就是飯店 吃餃子就是行爲
function 吃餃子() {
    console.log(this);
}
A.吃餃子()//輸出this ---> 指A
(function() {
    A.吃餃子()//輸出this --->指的仍是A
})
//this是誰 和函數在哪定義的和在哪執行的沒有任何關係,就是指執行主體

1.2 如何區分this(目前只分析三種 後續會更新)

一、函數執行,首先看函數前面是否有'.',有的話前面是誰,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();

二、自執行函數中的this永遠是指window

三、給元素的的某一個事件綁定方法,當事件觸發的時候,執行對應的方法,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 經典面試題分析

var num = 20;
var obj = { //對象只是堆內存,不是做用域,想訪問變量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 賦值給了自執行函數的形參 而不是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、函數內部返回的引用類型的值(函數/對象)被外部變量佔用,此函數執行造成的做用域不銷燬
b、給obj對象賦值的過程當中 自執行函數執行 並return 一個函數
c、自執行函數的this指向window
d、obj.fn fn中的this 指向obj
e、自執行函數在全局做用下並不進行預解釋,可是函數內部執行會造成私有做用域,函數內部會進行預解釋
f、若是要分析此題,畫圖是最容易的且最直觀的
g、在函數執行的過程當中 必定要區分this.num 和私有變量num 這個是解答此題的關鍵
h、當前做用域中沒有num變量 也沒有參數傳入 要往上級做用域查找num(如何找也是一個知識點)

• 附示意圖

• 動力: 這是個人學習筆記,您能從中獲得收穫和進步,是我分享的動力,幫助別人,本身也會更快樂
• 指望: 不喜勿噴,謝謝合做！若是涉及版權請及時聯繫我,立刻刪除!