4句话总结Javascript 的this，面试官和我惺惺相惜！

朴灿烈づ我的快乐病毒、 2021-07-24 15:37 213阅读 0赞

**目录**

记住这4句话

函数是否是用new来调用的？如果是的话this绑定新创建的对象。 var p = new Person();

函数是否通过call、apply来硬绑定调用的？如果是则this绑定的是指定的对象。 var p = sayHi.call(obj);

函数是否是被摸个上下文对象调用？如果是则this绑定这个上下文对象。 var p = obj.sayHi();

如果以上都不是的话，则使用默认绑定。  var p  = sayHi();

实例1（new）：

实例2（硬绑定 call、apply）

实例3（上下文对象调用）

实例4（使用默认绑定）

例外情况

--------------------

# 记住这4句话 #

1.  ### 函数是否是用new来调用的？如果是的话this绑定新创建的对象。 var p = new Person(); ###
2.  ### 函数是否通过call、apply来硬绑定调用的？如果是则this绑定的是指定的对象。 var p = sayHi.call(obj); ###
3.  ### 函数是否是被摸个上下文对象调用？如果是则this绑定这个上下文对象。 var p = obj.sayHi(); ###
4.  ### 如果以上都不是的话，则使用默认绑定。  var p  = sayHi(); ###

## 实例1（new）： ##

function person(name){
    	this.name=name;
    }
    
    var p = new person("张三")
    	console.log(p);
    var p1 = new person("李四")
    	console.log(p1);

通过new来创建的对象，看他们的this，从下图中可以看到分别创建了新的对象。

![20201220160340815.png][]

## 实例2（硬绑定 call、apply） ##

var person = {
    		name:'person',
    		sayHi:function(){
    			console.log(this)
    		}
    	}
    	var o={name:'o1'};
    	person.sayHi.call(o);

看下图的this打印，这个this绑定的就是对象o：

![20201220161224465.png][]

## 实例3（上下文对象调用） ##

var person = {
    		name:'person',
    		sayHi:function(){
    			console.log(this)
    		}
    	}
    	var o={name:'o1'};
    	person.sayHi();

this打印如下图，直接绑定到person对象上：

![20201220161422347.png][]

## 实例4（使用默认绑定） ##

var name='person';
    	function sayHi(){
    		console.log(this)
    	}
    	sayHi();

打印的this是window

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

# 例外情况 #

var person = {
    		name:'person',
    		sayHi:function(){
    			console.log(this)
    		}
    	}
    	var o={name:'o1'};
    	person.sayHi.call(null);

当用call、apply第一个参数传入null或者undefined的时候，会采用默认的绑定规则，this就指向window。

[20201220160340815.png]: /images/20210724/00ae058821134a64985c752cf977191e.png
[20201220161224465.png]: /images/20210724/40376e132eb94bdea410ef2107d80af8.png
[20201220161422347.png]: /images/20210724/2eb12c2d1ede47638a92f5b6f940ed5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/6c772b9e18e14e0eb0069ccb70aa4814.png