JS中this的浅入了解

JS中this的浅入了解

现阶段：JS高级

今日学习：对this的理解

• 易懂理解

  JS中的this就像是现实生活中对别人的第三人称，不需要明确指出是张三还是李四，而是一个统称；JS中this就是这个道理，好处是创建一个函数，在每次被不同的对象调用此函数时，this就是“活”的，指代着不同的对象。

• 正式理解（参数代码如下）

function Person(color) {
    console.log(this);
    this.color = color;
    this.getColor = function () {
        console.log(this);
        return this.color;
    };
    this.setColor = function (color) {
        console.log(this);
        this.color = color;
    };
}

Person("red");

var p = new Person("Yellow");

p.getColor();

var obj = {};
p.setColor.call(obj,"black");

var test = p.setColor;
test();

function fun1(){
	function fun2(){
		console.log(this);
	}
	fun2();
}
fun1();

1.直接调用函数，没有设置变量用来承接，直接调用函数，此时this就是默认的window;

Person("red");

fun2();		

fun1();

//直接调用，以上this都是window

2.用一个变量来接收被调用的函数，此时this就是那个变量名；

P.getColor();	//P是this

3.与上述类似的是，创建对象用以接收被调用的函数，此时this就是那个变量名；

var p = new Person("Yellow");  //p是this

4.回调函数：设置某个函数成为某个对象的方法，例题中设置setColor这个函数成为obj这个对象的方法；此时this就是obj;

var obj = {};
p.setColor.call(obj,"black");  //obj是this

5.P.S对于以下情况，调用test()时，按第1点处理，即直接调用函数

var test = P.setColor();
test();		//window是this