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

阅时约 10 分钟

目录

记住这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,从下图中可以看到分别创建了新的对象。

实例2(硬绑定 call、apply)

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

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

实例3(上下文对象调用)

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

this打印如下图,直接绑定到person对象上:

实例4(使用默认绑定)

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

打印的this是window

 

例外情况

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

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