[JavaScript] fully understand this point in the function of

A, this, in fact, is analogous adults

　　Speaking of this, we in this major study of the js is a function of, in javascript, this executive agent on behalf of current behavior, and on behalf of the context of environmental (area) current behavior executed.

　　Such as men of God in north Li beads eat, these words represent the following meanings

　　God - >> body (this)

　　Eat - >> function (function)

　　North rationale beads - >> environment (context)

　　 - >> Description: Eat function, the main function of the male is God, the North is the current behavior management beads execution environment (context), the subject does not necessarily linked with the context, the body only has a relationship with function; if god eat , in fact, where can eat, eat this action will always be the main man of God, the environment is changing.

　　- >> Conclusion: The above can in fact be explained, this refers to the who, where and functions are defined and executed without any relationship.

Second, the function, how to distinguish this

　　1, the function is executed, first to see if there is in front of the function name, so, in front of who is who this is. "". ""; No, then this is the window

Examples of a // 
the console.log (the this); 
function EAT () { 
    the console.log (the this); // this-> window 
} 
~ function () { 
    EAT (); // this-> window 
} (); 

/ / examples of the dicarboxylic 
function Fn () { 
    the console.log (the this);   
} 
var {obj = Fn: Fn}; 
Fn (); // this-> window 
obj.fn () // this-> obj 

// example three 
SUM function () { 
    Fn ();   
} 
SUM (); // this-> window 

// example four 
var OO = { 
    SUM: function () { 
        the console.log (the this); 
        Fn (); 
    } 
} 
oo.sum (); // first sum function inside, this first output is a OO; after performing Fn (), this window is

　　2, immediately perform the function of this window is always

(function() {
    console.log(this); // this->window
})()

　　3、给元素的某一事件绑定方法，当事件触发的时候，执行对应的方法，方法中的this是当前元素

function fn() {
    console.log(this);
}
//例子一
document.getElementById("div1").onclick = fn; //this -> dom元素
//例子二
document.getElementById("div1").onclick = function() {
    console.log(this); // this->#div
    fn(); // this->window
}

　　结论：找到函数在哪里执行的，有点，this就是点前面东西；没点，this就是window

三、使用this分析一道面试题

var  num = 20;
var obj = {
    num: 30,
    fn: (function(num) {
        this.num *= 3;
        num += 15;
        var num  = 45;
        return function() {
            this.num *= 4;
            num + =20;
            console.log(num);
        }
    })
};
var fn = obj.fn;
fn(); // ->65
obj.fn(); // ->85
console.log(window.num, obj.num) // ->240, 120

　　　上面代码使用堆栈图来描述，如下，首先正方形代表栈内存（函数执行环境，context），圆边方形代表堆内存（用来存放字符串）。

　　第一步，形成一个js执行环境，window作用域，首先预解释（声明var，声明+定义function）；

　　第二步，代码由上往下执行，num = 20, obj = 引用数据类型（数据存在堆内存里面）

　　第三步，因为obj.fn是立即执行函数，所以形成一个私有作用域A，执行fn里面的函数，因为fn里面的函数返回值为function，return值被外面的obj.fn引用了，这个立即执行函数A作用域不销毁。

　　第四步，window作用域下面的代码继续往下执行。

四、this实践运用

　　现在有这样一个需求，要求做一个累加器，每点击一次，就累加1。

var oBtn = document.getElementById("btn");
var spanNum = document.getElementById("spanNum");
// 方法一
// 利用全局作用域不销毁的原理，把需要累加的数字定义为全局变量
var count = 0;
oBtn.onclikc = function() {
    count++;
    spanNuM.innerText = count;  
}
// 弊端：在项目中为了防止全局变量之间的冲突，我们一般是禁止或者减少使用全局变量的

// 方法二
// 形成一个不销毁的私有作用域保存我们需要累积的数据
// 1）
(function() {
    var count = 0;
    oBtn.onclick = function() {
        ++count;
        spanNum.innerText = count;
    } 
})
// 2）
oBtn.onclick = (function() {
    var count = 0;
    return function() {
        ++count;
        spanNum.innerText = count;
    }
})
// 上面的两种写法都是表达同一个意思
// 弊端：有一个不销毁的私有作用域，占那么一点点内存

// 方法三
// 利用innerHTML的方式处理，每点击一次都需要到页面获取最新的值，然后累加，最后把结果放进去
oBtn.onclick = function() {
    ++spanNum.innerHTML;  
}
// 弊端：innerHTML获取的时候本来就需要浏览器去处理，每一次都需要把页面的内存先转化为字符串，然后累加，累加完重新添加回去，当重新添加的时候浏览器需要重现渲染一遍页面。

// 方法四
// 利用自定义属性存储（推荐！）
oBtn.count = 0;
oBtn.onclick = function() {
    spanNum.innerTxt = ++this.count;    
}
//注意，这里的count只是对象的一个属性，它既不是全局变量，也不是局部变量哦。

　　END

[JavaScript] fully understand this point in the function of

Guess you like