在JavaScript中,主要研究的是函数中的this。
如果在全局作用域下的this,如下:
console.log(this); // -> window
此时this指向window。
JavaScript中的this,代表的是当前行为执行的主体; JavaScript中的context代表的是当前行为执行的环境(区域)。
什么是执行主体?以下代码可以说明:
function eat() {
this -> zhangsan
}
zhangsan.eat();
~function () {
zhangsan.eat();
}();
zhangsan在餐厅吃饭, 这里的this指的zhangsan, 餐厅是他的上下文。
但是zhangsan不管在哪里吃饭,吃饭的都是他自己。
同样的,在JavaScript中,this的指代与上下文无关。
this 是谁,和函数在哪里定义的和执行的都没有任何的关系; 那如何区分this呢?
- 函数执行,首先看函数名之前有没有 ".", 有的话,"."前面是谁this就是谁;没有的话this就是window。
function fn() {
console.log(this);
}
var obj = {
fn: fn
};
fn(); // this -> window
obj.fn(); // this -> obj
function sum() {
// sum的this -> window
fn(); // this -> window
};
sum();
var oo = {
// sum的this -> oo
sum: function () {
fn();
}
}
oo.sum(); // this -> window
- 自执行函数中的this永远是window。
~function() {
console.log(this); // this -> window
}();
- 给元素的某一个事件绑定方法,当事件触发的时候,执行对应的方法,方法中的this是当前的元素。
document.getElementById('div1').onclick = fn; // fn中的this -> 当前那个#div1
document.getElementById('div1').onbclick = function () {
// function中的this -> #div1
fn(); // this -> window
}
- 在构造函数模式中,this代表的就是当前的实例。
function CreateJsPerson(name, age) {
// 浏览器默认创建的对象就是我们的实例 p1 -> this
this.name = name; // -> p1.name = name;
this.age = age; // -> p1.age = age;
this.writeJs = function () {
console.log('my name is ' + this.name + ', age is ' + this.age);
}
// 浏览器把创建的实例默认的返回
}
var p1 = new CreateJsPerson('zhangsan', 20);
p1.writeJs(); // this -> p1, writeJS -> this -> p1