JS中的this

冷不防 2022-11-09 14:20 132阅读 0赞

## 对this指向大致的定义 ##

>  **this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁**，**实际上this的最终指向的是那个调用它的对象**

### ** 1.普通函数调用，此时 this 指向 window** ###

例一：

function test(){
        var name = "微光";
        console.log(this.name); //undefined
        console.log(this); //Window
    }
    test();

上面说过this最终指向的是调用它的对象，这里的函数test实际是被Window对象所点出来的

### **2.对象方法调用， 此时 this 指向 该方法所属的对象** ###

例二：

var o = {
        name:"微光",
        fn:function(){
            console.log(this.name);  //微光
        }
    }
    o.fn();

因为我们调用fn这个函数是通过了o.fn()执行，那指向明显就是对象o了

例三：

var o = {
        name:"微光",
        fn:function(){
            console.log(this.user); //微光
        }
    }
    window.o.fn();

这段代码跟例二几乎是一样，我们先来理解下为啥这里的this为什么不是指向window，如果按照上面的理论，最终this指向的是调用它的对象，

这里先说个而外话，window是js中的全局对象，我们创建的变量实际上是给window添加属性，所以这里可以用window点o对象。

我们先不说为啥会不指向window，接下来再看一段代码。

例四：

var o = {
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a); //12
            }
        }
    }
    o.b.fn();

这里同样也是对象o点出来的，但是同样this并没有执行它，可能你会说为啥不是指向对象o？

补充三个知识点：

> ### 　1：如果一个函数中有this，但**是它没有被上一级的对象所调用，那么this指向的就是window** ###
> 
> ### 　2：如果一个函数中有this，这个函数有**被上一级的对象所调用，那么this指向的就是上一级的对象**。 ###
> 
> ### 　3：如果一个函数中有this，**这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象** ###

例四可以证明，如果不相信，那么接下来我们继续看几个例子。

例5：

var o = {
        a:10,
        b:{
            fn:function(){
                console.log(this.a); //undefined
            }
        }
    }
    o.b.fn();

尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。

**还有一种比较特殊的情况，例6：**

这里this指向的是window，是不是有些蒙了？其实是因为你没有理解一句话，这句话同样至关重要。

### **this永远指向的是最后调用它的对象**，也就是**看它执行的时候是谁调用的**， ###

例6中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候**并没有执行**所以最终指向的是**window**，这和例子5是不一样的，例子5是直接执行了fn。

## **构造函数版this：** ##

function Fn(){
        this.user = "追梦子";
    }
    var a = new Fn();
    console.log(a.user); //追梦子

### **构造函数调用， 此时 this 指向 实例对象，**new关键字可以改变this的指向 ###

将这个this指向对象a

为什么我说a是对象，因为用了new关键字就是创建一个对象实例，我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a

## **当this碰到return时：** ##

function fn()  
    {  
        this.user = '微光';  
        return {};  
    }
    var a = new fn;  
    console.log(a.user); //undefined

function fn()  
    {  
        this.user = '微光';  
        return function(){};
    }
    var a = new fn;  
    console.log(a.user); //undefined

function fn()  
    {  
        this.user = '微光';  
        return 1;
    }
    var a = new fn;  
    console.log(a.user); //微光

function fn()  
    {  
        this.user = '微光';  
        return undefined;
    }
    var a = new fn;  
    console.log(a.user); //微光

### **如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。** ###

**还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。**

function fn()  
    {  
        this.user = '微光';  
        return null;
    }
    var a = new fn;  
    console.log(a.user); //微光

##  箭头函数中的this： ##

const o = {
      a() {
        console.log(this)
      },
      b: () => {
        console.log(this)
      }
    }
    
    o.a() //o
    o.b() //window
    
    const c = o.a //window 复制并没有执行
    const d = o.b //window
    c()
    d()

### 当我们使用箭头函数时，**函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象**。   并不是因为箭头函数内部有绑定**this**的机制，实际原因是箭头函数根本没有自己的**this**，它的**this**是继承外面的，因此内部的**this**就是外层代码块的**this**。 ###

### 面试题一： ###

var foo = 1;
    function bar() {
        foo = 10;
        return;
        function foo() {}
    }
    bar();
    alert(foo);

输出1，考察了变量提升，可以变为

var foo = 1;
    function bar(){
    	function foo(){};  // 这里在内部定义了 foo 是一个函数
    	foo = 10; // 因此这里属于局部变量，不影响到外层的foo
    	return foo;
    }
    bar();
    alert(foo) //1
    // 在foo=10的时候，foo是有定义的，属于局部变量，影响不到外层的foo。

**1、预解析中，变量的提升，只会在当前的作用域中提升，提前到当前作用域的最前面。**  
**2、函数的变量只会提前到函数作用域的最前面，不会出去影响全局的变量。**

### 面试题二： ###

function bar() {
        return foo;
        foo = 10;
        function foo() {}
        var foo = 11;
    }
    alert(typeof bar());

输出function，相当于

// 上述代码相当于：
    function bar() {
    	function foo() { }
    	var foo; //函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖
    	return foo;
    	foo = 10;
    	foo = 11;
    }
    alert(typeof bar());

###  面试题三： ###

输出3，1，

###  面试题四： ###

x = 1;
    function bar() {
        this.x = 2;
        return x;
    }
    var foo = new bar(); //new 改变了this指向
    alert(foo.x);

输出2

### 面试题五： ###

var arr = [];
    arr[0]  = 'a';
    arr[1]  = 'b';
    arr.foo = 'c';
    arr.name = "zs"
    
    alert(arr.length); // arr = ["a", "b", foo: "c", name: "zs"]

2，数组的原型是 Object，所以可以像其他类型一样增加属性，但是不影响其固有性质。arr.foo 和 arr.name 不算在 arr.length 中

### 面试题六： ###

function foo(){}
    delete foo.length;
    alert(typeof foo.length);

number，length属性无法被删除

面试题七：

var name="the window";
    var object={
    　　name:"my object",
    　　getName: function(){
    　　　　return this.name;
    　　}         
    }
    
    object.getName(); 
    (object.getName)();
    (object.getName = object.getName)()

输出

my object

the window

备注：

第一行的代码，this指向的就是object，所以毫无疑问；

第二行代码虽然加上括号，就好像只是在引用一个函数，但this的值得到了维持。因为object.getName和(object.getName)的定义相同。

第三行代码，先执行一条赋值语句，然后再调用赋值后的结果。因为这个赋值表达式的值是函数本身，所以this的值不能得到维持，结果就返回the window.