深入理解js中this的指向
1、谁才拥有this指向
最近一直在研究this的指向问题,也遇到了很多坑,下面我来谈一下我对this的理解。
this可以理解为一个对象的代表
var obj1 = {
age: 11,
get: function () {
console.log(this.age);
}
}
var obj2 = {
age: 12,
get: function () {
console.log(obj2.age);
}
}
obj1.get(); //11
obj2.get(); //12
以上代码中,obj1和obj2对象中分别有一个get方法,obj1的get方法输出this.get()
,obj2的get方法输出obj2.get()
,结果佷明显无论我使用this调用age属性,还是使用对象名调用似乎都可以,由此可见this就是作为obj对象的一个代表,可以代表它使用内部的所有属性及方法。
2、如何确定this的指向
确定this的指向之前,有以下几个要点:
1、this的指向永远指向调用者
2、使用阶段才能确定最终的this指向
3、new关键字会改变this指向
this指向调用者,这是一个基本法则,若this的下没有被调用的函数或对象等,则会报错
xx is not defined
紧接着上一个说法,既然this永远指向调用者,则一定是在使用阶段才能确定调用者是谁,所以查看this的指向时,优先查找最终的调用者
new改变this指向,一般指构造函数,以Array对象为例:
var arr=new Array();
以上是用构造函数的办法定义数组,现在arr[]
这个数组就可以作为Array的对象,调用他prototype中的所有函数了,arr.sort(),arr.forEach()等等。
下面我再自定义个函数
var name = "zht"; //window对象下的name
var age = "3"; //window对象下的age
function my() {
//打印window对象下的name和age,若将console.log写在下面,则window的name和age会被重新赋值
console.log(this.name, this.age);
this.name = "zh";
this.age = "22";
}
my(); //检查当前this是否指向window对象
var n = new my(); //对my函数构造一个n对象,构造完成后会执行一次n()
console.log(n.name, n.age); //打印n对象下的name和age
// 打印结果为:
// zht 3
// undefined undefined
// zh 22
由上代码可见,my
方法中的this最开始指向window
,构造函数后this
又指向了n
3、改变this的指向
手动改变this指向有两种方法apply
和call
这两种方法的使用方法基本一致,不同点在传参的方式:
function set(a1) {
return this.cat + "+" + this.dog + "+" + a1;
}
var animals = {
cat: "cat",
dog: "dog"
};
console.log(set.call(animals, "pig", "fox")); // cat+dog+pig
console.log(set.apply(animals, ["pig", "fox"])); // cat+dog+pig
call方法的第一个参数往后都是所调用函数的参数位,无论往里传多少个参数都不会出错,只会取前n个调用函数所需的全部参数
apply方法则必须得传入一个参数的数组,否则参数多出,则会报错
function set(a1) {
return this.cat + "+" + this.dog + "+" + a1;
}
var animals = {
cat: "cat",
dog: "dog"
};
console.log(set.call(animals, "pig", "fox")); // cat+dog+pig
console.log(set.apply(animals, "pig", "fox","fox2"));
打印结果如下
apply和call的用法参考自https://blog.csdn.net/ganyingxie123456/article/details/70855586
以上就是我对this的理解,有不对之处,希望大家可以在评论区一起交流进步