js中的this

javascript是一种非常活跃的语言，其中关于其中的this关键字，是javascript中的核心概念之一，今天来讨论下js中的this关键字。

说到this，大部分情况下会想到两种关于this的常见常见使用场景

• js上下文中的this
• js操作DOM节点的this
• 构造函数中的this

这个两个不论哪一种情况，在js中都遵循：谁调用this，this就指向谁

一、js上下文中的js

1、普通的函数调用

先来看下面的代码

a = 6; // 相当于window.a=6 或 this.a=6
function fun() {
    console.log(this.a)
};
fun();  // 相当于window.fun()
// 6

如上执行结果，最终打印出来的结果为6

由于调用fun()函数相当于window.fun()调用，即fun()函数由window调用，并且window对象上定义了变量a，所以函数里的this指向window对象，打印出来的结果就是window.a=6

2、对象中的this

同普通的函数调用不一样，对象里的this指向要相对复杂些

this.a = 100;
var obj = {
    a: 10,
    fun: function() {
        console.log(this.a)
    }
};
obj.fun();
// 结果为10

上面代码执行结果为10，这个应该就很好理解，因为调用函数的obj对象，obj里定义了obj.a=10，所以打印结果为10，但是当函数里采用了闭包之后又会出现不同的结果，如下代码

this.a = 100;
var obj = {
    a: 10,
    fun: function() {
        console.log(this.a)
        return function() {
            console.log(this.a)
        }
    }
};
obj.fun()();    // (obj.fun())();
// 10
// 100

执行结果为，先打印出10，再打印出100，为什么会出现这样的情况呢？

第一个结果为10肯定是不会有疑惑了，因为同上面那一种情况相同，obj调用fun()函数，第一个this同样指向obj，结果为obj.a=10

第二个结果为100，是因为执行了obj.fun()之后，返回了里面的闭包函数，此时返回来的函数是在window作用域中执行的，相当于是在window对象中调用闭包函数，所以第二个结果为100；上面的调用方式也可以像下面的调用方式一样

this.a = 100;
var obj = {
    a: 10,
    fun: function() {
        console.log(this.a)  // 10
        return function() {
            console.log(this.a)  //100
        }
    }
};
var fun1 = obj.fun();  // 将返回来的函数赋值给fun1
window.fun1();  // 在window对象中调用fun1

上面的调用方式应该会更好理解一些

 

二、js操作DOM节点的this

除了在操作对象中经常使用js外，对DOM的操作同样也会经常使用到this，看下面需求

// 点击button，改变button的字体颜色
function changeColor() {
    this.style.color = "red";
}

var btn = document.getElementById('btn');
btn.onclick = changeColor;

上面点击按钮，按钮字体颜色变成红色，这里同样适用谁调用：this，this就指向谁

此时的this指向btn节点

在例如下面代码

<button id="app" style="color:blue">click</button>
var style = {
    color: "red"
};
window.fun(); // red
function fun() {
    alert(this.style.color)
}
var btn = document.getElementById('app');
btn.onclick = fun; // blue

 

三、构造函数中的this

this.a = 100;
function fun() {
    this.a = 10;
}
fun.prototype.geta = function() {
    return this.a;
}
var fun1 = new fun();
console.log(fun1.geta()); // 10

此处输出10，因为fun1调用geta()函数，fun函数是fun1的构造函数，所以fun1中含有属性a=10，调用原型中geta方法，返回的就是this.a=10;