本文重要讨论一下JS的作用域和this
关键字。作用域,就是你的要领或许变量可接见的地区,是他们实行的上下文。假如你见过如许的代码:
function someFunc() {
var _this = this;
something.on("click", function() {
console.log(_this);
});
};
你就会很猎奇为何要用this
赋值给一个变量_this
呢?你看完这篇文章就会清晰这个题目的答案了。
第一种作用域叫做全局作用域(Global Scope)这很轻易定义,假如一个要领、变量是全局作用域的,那末它就能够从任何的处所接见到。在浏览器里,全局作用域就是window
对象。所以,假如你的代码里有:
var x = 9;
你实际上是在给window.x
赋值为9
(在浏览器里运转的时刻)。假如你喜好的话,也能够写成window.x = 9
,固然这不是很必要。全局作用域对象的属性能够在代码的任何处所接见到。
别的的作用域就只要部分作用域了。在JavaScript里平常就是一个要领内部的作用域。比方:
function someFunction() {
var x = 5;
}
console.log(x); // undefined
变量x
是在要领内部初始化的,那末就只能在要领内部接见。
一些须要注重的处所
假如你声清楚明了一个变量,而且在声明的时刻遗忘运用var
关键字。那末,这个变量自动被置为全局变量。比方:
function someFunction(){
x = 5;
}
// 实行一个这个要领,完成x的全局设置
someFunction();
console.log(x); // 5
这是一个异常差的实践。你应当只管少的往全局作用域增加属性。这也是为何你会经常看到一些库,比方jQuery会这么干:
(function() {
var jQuery = {/*悉数的要领都在这里*/};
window.jQuery = jQuery;
})();
把全有的属性、要领都放在一个要领里。然后马上实行这个要领就会把悉数的属性和要领都绑定在了部分作用域里。末了把jQuery
对象绑定到全局作用域,间接的把之前定义的属性和要领都暴露出来轻易挪用。明显我大批的减少了jQuery的代码,然则这就是jQuery代码怎样事情的。
因为部分作用域只要经由过程要领的定义来完成。任安在一个要领内部定义的要领都能够接见外部要领里定义的变量。比方:
function outer() {
var x = 5;
function inner() {
console.log(x); // 5
}
inner();
}
然则outer()
要领不能够接见inner()
要领定义的任何变量。
function outer() {
var x = 5;
function inner() {
console.log(x); // 5
var y = 100;
}
inner();
console.log(y); // undefined
}
这很轻易明白。然则当我们试图要探讨this
关键字的时刻就又变得复杂了。我置信许多人都碰到过如许的题目:
${'myLink'}.on('click', function() {
console.log(this); // 指向myLink
$.ajax({
// 设置ajax相干
success: function() {
console.log(this); // 指向的是全局对象。 ???
}
});
});
this
是在要领实行的时刻自动赋值的变量。它的值和要领的挪用体式格局有很大的关联。比方:
function foo() {
console.log(this); // global object
}
theApp = {};
theApp.foo = function() {
console.log(this); // 指向theApp对象
}
var link = doeument.getElementById('myLink');
link.addEventListener('click', function() {
console.log(this); // 指向link
});
MDN对第三个例子的诠释异常到位:
事宜的this老是指向动身这个事宜的元素对象。比方运用一个通用的事宜监听器来处置惩罚一系列的有类似事宜的元素。当运用addEventListener把一个要领增加到一个元素的事宜处置惩罚器的时刻,这个要领的this值就被改变了。注重,this的值是从挪用者里传给要领的。
这么做:$('myLink').on('click', function() {})
意味着link被点击的时刻要领就会实行。因为这个要领是处置惩罚link的事宜的,所以this的值就是这个link元素。
在Ajax要求的success回调要领只是一个一般的要领。所以,当它被挪用的时刻this指向的是全局对象。任何对象,不是对象要领或许事宜的时刻会碰到的状况。
上面的缘由也就是你在许多处所看到var _this = this;
或许var that = this;
的缘由。来看一个例子:
$('myLink').on('click', function() {
console.log(this); //指向myLink
var _this = this;
$.ajax({
// ajax设置
success: function() {
console.log(this); // 指向全局对象
console.log(_this); // 指向myLink
}
});
});