js中的this

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

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

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

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

1、js上下文中的js

一、普通的函数调用

先来看下面的代码

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

二、对象中的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

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

 

2、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

 

3、构造函数中的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;