2020-20-28 JS中的this初识

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文深入浅出地介绍了JavaScript中this关键字的基本概念及其指向变化。从简单示例出发，逐步讲解了在不同上下文中this的含义，并探讨了如何利用call和apply方法来改变this的指向。

1、 this 是什么？

this 用一句通俗的话讲就是，谁调用我，this 就是谁，谁最后调用我，this 就是谁，用两个例子讲诉

var a = 10;
var obj = {
	a:20,
	fun:function(){
		console.log(this.a);
	},
};
obj.fun();//20

obj.fun() 说明是 obj 调用了 fun() 方法，那么 this 就指向 obj ，obj.a 不正是等于 20 么，再看下面个例子

var a = 10;
var obj = {
	a:20,
	b:{
		fun:function(){
		console.log(this.a);
		}
	},
};
obj.b.fun();//undefined

obj.b.fun() 中，应该理解为 obj 中的 b 调用了 fun() 方法，所以 b 才是调用者， b.a 并不存在，所以返回 undefined

var fun = function(){
	console.log(this);
};
fun();

上面段代码中，打印的 this 是谁呢？那就看谁调用了 fun() 方法，fun() 写在全局中，就相当于 window.fun(); 所以打印的结果为 window{} 对象

2、函数中的 this

普通函数的 this 与构造函数中的 this 的指向有什么区别呢？

function Stu(name){
	this.name = name;
	console.log(this.name);
	fun:function(){
		console.log(this);
	}
}
var stu1 = new Stu('tom');//tom

这里的 this 不就是通过 new 创建的一个 stu1 对象，this 就指向 stu1,

function fun(){
	console.log(this);
}
fun();//window

+function(){
	console.log(this)
}();//window

3、构造函数的实例化原理

function Person(){
	this.name = 'tom';
}
var per = new Person();

如果直接通过构造函数得到的肯定是一个包含name属性的对象

function Person(){
	this.name = 'tom';
	return 1;//这里返回 1 b并不会影响 per 的结果
}
var per = new Person();
console.log(per);

我们发现，我们给了返回值，得到的 per 并不是 1 ，任然是一个正确的对象，除了数字 1 ，我们还有字符串，布尔值，undefined,null以及复杂数据类型，我们逐一尝试，得到以下结果

返回值为基本数据类型的时候，得到的都是新创建的对象
返回值为 this 以及没有返回值的时候，得到的任然是新创建的对象
当返回值为数组、对象、函数的时候，得到的就是当前返回值中的复杂数据类型

既然已经明白 this 是什么，那么我们能不能改变 this 的指向呢？

4、改变 this 指向（call、apply）

1、call方法
call(改变的对象)
可以传入多个参数(

  var obj = {
       name:'tom',
       sayHello:function(){
           console.log(this.name);
       }
   };

   var obj1 = {name:'jerry'};
   obj.sayHello();//tom
   obj.sayHello.call(obj1);//jerry

2、apply()方法
可以传入两个参数，第一个是要改变的对象，第二个是数组，数组中的参数按顺序被读取

  var obj = {
       name:'tom',
       sayHello:function(){
           console.log(this.name);
       }
   };

   var obj1 = {name:'jerry'};
   obj.sayHello();//tom
   obj.sayHello.apply(obj1);//jerry