【JavaScript】关于this在函数中的指向
一、this
在JavaScript中,this指向的是谁只与函数有关,和函数在哪里定义和执行时没有任何关系的。
二、在函数中,如何区分this
- 函数执行,首先看函数名前面是否有“.”,有的话,“.”前面是谁,this就是谁;没有的话this就是window。
//例子一
console.log(this);
function eat() {
console.log(this); //this->window
}
~function() {
eat(); //this->window
}();
//例子二
function fn() {
console.log(this);
}
var obj = {fn: fn};
fn(); //this->window
obj.fn() //this->obj
//例子三
function sum() {
fn();
}
sum(); //this->window
//例子四
var oo = {
sum: function() {
console.log(this);
fn();
}
}
oo.sum(); //首先sum函数里面,第一个输出this为oo;之后执行fn(),this为window
- 立即执行函数中的this永远都是window
(function() {
console.log(this); // this->window
})()
- 给元素的某一事件绑定方法,当事件触发的时候,执行对应的方法,方法中的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);
//注意区分num和this.num
}
})(num)
};
var fn = obj.fn;
fn(); // ->65
obj.fn(); // ->85
console.log(window.num, obj.num) // ->240, 120
执行步骤:
第一步,形成一个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只是对象的一个属性,它既不是全局变量,也不是局部变量哦。