javascript中this指针详解

谁调用的方法或者属性，this就指向谁

若是没有被谁调用，this指向window

 

状况1：若是一个函数中有this，可是它没有被上一级的对象所调用，那么this指向的就是window，这里须要说明的是在js的严格版中this指向的不是window，可是咱们这里不探讨严格版的问题，你想了解能够自行上网查找。

状况2：若是一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

状况3：若是一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，若是不相信，那么接下来咱们继续看几个例子。

 

new操做符会让构造函数产生以下变化：

1.       建立一个新对象；

2.       将构造函数的做用域赋给新对象（所以this就指向了这个新对象）；

3.       执行构造函数中的代码（为这个新对象添加属性）；

4.       返回新对象

 

首先看下面代码：

    

function funcA() {
    this.name = "hello";
    console.log(this.name);
    this.show = function() {
        console.log(this.name);
    }
}
funcA();// 一、hello
var a = new funcA();//二、hello
a.show();//三、hello
var objA = {
    name: "objA"
}
a.show.call(objA);//四、objA

var objB = {
    name: "objB"
}
objB.show = a.show
objB.show();//五、objB
(objB.show = a.show)();//六、hello

 

下面这几段代码就把this常见的状况给表现出来的差很少了， this在js中主要有四种用法：

一、做为普通函数使用

二、做为对象方法来使用

三、call和apply

四、做为构造函数来使用

下面分别说明

1、做为普通函数来使用：

 function funcA() {
    this.name = "hello";
    console.log(this.name);
    this.show = function() {
        console.log(this.name);
    }
}
funcA();// 一、hello

这个代码很简单，但也隐藏了一个坑，就是这个时候的this 表明的是window的指针，因此当这段代码运行完以后，你再输出 console.log(window.name)时候，你会发现输出为”hello”,在使用中尽可能避免。

2、做为对象方法来使用

var obj={name:"hello",show:function(){

console.log(this.name);

}};

obj.show();

这个很简单，this指向本身,因此this.name就用hello;

 

若是代码修改下：

var obj={name:"hello",show:function(){
    console.log(this.name);
}};
obj.show();

var objA={name:"world"}
objA.show=obj.show;
objA.show()

这个结果又是什么呢？答案是”world”,由于在js中对象都是引用类型，当objA.show=obj.show这句代码把objA.show也指向的show方法，因此在调用的时候会把this，指向objA而不是obj.

 

3、call和apply

 

这个在上面的继承中的原型冒充中也提过一些，这里也详细说明this在call和apply中微秒的用法：

function funcA() {
    this.name = "hello";
    console.log(this.name);
    this.show = function() {
        console.log(this.name);
    }
}
 
var a = new funcA();
a.show();
var objA = {
    name: "objA"
}
a.show.call(objA);

上面这段代码就是call的用法，这里咱们能够把代码拆解成咱们能看的懂的形式：

a.show.call(objA)====>{
obj.show=a.show();
obj.show();
delete obj.show();
}

上面就是call的相似执行的过程的形势（实际上并非这样的，能够这样来记），知道了这个执行过程，咱们就来探究这个的执行过程：

一、把a.show里面的方法中的this所有换成obj.

二、执行a.show(),同时把后面的参数做为参数处理。

 

4、做为构造函数来使用

function funcA(name){
    this.name;
    this.show=function(){
        console.log(name);
    }
}
var a=new funcA("hello");
a.show();

 做为构造函数使用的时候，在new的关键字建立对象的时候，会先生成一个空对象，而后调用方法，把this的替换成这个空对象。（这个在上篇有详细的说明，这里很少说）。在建立对象的时候，this指针就指向了建立新对象。

 

因此上面的那段代码我想应该就能看懂为何会是这个输出结果了，惟一的有一个(objB.show = a.show)();这个比较奇怪，由于赋值的时候，返回的是右边的那个函数，因此最终执行的也是a.show();

 

总结：js中的this实际上是一个比较简单的东西，上面只列出了经常使用的东西，至于更深刻的，能够本身在深刻挖掘下，相信有了这个基础后，再深刻的话应试就不是一件枯燥的事了