Javascript高级——2.this的详解

this(全局this和局部this

    要点

  1.  this是函数运行时动态生成的对象
  2.  this只能在函数内部使用
  3.  this指的是调用函数的那个对象
  4.  闭包的this指向window(不是绝对的,要看调用方式
  5.  DOM元素执行绑定事件时,事件内部this为该DOM元素

      关于要点3和4,我们可以得知this可分为全局this和局部this

    为什么有全局this和局部this?   

                    调用方式不同导致的

       调用方式可分为三种:

        

                1.   直接以函数形式调用

                2.   以全局对象的方法形式调用

                3.   借助call或者apply函数调用


    直接以函数形式调用

     

//全局中this为window对象
console.log(this);

//函数内this指向window
var x = 1;
function test(){
	console.log(this);
	console.log(this.x);
}
function changeX(){
	this.x=5;
	}
changeX();	
test();//window 5

//函数内部函数N次嵌套this还是指向window
var x = 1;
var s=function test(){
	console.log(this.x);
	inner();
	function inner(){
		console.log(this.x);
		innerInner();
		function innerInner(){
			console.log(this);
			console.log(this.x);
			}
		}
}
s();//1 1 window 1
var x = 1;
var s=function test(){
    var x=3;
    console.log(x);
    console.log(this.x);
}
s();//3  1

   以全局对象的方法形式调用

  
//构造函数中的this指向对象本身
var x = 1;
function test(){
	console.log(this);
	this.x=2;
}
var o=new test();
console.log(o.x);
console.log(x);//test{} 2 1
//闭包中的this指向window
var x = 1;
function test(){
	console.log(this.x);
	console.log(this);
	this.x=2;
	var m=function (){
		this.x=4;
		console.log(this);
		console.log(this.x);
		console.log("m");
		}
	return m;
}
test();
var o=new test();
console.log(o.x);
o();
console.log("x:"+x);//1 underfined 4 m x:4

//在对象中的this,this变化后的值变化
function test(){
	console.log(this);
	console.log(this.x);
	}
test();	
var o = {};
o.x = 1;
o.m = test;
o.m();//这里才是执行 o
//window 4 test 1  //这个4是window早就有的,并不是执行这代码就有的

  借助call或者apply函数调用(与【以全局对象的方法形式调用】一样 ,就是写法不一样)

//apply动态指定this
var x = 0;
function test(){
	console.log(this);
	console.log(this.x);
  }
test();
var o={
	x:1,
	m:this.test
	};
o.m.apply(o);
//window 0 test 1



   

     

猜你喜欢

转载自blog.csdn.net/superstatus/article/details/80578627